Skip to content
This repository

navbar ul breaking in IE7 #2270

Closed
frequent opened this Issue August 11, 2011 · 8 comments

5 participants

Sven Franck Ghislain Seguin Jasper de Groot Todd Parker noiselesslark
Sven Franck

On my netbook IE7 the navbar from your JQM docs breaks. See example.

I have been playing around with the CSS. If you set the 5 button list item width to almost 20% like so


.ui-grid-d .ui-block-a, .ui-grid-d .ui-block-b, .ui-grid-d .ui-block-c, .ui-grid-d .ui-block-d, .ui-grid-d .ui-block-e {
width: 19.99999999999%;
}

it works.

I guess 19.99% would suffice... :-) should I commit this?

Todd Parker

Do the other grids (2,3,4) break or just the 5 column?

Sven Franck

Sorry for the late reply. On my IE7 the 2,5 and 10 button navbars are breaking. See here:

2 grid breaking in IE7
5 grid breaking in IE7
10 grid breaking in IE7

Since 1px seems to be the problem I looked at the borders. JQM assigns the link element (ui-btn-up-theme) a border of 1px solid and clears border-top/bottom/right-width: 0px.

So only border-left-width:1px left. I don't know, but I think omitting this border on the first navbar list item won't hurt, so that should make it work.

noiselesslark

I've come across this issue as well, in IE8. It also happens in blackberry OS5.

In my case I had a two-grid navbar, and fixed it by manually setting the width of one grid to 49.9% - fixes in both BB5 and IE8. setting it to 49.999% fixes it in IE8.

Sven Franck

I don't know if this is the cause, but look at this page

Check IE and another browser. IE adds 1px between the 2nd and 3rd button. Can't say if it's a border or margin but it's also there after removing buttons active and persistent classes and CSS-setting: border: 0 none !important an all full width button elements. You cannot see it with the regular JQM navbar, but maybe this is also the cause with the regular navbar breaking in IE.

Jasper de Groot
Owner

IE7 and older versions have an issue with percentage widths. While other browsers and newer IE versions have solutions to prevent breaking, IE7 simply rounds up.
So in case of 500px total width and 5 buttons of 20% width everything is fine. When the width is 501px each button will get a width of 100.2 --> 101px and the last button won't fit.

Jasper de Groot uGoMobi referenced this issue from a commit in uGoMobi/jquery-mobile June 12, 2012
Jasper de Groot Fixes #2270 and #2159 - Adjusted grid blocks percentage width to prev…
…ent wrapping on older browsers and set it back for modern browsers. Minor adjustment for grid-a to fix BB5 issue.
e433a15
Jasper de Groot
Owner

hi @frequent - See PR #4514 which contains a link to a test page. Can you give it a try and let me know if the gap [update: the gap --> the wrapping] is fixed and no other issues occur? Thanks!

Sven Franck

Will do. Tomorrow.

Sven Franck

@uGoMobi: Awesome! Great work!

Jasper de Groot uGoMobi closed this issue from a commit June 12, 2012
Jasper de Groot Fixes #2270 and #2159 - Adjusted grid blocks percentage width to prev…
…ent wrapping on older browsers and set it back for modern browsers. Minor adjustment for grid-a to fix BB5 issue.
d02418c
Jasper de Groot uGoMobi closed this in d02418c June 16, 2012
Ghislain Seguin gseguin referenced this issue from a commit in gseguin/jquery-mobile June 12, 2012
Jasper de Groot Fixes #2270 and #2159 - Adjusted grid blocks percentage width to prev…
…ent wrapping on older browsers and set it back for modern browsers. Minor adjustment for grid-a to fix BB5 issue.
a6a0ba4
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.