Firefox jQuery Accordion bug with display:table-cell
A demonstration of this bug can be seen here
The goal
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.
As the 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
The bug
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.
Supplimentary notes
One
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
Entry Information
- Posted:
- Fri, 5th Dec 2008 at 19:12 UTC
- Filed under:
- Tags:
Comments
skip to comment formI 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.
But whenever I place any kind of javascript anywhere between the link to my stylesheets in the head and the content of an element with display:table-cell applied in the body, Firefox (and Firefox only) messes up the display. The individual cells get the width of the table applied and one cell displaces the other to the bottom instead of displaying side by side.