Jump to main navigation, main content

Archived entry | Matt Wilcox .net

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

Comments

skip to comment form
  1. converter posted 93 days, 6hrs, 23mins after the entry and said:

    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 …

  2. Andrei posted 284 days, 17hrs, 41mins after the entry and said:

    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.

From the archives

Other enteries filed under:

Web Development

Site information

Built with valid XHTML and CSS, designed with web standards and accessibility in mind. Best viewed in a modern browser [Firefox, Safari, Opera]

This domain and all content is a copy of my old website, for historical purposes only.