CSS comportamiento extraño (NAV sprites w / vuelco)

Question

Aquí está la imagen de navegación en cuestión:

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

Lo que quiero hacer es bastante básico y lo he hecho muchas veces en el pasado, simplemente no puedo entender por qué no está funcionando en este momento. utilizar básicamente lo anterior imagen como fondo de navegación y ajustar el ancho y fondo posiciones en consecuencia. Aquí está mi 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; }

Y aquí está el código en la página, con el tipo de documento genérico HTML5, , especificado para el futuro de pruebas:

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

Las cosas extrañas que he encontrado son los siguientes: La primera pestaña, Hogar, funciona perfectamente. Las cuatro fichas restantes no obedecen a la propiedad background-position inicial si no especifico! Importante, pero los vuelcos funcionan bien. Aquí están las imágenes de estas dos situaciones, respectivamente:

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

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

Sólo en busca de un poco de conocimiento de este (esperemos) simple problema. Gracias de antemano!

Answer 1

El estilo donde se especifica la imagen de fondo es más específico que los estilos para las pestañas, por lo que toma presedence.

En lugar de utilizar el background estilo compuesto, que también establece background-position por defecto para 0% 0%, especifique los componentes separados:

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

Usted puede leer acerca de la especificidad aquí .

Answer 2

No sé exactamente cuál es el problema, pero es suena como un problema con la prioridad relativa de sus reglas CSS.

Para ese tipo de problema, Firebug es excelente - que le informará de cualquier elemento dado exactamente qué reglas CSS están disparando para ello. Eso debería ayudar a ver dónde está el problema.

(Perdóname si ya sabe acerca de Firebug, pero un sorprendente número de desarrolladores web no lo hacen.)