Why is position: relative; not working on firefox?

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;
}