Firefox jQuery Accordion bug with display:table-cell
A demonstration of this bug can be seen here
The goal is to produce a standard accordion menu, with the requirement that the parent buttons (the big grey ones) accommodate up to two lines of text, and that text must be aligned vertically to the middle. Button content may be dynamic, and so text-length is unknown: that means no hackery of providing a class for single-line buttons and a class for multi-line buttons.
vertical-align CSS property can only be used on
table elements, or inline elements, I have set the button to
display:table-cell, and then applied
vertical-align:middle;. This produces the desired result.one
There is a problem with the accordion in Firefox, which you can see here. The initial state is correct, however when the buttons are clicked the subsequent positioning of the buttons is wrong. The button drops to the bottom of the sub-list that is shown when it should stay at the top. This problem is triggered by using
display:table-cell; on the button instead of
display:block;. One fix is to use
display:block; but this breaks the rules by meaning the goal of vertically centred text of an unknown length is unachievable. This bug is not present in Opera 9 or Safari 3.
Quite why the CSS WG decided that vertical-align should apply only to inline elements or table elements is an argument for another day. Frankly it’s a stupid restriction with no rational that I can find (in a similar manner that
widow is a print only property. As though for some reason designers don’t need widow control on a screen).
Bug filed in Bugzilla
I have filed this bug at Bugzilla
- Fri, 5th Dec 2008 at 19:12 UTC
- Filed under:
Commentsskip to comment form
I picked up on this problem with buttons as well, but only today. I've been using mainly Google's Chrome and at times for tests also IE, so had to upgrade and tweak a bit the code. Ta for this from convert-to.com …
I have a bug, too. Not quite the same, but related. I switched to display:table and display:table-cell for layout. I've had enough of struggeling with layout bugs on IE6 and IE7. Now, it works fine with IE8, Chrome, Safari 4, Opera and also with Firefox.
I also use a conditional stylesheet for IE7 and IE6 for display with floats and everythings looks alright there.