Sonderbare CSS-Verhalten (Sprite nav w / Rollover)

Question

Hier ist das Navigationsbild in Frage:

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

Was ich tun möchte, ist ziemlich einfach und ich habe es viele Male in der Vergangenheit getan, ich kann einfach nicht verstehen, warum es nicht richtig funktioniert jetzt. Grundsätzlich verwenden Sie das obere Bild, als nav Hintergrund und passen Sie die Breite und Hintergrund-Positionen entsprechend. Hier ist meine 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; }

Und hier ist der On-Page-Code, mit den generischen HTML5 Doctype, , Für Zukunftssicherheit festgelegt:

<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>

Die seltsamen Dinge, die mir begegnet ist, sind: Der erste Reiter, Haus, perfekt funktioniert. Die übrigen vier Registerkarten nicht gehorchen die ursprüngliche Eigenschaft background-position, wenn ich nicht angeben! Wichtig, aber die Rollovers gut funktionieren. Hier sind Bilder dieser beiden Situationen jeweils:

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

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

Nur auf der Suche nach einem wenig Einblick in dieses (hoffentlich) einfache Problem. Vielen Dank im Voraus!

Answer 1

Der Stil, in dem Sie das Hintergrundbild festlegen, ist spezifischer als die Stile für den Tabs, so dass es presedence nimmt.

Statt der Verbund Stil background zu verwenden, die auch background-position standardmäßig 0% 0% setzt, geben die einzelnen Komponenten:

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

Sie können über Spezifität lesen hier .

Answer 2

Ich weiß nicht genau, was das Problem ist, sondern klingt wie ein Problem mit der relativen Priorität Ihrer CSS-Regeln.

Für diese Art von Problem, Firebug ist ausgezeichnet - es Sie für jedes gegebene Element mitgeteilt werden genau dem CSS-Regeln für sie feuern. Das sollte helfen Sie sehen, wo das Problem liegt.

(Verzeihen Sie mir, wenn Sie bereits über Firebug wissen, aber eine überraschend große Anzahl von Web-Entwicklern nicht.)