Centered UL won't expand horizontally in FF/Opera (works in Safari, IE6/7/8)

Question

I have a centered ul (styled like a table ala cssplay) that is having li elements added to it after page render, and it seems to work beautifully in everything but FF and Opera.

The desired effect is to have the row of li elements centered even if there's only one or two of them. This example simulates the issue with jQuery adding an li two seconds after the page is ready.

For whatever reason, it seems like FF 3.05 and Opera 9.63 keep the ul at the initial draw width after the third li is added, even though there is no width specified anywhere in the css.

This is, of course, absolutely murdering me, and any help would be appreciated.

http://deadguy.reliccommunity.com/stuffbox/testinggrounds/display-table.html

Answer 1

I can't give you a real answer, but since nobody else has responded... I ran through it in Firebug (in Firefox 3.01), and when I changed the CSS style of #rounds li to something else, say inline, then back to inline-table, the layout corrected itself. So it looks like your CSS rules are just fine, and that the problem is related to the fact that the extra list item is inserted through Javascript. I also checked that by getting rid of JQuery and inserting a W3C DOM script to do the same thing, and sure enough, same problem.

I'm wondering if you might have found a bug in Firefox (and Opera, I guess), where the page isn't reflowed properly when things are inserted via Javascript.

Answer 2

That was precisely my finding too - I just don't know of any good workarounds.

Answer 3

The table-* display types are still quite underdefined, and so it's no surprise that you're getting different behavior here. In my experience, FF also has some issues with applying certain rules to inserted content. Luckily, though, there is a more intuitive way to code this page that also happens to work.

Rather than setting the (ul) to display:table, leave it as display:block (the default) and give it text-align:center. You don't actually care that the (ul) shrinkwraps the inline tables in this case (which is the net result that your code is achieving), you just want the tables themselves to be centered.

As a bonus, this allows you to remove the wrapping (div), since it's only there to provide a boundary for the (ul)'s margins to push off of. Since you aren't using those margins anymore, you can simply use the (ul) as the containing block, and give it the border instead.

Answer 4

You seem to be putting an 'inline-table' inside a 'table', and 'table-cell's inside 'table' without any 'table-row'. Since that's not valid, any random browser behaviour might result.

In any case, "display: table*" is poorly supported (especially in IE). If you want table layout today it's best to stick with actual tables. Not quite sure what you're trying to achieve; as Xanthir suggests there are simpler ways to achieve simple centering.