css absolute position inside table-cell: strange Firefox display

Question

I have a simple horizontal menu with two levels. This menu stretches to 100% width of the wrapper. Here is the fiddle: http://jsfiddle.net/gpsgv/

If you run this fiddle in any browser except Firefox, it displays the following, as expected:

enter image description here

If you run this fiddle in Firefox, it displays the following:

enter image description here

Looking at the code, the second level lists are absolutely positioned inside the first level items (which have display: relative style). So, setting the left: 10px style to second level list should position it 10px from the left side of its relatively positioned ancestor. Similarly for top: 30px. But in Firefox, instead, it positions it on the left side and at the top of I don't know what, maybe the body?

My question is, is there any solution to make it display correctly in Firefox, without changing the HTML?

P.S. I use display: table-cell because the menu must be spread evenly along 100% container width.

maximkou · Accepted Answer · 2013-07-23T11:16:51.603

10

Without changing html - anyway.

position:absolute forces display: block, read here: http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

Solution: wrap your menu item content to other element:

<li> 
    <div class="menu-item-container">
        <a href="#">Item</a>

        <ul>
            <li>
                <a href="#">First</a>
            </li>
            <li>
                <a href="#">Second</a>
            </li>
        </ul>
    </div>
</li>

And css for wrapper:

.menu-item-container {
    position: relative;
}

edited Jul 23 '13 at 11:16

answered Jul 23 '13 at 10:56

maximkou

5,252
1
20
41

How do you know that it is not resolvable without changing HTML? According to CSS rules it should work, (and it is working, except for FF) – camcam Jul 23 '13 at 11:12
@camcam, position: absolute forces display: block, read http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo – maximkou Jul 23 '13 at 11:15
The only element positioned absolutely is the second level list. So, being displayed as block, it should be positioned absolutely within the first level `
`. Instead, it is positioned absolutely within the body element.

camcam

Jul 23 '13 at 11:33

@camcam, first level "li" displayed as "table-cell", not a "block"! This is obviously stated in your code. It is right that is placed relative to the body, read docs carefully please. – maximkou Jul 23 '13 at 11:39

But the problem is not with first level `li`, it's with second level `ul`. The problem is, why FF doesn't see the right ancestor with relative positioning. – camcam Jul 23 '13 at 11:55

I think you are right, it's necessary to change the HTML. Here is [a helpful post](http://stackoverflow.com/questions/7629326/position-relative-in-firefox/7629567#7629567). And a [citation](http://www.w3.org/TR/CSS21/visuren.html#propdef-position) from w3.org: _The effect of 'position:relative' on (...) table-cell (...) elements is undefined._ So, that's why my table cell `li` ancestor is simply not positioned relatively, so it's not the valid ancestor for absolutely positioned `ul`. – camcam Jul 23 '13 at 12:47

score 1 · Answer 2 · answered Dec 11 '13 at 19:01

1

Instead of using left:10px; use left:auto;

This is workaround, not the real solution.

answered Dec 11 '13 at 19:01

Dmitry Trifonov

1,079
11
13

giorgio · Answer 3 · 2013-07-24T10:01:59.357

-1

You should give the most upper ul a position relative too, otherwise it will indeed use the window itself (or the body for that matter) as the positioning offset.

check it out: http://jsfiddle.net/gpsgv/13/

Edit

After some intense debate (see comments below) it seems firefox is more strict in handling table-like blocks. I couldn't find a cross-browser solution for this one, except for adding a wrapper-div inside the list item holding the second level lists. When I create menu's like that I always use the floating technique. You'll have a little bit more work in terms of sizing the list items (as tables fill up space themselves). Basically you'd do it like this:

Html:

<ul class="nav">
    <li>
        First level 1
        <ul>
            <li>Second level 1</li>
            <li>Second level 2</li>
        </ul>
    </li>
    <li>First level 2</li>
    <li>First level 3</li>
    <li>First level 4</li>
</ul>

Css:

ul.nav { 
    float: left; /* Needed as a kind of clearfix. Other clearfix techniques also possible */
}

/* be sure to add the > to prevent from second level li's to float */
ul.nav > li {
    float: left;
    position: relative;
}

ul.nav > li > ul {
    position: absolute;
    top: 30px;
    left: 10px;
}

And to create the same result as the OP wants, check out this fiddle (checked in chrome and FF, no IE, but should be good): http://jsfiddle.net/gpsgv/17/

edited Jul 24 '13 at 10:01

answered Jul 23 '13 at 10:55

giorgio

10,111
2
28
41

All children items are aligned to the left side of first block – maximkou Jul 23 '13 at 10:57
ehrm... my dear @maximkou, have you seen the fiddle? It works like a charm (I've checked it in chrome as well as firefox). If it doesn't, please tell me what you see and which browser you are using. – giorgio Jul 23 '13 at 11:16
I'm check in Firefox 22.0, in Chrome all good, yes. OS Windows 7 – maximkou Jul 23 '13 at 11:18
so am I... and the other part of my question; what exactly do you see? as my firefox renders it exactly as the OP wants it... – giorgio Jul 23 '13 at 11:19
I don't now. I see what I see. – maximkou Jul 23 '13 at 11:22
I just saw an upload by someone (he deleted is comment), in firefox, with the right output. can you also send a screen maximkou? I really don't understand why you would see it differently _in exactly the same browser and version_ than I do... – giorgio Jul 23 '13 at 11:41
@giorgio I also see the same as maximkou, see the screenshot here: http://img838.imageshack.us/img838/2553/3qjo.jpg (it was me but I thought it was from the wrong fiddle) – camcam Jul 23 '13 at 11:43
@camcam now I'm really confused... that looks exactly the same as the first example in your question... that is how it should be, isn't it? – giorgio Jul 23 '13 at 11:54
The screenshot looks like a mix of the two examples. The vertical position is correct (as in first example) but the horizontal position is incorrect (as in second). So, it's partially correct. That's because they are all alligned to the left side of the same `ul`. – camcam Jul 23 '13 at 11:59

css absolute position inside table-cell: strange Firefox display

3 Answers3

Linked