Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

navbar ul breaking in IE7 #2270

Closed
frequent opened this Issue · 8 comments

5 participants

@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?

@gseguin gseguin was assigned
@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
Collaborator

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 jaspermdegroot referenced this issue from a commit
@jaspermdegroot jaspermdegroot 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
@jaspermdegroot
Collaborator

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!

@jaspermdegroot jaspermdegroot closed this issue from a commit
@jaspermdegroot jaspermdegroot 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
@gseguin gseguin referenced this issue from a commit in gseguin/jquery-mobile
@jaspermdegroot jaspermdegroot 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.