CODEWITHSUNDEEP
cssfirefoxcss-selectors
hujhax
hujhax

Reputation: 97

Why can't I absolute-position generated content in Firefox?

I'm creating a horizontal navigation bar. Here's its CSS:

#topnav {
    clear: both;
    overflow: hidden;
    display: table;
}

#topnav ul {
    display: table-row;
}

#topnav ul li {
    display: table-cell;
    vertical-align: middle;
    background: #1b4260;
    position: relative;
}

#topnav a {
    display: block;
    color: white;
    padding: 10px 0px 15px 10px;
    font-size: 14px;
    width: 100px;
    text-align: center;
}

#topnav ul li+li:before{
    content: "*";
    position: absolute;
    top: 11px;
    color: #ff0000;
    float: left;
}

And here's the HTML:

<p>---</p>
<p>---</p>
<div id="topnav">
    <ul>
        <li>
            <a href="blah">Item 1</a>
        </li>
        <li>
            <a href="blah">Item 2</a>
        </li>
        <li>
            <a href="blah">Item 3</a>
        </li>
    </ul>
</div>

This creates a navigation bar with little asterisk separators. It looks fine in every browser...

... except Firefox. Firefox ignores "position: absolute" on the generated content:

Why would it do that? Am I doing something wrong with my CSS?

Upvotes: 2

Views: 594

Answers (2)

dclowd9901
dclowd9901

Reputation: 6826

I know it's not ideal, but I found a way to do it without positioning to top and without absolutely positioning the ul. You remove the top positioning, and use a margin-top to adjust the position of the asterisk.

http://jsfiddle.net/ajPLB/7/

Jani's solution concerns me because position:relative should theoretically work, as well (and it'd be the less intrusive solution), but it doesn't, which means the solution doesn't have anything to do with normal positioning priorities, and seems to rely on some odd way Firefox handles positioning priority.

Upvotes: 0

Jani Hyyti&#228;inen
Jani Hyyti&#228;inen

Reputation: 5407

You need to position the ul also:

#topnav ul {
    display: table-row;
    position:absolute;
}

See here: http://jsfiddle.net/k5hVP/1/

Upvotes: 2

Related Questions