Weird CSS behavior (sprite nav w/rollover)

StackOverflow https://stackoverflow.com/questions/1246871

Question

Here's the navigation image in question:

http://img.skitch.com/20090807-t8e6d9ymrtpdifqy88xpu6x36.png

What I want to do is pretty basic and I've done it numerous times in the past, I just can't understand why it isn't working right now. Basically use the above image as the nav background and adjust the widths and background-positions accordingly. Here is my CSS:

#navigation { width: 960px; height: 28px; clear: both; background: url('../images/nav-bg.png') repeat-x; }

        #navigation ul { margin: 0 0 0 20px; padding: 0; }
            #navigation ul li { float: left; list-style: none; }
            #navigation ul li a { display: block; height: 28px; background: url('../images/nav-tabs.png') no-repeat; text-indent: -9999px;}

                #nav-home { width: 62px; }
                    #nav-home.active, #nav-home:hover { background-position: 0 -28px; }

                #nav-cp { width: 130px; background-position: -62px 0; }
                    #nav-cp.active, #nav-cp:hover { background-position: -62px -28px; }

                #nav-web { width: 106px; background-position: -192px 0; }
                    #nav-web.active, #nav-web:hover { background-position: -192px -28px; }

                #nav-clix { width: 106px; background-position: -298px 0; }
                    #nav-clix.active, #nav-clix:hover { background-position: -298px -28px; }

                #nav-dna { width: 90px; background-position: -405px 0; }
                    #nav-dna.active, #nav-dna:hover { background-position: -405px -28px; }

And here is the on-page code, with the generic HTML5 doctype, <!DOCTYPE html>, specified for future proofing:

<div id="navigation">

    <ul id="nav-tabs">
        <li><a href="#" id="nav-home">Home</a></li>
        <li><a href="#" id="nav-cp">Client Portal</a></li>
        <li><a href="#" id="nav-web">Weboptima</a></li>
        <li><a href="#" id="nav-clix">Clixfactor</a></li>
        <li><a href="#" id="nav-dna">Lead DNA</a></li>
    </ul>

</div>

The weird things I've come across are: The first tab, Home, works perfectly. The remaining four tabs don't obey the initial background-position property unless I specify !important, but the rollovers work just fine. Here are images of these two situations, respectively:

http://img.skitch.com/20090807-fybag852bbbi6ut751w167y1hp.png

http://img.skitch.com/20090807-rmn9b2tu54q4agyta2idfra5x5.png

Just looking for a little insight into this (hopefully) simple problem. Thanks in advance!

Was it helpful?

Solution

The style where you specify the background image is more specific than the styles for the tabs, so it takes presedence.

Instead of using the composite style background, that also sets background-position by default to 0% 0%, specify the separate components:

background-image: url('../images/nav-tabs.png'); background-repeat: no-repeat;

You can read about specificity here.

OTHER TIPS

I don't know exactly what the problem is, but is sounds like an issue with the relative priority of your CSS rules.

For that sort of problem, Firebug is excellent - it will tell you for any given element exactly which CSS rules are firing for it. That should help you see where the problem lies.

(Forgive me if you already know about Firebug, but a surprising number of web developers don't.)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top