Search and Top Navigation
#5589 closed bug (wontfix)
Opened May 06, 2010 07:22PM UTC
Closed July 13, 2010 12:01PM UTC
Buttons: display issue in FF2 when source element is anchor, checkbox, or radio
| Reported by: | webchix | Owned by: | |
|---|---|---|---|
| Priority: | blocker | Milestone: | 1.9.0 |
| Component: | ui.button | Version: | 1.8 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
From http://forum.jquery.com/topic/button-demo-not-working-properly-in-firefox-2
I was going over the button demos at http://jqueryui.com/demos/button/ in IE6, IE8, FF2, FF3 and Chrome 4 and discovered that the anchors, radios and checkboxes are broken in FF2. I had assumed it was the theme and/or the page itself but the issue is still present when I change themes and tested it on my own page.
The full FF version number used is 2.0.0.20.
Attachments (2)
Change History (5)
Changed May 06, 2010 08:10PM UTC by comment:1
Changed May 06, 2010 08:13PM UTC by comment:2
Visible on this static test page in FF2:
http://view.jqueryui.com/master/tests/static/button/default.html
Changed May 07, 2010 08:29PM UTC by comment:3
I've updated the markup and styles to fix this issue in FF2. The challenge is that we're setting the overall button style to display: inline-block, and FF2 doesn't support that CSS property. The fix consists of the following:
- a proprietary Moz property to the .ui-button style rule that approximates display: inline-block (display: -moz-inline-stack;)
- an additional element, a span tag, that encloses the inner contents of buttons created with anchor (a) or label elements. This extra tag is necessary so that we can absolutely position any icons in the right place -- it's a workaround for another FF2 bug, where absolute positioning breaks within elements that use the -moz-inline-stack (or -moz-inline-box) property. http://kempwire.com/browsers/firefox-2-does-not-support-inline-block.html
New static files are attached (default.html and jquery.ui.button.css) and should be thoroughly tested on all jQuery UI-supported browsers. If this fix fails, an alternate would be to float all ui-button elements instead of giving them inline-block properties (in which case extra markup would not be necessary).
Changed May 23, 2010 12:30AM UTC by comment:4
aint firefox 2.0 EOL?
This is caused by display:block on the span inside the <a> or <label> from
.ui-button .ui-button-text { display: block; line-height: 1.4; }
jquery.ui.button.css (line 11)