navbar ul breaking in IE7

[frequent]

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?

[toddparker]

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

[frequent]

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.

[frequent]

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.

[jaspermdegroot]

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.

[jaspermdegroot]

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!

[frequent]

Will do. Tomorrow.

[frequent]

@uGoMobi: Awesome! Great work!