CSS menu broken in Firefox (display:table-cell;)

Answer 1

Actually I think you'll find that IE works because it ignores display: table-cell. Display: table-cell is actually you're problem.

What I'm guessing is happening is that IE is reverting those to be inline element, hence horizontal.

Change it to:

display: inline;

add some padding (left and right) as necessary and you'll get what you want.

Alternatively you can float them (left and/or right).

Besdies, they're already in a table cell. Table cell display inside that is a bit wrong.

Answer 2

Thank you very much for this answer, it helped me a lot :)

Answer 3

We've run into this issue as well. Still looking for a solution. In our case, we need to keep display: table-cell layout.

It appears Firefox sometimes and seemingly randomly, will cause table-cell objects to wrap rather than act like an actual table. A REFRESH fixes it, which just makes it that more difficult to bug fix.

Answer 4

Seems to be a simple FireFox bug. I encountered the problem the other way around: The DIVs with table-cell arranged below each other after the refresh in FF 3.5.9 on Win XP.

I was not able to not find any solution (wrap the cells into a row, overflow hidden, etc) but to update FireFox to 3.6.3 and hope there are few users with that version.

Answer 5

This sounds similar to a firefox reflow bug that I'm trying to fix as well. Apparently tables are really bad for rendering, since they cause a reflow and it seems that Firefox sometimes misses the reflows.

I found the following pages to be helpful:

• http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
• http://www.mozilla.org/newlayout/doc/reflow.html