Weird-CSS-Verhalten (Sprite nav w/Rollover)

Question

Hier ist das Navigationsbild in Frage:

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

Was ich will ist ziemlich einfach zu tun, und ich habe es viele Male in der Vergangenheit getan, ich kann einfach nicht verstehen, warum es gerade nicht funktioniert. Verwenden Sie das obige Bild grundsätzlich als Navigationshintergrund und passen Sie die Breiten und Hintergrundpositionen entsprechend an. 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 der generischen HTML5 Doctype, < DOCTYPE html >, für Zukunftssicherheit angegeben:

<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 ich Wir sind uns einig: Der erste Tab, Home, funktioniert einwandfrei. Die verbleibenden vier Registerkarten folgen nicht der ursprünglichen Hintergrundpositionseigenschaft, es sei denn, ich spezifiziere! Wichtig, aber die Rollover funktionieren gut. Hier sind Bilder dieser beiden Situationen jeweils:

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

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

Einfach mal für einen kleinen Einblick in diese (hoffentlich) einfaches Problem. Danke im Voraus!

Answer 1

Der Stil, in dem Sie das Hintergrundbild festlegen, spezifischer als die Stile für die Tabs, so dass es nimmt die Präsenz.

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

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

Sie über Spezifität here lesen kann.

Answer 2

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

Für diese Art von Problem ist Firebug ausgezeichnet - es wird Ihnen für jedes gegebene Element genau sagen, welche CSS-Regeln dafür feuern. Das sollte Ihnen helfen zu sehen, wo das Problem liegt.

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