4

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?

hungerstar
  • 21,206
  • 6
  • 50
  • 59
mrN
  • 3,734
  • 15
  • 58
  • 82
  • I can't see anything wrong with this. Are you expecting `
    ` to move to the top of the li or something? If so you're missing `top:0;` for `.sub`
     – Graham Walters Aug 28 '13 at 03:27
  • Do you need the `left: 0;` in your `.sub`? I haven't tested, but I think if you remove it both should look the same. – Harry Aug 28 '13 at 03:27
  • @GrahamWalters, I goes beyond the li. That is not the expected behavior for position: relative in the parent. – mrN Aug 28 '13 at 03:34
  • Yes, I need `left:0` to bring the container aligned with the `a` in IE and chrome. – mrN Aug 28 '13 at 03:35

3 Answers3

7

.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;
}
hungerstar
  • 21,206
  • 6
  • 50
  • 59
  • It's your `display: table-cell;` that causing the issue. Please follow the link. – hungerstar Aug 28 '13 at 03:50
  • The link shows issues with a HTML implementations of table, not CSS. Am i incorrect? – mrN Aug 28 '13 at 03:52
  • No, it plainly states in the intro of the article that: `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 goes on to explain some solutions. One of which is to add and element inside the table-cell and add the positioning to that. Please see this updated jsFiddle: http://jsfiddle.net/TThUZ/6/ – hungerstar Aug 28 '13 at 03:58
0

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

li { 
    display: block; 
}

I have updated your FIDDLE.

Jude Duran
  • 2,195
  • 2
  • 25
  • 41
  • I need this to work with table-cell because using it I can evenly distribute li among the ul container. – mrN Aug 28 '13 at 03:37
0

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.

Tieson T.
  • 20,774
  • 6
  • 77
  • 92