468133 - display:table-cell causes unexpected layout when using jQuery Accordion

Status: RESOLVED WORKSFORME

(Core :: Layout: Tables, defect)

Description

[Matt Wilcox]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.0; en-GB; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-GB; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

The innitial 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.

please see http://mattwilcox.net/sandbox/firefox-display-table-bug/firefox-bug-1.htm for a more detailed description and a working example.

Reproducible: Always

Steps to Reproduce:
None required.
Actual Results:  
Upon activating the Accordion Menu, the parent list element (the 'button' that expands the list) drops to BELOW it's child list.

Expected Results:  
The parent list element should remain ABOVE the child list.

Comment 1

[Daniel.S]

I can reproduce this on Firefox3, but not on current trunk.

Comment 2

[Bernd]

this has been probably fixed by bug 148810 on trunk