CODEWITHSUNDEEP
htmlcsscross-browser
mrN
mrN

Reputation: 3774

Why is position: relative; not working on firefox?

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?

Upvotes: 4

Views: 4235

Answers (3)

hungerstar
hungerstar

Reputation: 21685

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

Upvotes: 7

Tieson T.
Tieson T.

Reputation: 21191

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.

Upvotes: 0

Jude Duran
Jude Duran

Reputation: 2205

try setting LI's display to block instead of table-cell

li { 
    display: block; 
}

I have updated your FIDDLE.

Upvotes: 0

Related Questions