Why is position: relative; not working on firefox? - html

Question

I am postioning a div inside a relative container absolutely, but in firefox it completly ignores it.
Here is a fidde for this: 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; }
The .sub does not follow the position: relative of the li. Why? And How to fix it?

Answer 1

.sub is doing what it is supposed to. I believe it has to to with your display: table-cell;. Check this link out for verification: http://css-tricks.com/absolutely-position-element-within-a-table-cell/
[...]Table cell elements just won't take those position values. And
thus, you also can't absolutely position elements within the context
of those elements either.[...]
The article above suggests the following fix, add and element inside the table-cell to use positioning. Not very semantic, but it works.
http://jsfiddle.net/TThUZ/6/
Notice the additional div that is using the relative positioning instead of your li that has 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 just a little extra CSS. Move position: relative; from the li to the new div. I also moved the padding you had on your li to the 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's display to block instead of table-cell
li {
display: block;
}
I have updated your FIDDLE.

Answer 3

I think you're applying styles that contradict themselves in the box model, so you wind up with what amounts to unpredictable behavior. From what I can tell, you're triggering this by specifying display: table; on the <ul>:
The effect of 'position:relative' on table-row-group,
table-header-group, table-footer-group, table-row, table-column-group,
table-column, table-cell, and table-caption elements is undefined.
(http://www.w3.org/TR/CSS21/visuren.html#propdef-position)
There is a table that tries to define the recommended user-agent behavior, at http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo, but I couldn't quite work out which is applicable for your example.
If I removed the table rules from your CSS, the absolutely-position element does seem to position itself correctly in relation to the <li> that wraps it.
EDIT:
The simplest solution I came up with is to wrap the contents of each <li> with a <div>, to which you then apply a position: relative; rule (** denotes 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'm fairly certain you can remove the positioning rule from the <li>, as it has no effect when the elements are displayed as table cells.