Positioning problems in Firefox? position:relative for a display:table element

Question

i\'m experiencing the weirdest positioning problem that appears only in firefox.

My HTML:

Answer 1

I'm using display:table myself. It's a work-around for certain layout issues that display: block fails to sufficiently deal with. The rationale is lengthy and I'm not going into it here.

This is a consequence of the current HTML 4/5 specification not defining certain behaviors with regards to the "display: table{-x};" and positioning.

From the book "Everything You Know About CSS Is Wrong" BY Rachel Andrew & Kevin Yank:

A common practice when dealing with positioning within a block element is to create a new positioning context by setting the position property of the block element to relative. This allows us to position elements within the block, relative to its top, right, bottom, or left. However, when setting position: relative; on an element that also has a table-related display value specified, the positioning is ignored. This behavior has previously been documented by Alastair Campbell, who points out in his article that the CSS 2.1 spec is not clear on what browsers should do when an element displaying as a table element is relatively positioned:

The effect of position: relative on table-row-group, table-header-group, table-footer-group, table-row, table-columngroup, table-column, table-cell, and table-captionelements is undefined.

This behavior is, in my opinion, the biggest problem with using CSS tables for layout...

Apparently Mozilla simply ignores any attempt to establish a positioning context using CSS table elements.

The same reference continues with two suggestions:

There’s no straightforward approach to fixing this problem using CSS tables, but we can take one of two simple approaches to provide a positioning context: add a positioned child block element to the cell, or wrap the table in a positioned element.

There is no elegant solution to this one. It requires a case-by-case evaluation of the issue and a tailored workaround. :(

In your case you might as well leave off the "position: relative" out of your "Layer" class. It's meaningless to Firefox.

Since you've created the "Layer" class as a table, simple make each of the s in the last instance "display: table-cell;".

so your CSS can be done thus:

.Layer:last-of-type > div
{
display: table-cell;
/* Other formatting here. */
}

Answer 2

If you change display:table to display:block throughout, it renders fine as you can see here. Is there a reason you're using display:table?