Firefox jQuery Accordion bug with display:table-cell
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