comportement CSS Bizarre (sprite de navigation w/rollover)

Question

est ici l'image de navigation en question:

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

Ce que je veux faire est assez basique et je l'ai fait à plusieurs reprises dans le passé, je Je ne comprends tout simplement pas pourquoi cela ne fonctionne pas pour le moment. Fondamentalement, utilisez l'image ci-dessus comme arrière-plan de nav et ajustez les largeurs et les positions d'arrière-plan en conséquence. Voici mon 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; } 

Et voici le code sur la page, avec le doctype HTML5 générique, < DOCTYPE html >, spécifié pour Évolutivité:

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

Les choses étranges que je » Nous sommes tombés sur: Le premier onglet, Home, fonctionne parfaitement. Les quatre onglets restants n'obéissent pas à la propriété background-position initiale à moins que je ne spécifie! Important, mais les rollovers fonctionnent très bien. Voici les images de ces deux situations, respectivement:

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

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

Je cherche juste un petit aperçu de ce simple problème (je l'espère). Merci d'avance!

Answer 1

Le style vous permet de spécifier l'image d'arrière-plan est plus spécifique que les styles pour les onglets, il prend la préséance.

Au lieu d'utiliser le style composite background, qui définit également background-position par défaut 0% 0%, spécifiez les composants séparés:

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

Vous pouvez lire sur la spécificité here.

Answer 2

Je ne sais pas exactement quel est le problème, mais cela ressemble à un problème avec la priorité relative de vos règles CSS.

Pour ce genre de problème, Firebug est excellent - il vous dira pour chaque élément quels sont exactement les règles CSS qui le déclenchent. Cela devrait vous aider à voir où se situe le problème.

(Pardonnez-moi si vous connaissez déjà Firebug, mais un nombre surprenant de développeurs web ne le font pas.)