views:

19

answers:

1

Hi, all.

I have an ordered list for my horizontal navbar, but I'm using sprite images (for a, active & hover) instead of letting any text show. I'm trying to let the image appear on a row using float: left, but it's not happening. I think the next image appears behind the first.

Here's my code: HTML:

<div id="navbar">
        <ol id="toc">
            <li id="nava"><a href="index.html">Home</a></li>
            <li id="navb"><a href="firm.html">The Firm</a></li>
            <li id="navc"><a href="legal.html">Legal Services</a></li>
            <li id="navd"><a href="partners.html">Partners & Associates</a></li>
            <li id="nave"><a href="paralegal.html">Para-legal Services</a></li>
            <li id="navf"><a href="clients.html">Clients</a></li>
            <li id="navg"><a href="articles.html">Articles</a></li>
            <li id="navh"><a href="contact.html">Contact</a></li>
        </ol>
</div>

CSS:

    #navbar
    {
        width: 900px;
        height: 103px;
        /*position: relative;
        z-index: 1;*/
        padding-top: 151px;
        padding-left: 1px;
    }

    ol#toc {
        height: 103px;
        list-style: none;
        margin: 0 auto;
        padding: 0;
        text-indent: -9999px;
    }

    ol#toc li {
        margin: auto;
    }

    li#nava a
    {
        background: url(../images/GBDLR-nav-text.png);
        display: block;
        float: left;
        height: 103px;
        width: 112px;
        background-position: 0 0;
    }

    li#nava a
    {
        background: url(../images/GBDLR-nav-text.png);
        display: block;
        float: left;
        height: 103px;
        width: 112px;
        background-position: 0 0;
    }

    li#nava a:hover
    {
        background-position: 0 -103px;
    }

    li#navb a
    {
        background: url(../images/GBDLR-nav-text.png);
        display: block;
        float: left;
        height: 103px;
        background-position: 0 0;
    }

    li#navb a:hover
    {
        background-position: -112px -103px;
    }

Hope you guys can help.

Thanks so much!! :)

A: 

ooops..I was already able to fix this. :) I just missed one line. Sorry for the bother. :)

laura