Why position: relative; not working on firefox?

Question

I place the div inside the relative container absolutely, but in firefox it completely ignores it.

Here is an example: http://jsfiddle.net/TThUZ/

My HTML:

<div class="main"> <ul> <li> <a> Text </a> <div class="sub"> Sub </div> </li> </ul> </div> 

CSS:

 ul { display: table; } li { display: table-cell; width: 300px; background: #ddd; padding-left: 50px; position: relative; } .sub { position: absolute; left: 0; } 

.sub does not match: relative li . What for? And how to fix it?

Answer 1

.sub does what it should. I believe this should be with your display: table-cell; . Check this link for verification: http://css-tricks.com/absolutely-position-element-within-a-table-cell/

[...] Table cell elements simply do not accept these position values. And also in this way, you also cannot completely position the elements in the context of these elements. [...]

The above article proposes the following fix, addition, and item inside a table cell to use positioning. Not very semantic, but it works.

http://jsfiddle.net/TThUZ/6/

Pay attention to an additional div that uses relative positioning instead of your li having display: table-cell; .

HTML

 <div class="main"> <ul> <li> <div class="table-cell-fix"> <a> Text </a> <div class="sub"> Sub </div> </div> </li> </ul> </div> 

Now a little extra CSS. Move position: relative; from li to the new div . I also moved the add you had on your li to a new div .

CSS

 ul { display: table; } li { display: table-cell; width: 300px; background: #ddd; } .sub { position: absolute; left: 0; top: 0; } .table-cell-fix { position: relative; padding-left: 50px; } 

Answer 2

try setting LI to block instead of table-cell

 li { display: block; } 

I updated FIDDLE .

Answer 3

I think that you apply styles that contradict yourself in the box, so you end up with unpredictable behavior. From what I can say, you call this by specifying display: table; on <ul> :

The "position: relative" effect in table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell and table-caption is undefined. ( http://www.w3.org/TR/CSS21/visuren.html#propdef-position )

There is a table that tries to determine the recommended user agent behavior, http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo , but I could not fully work out which is applicable for your example.

If I remove the table rules from your CSS, the absolute-position element seems to be correctly positioned in relation to the <li> that wraps it.

EDIT:

The simplest solution I came across is to wrap the contents of each <li> with a <div> , to which you then apply the position: relative; rule position: relative; (** stands for additions): http://jsfiddle.net/TThUZ/4/

 <div class="main"> <ul> <li> **<div class="test">** <a> Text </a> <div class="sub"> Sub </div> **</div>** </li> </ul> </div> 

and

 ul { display: table; } li { display: table-cell; width: 300px; background: #ddd; padding-left: 50px; } **.test { position: relative; }** .sub { position: absolute; left: 0; } 

I am sure that you can remove the positioning rule from <li> , since it does not work when elements are displayed as table cells.