Opened 9 years ago

Closed 9 years ago

#5589 closed bug (wontfix)

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)

default.html (5.5 KB) - added by fg.maggie 9 years ago.
jquery.ui.button.css (2.0 KB) - added by fg.maggie 9 years ago.

Download all attachments as: .zip

Change History (7)

comment:1 Changed 9 years ago by rdworth

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)

comment:2 Changed 9 years ago by rdworth

Changed 9 years ago by fg.maggie

Attachment: default.html added

Changed 9 years ago by fg.maggie

Attachment: jquery.ui.button.css added

comment:3 Changed 9 years ago by fg.maggie

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).

comment:4 Changed 9 years ago by AzaToth

aint firefox 2.0 EOL?

comment:5 Changed 9 years ago by Scott González

Resolution: wontfix
Status: newclosed

As AzaToth said, we don't support Firefox 2 anymore.

Note: See TracTickets for help on using tickets.