New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

navbar ul breaking in IE7 #2270

Closed
frequent opened this Issue Aug 12, 2011 · 8 comments

Comments

Projects
None yet
5 participants
@frequent
Contributor

frequent commented Aug 12, 2011

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

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Aug 12, 2011

Contributor

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

Contributor

toddparker commented Aug 12, 2011

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

@ghost ghost assigned gseguin Aug 12, 2011

@frequent

This comment has been minimized.

Show comment
Hide comment
@frequent

frequent Aug 22, 2011

Contributor

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.

Contributor

frequent commented Aug 22, 2011

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

This comment has been minimized.

Show comment
Hide comment
@noiselesslark

noiselesslark Aug 24, 2011

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.

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

This comment has been minimized.

Show comment
Hide comment
@frequent

frequent Oct 3, 2011

Contributor

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.

Contributor

frequent commented Oct 3, 2011

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Apr 20, 2012

Member

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.

Member

jaspermdegroot commented Apr 20, 2012

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 12, 2012

Member

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!

Member

jaspermdegroot commented Jun 12, 2012

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

This comment has been minimized.

Show comment
Hide comment
@frequent

frequent Jun 12, 2012

Contributor

Will do. Tomorrow.

Contributor

frequent commented Jun 12, 2012

Will do. Tomorrow.

@frequent

This comment has been minimized.

Show comment
Hide comment
@frequent

frequent Jun 13, 2012

Contributor

@uGoMobi: Awesome! Great work!

Contributor

frequent commented Jun 13, 2012

@uGoMobi: Awesome! Great work!

gseguin pushed a commit to gseguin/jquery-mobile that referenced this issue Jun 27, 2012

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment