Странно поведение на CSS (навигация на спрайт с преобръщане)

Ето въпросното изображение за навигация:

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

Това, което искам да направя, е доста основно и съм го правил много пъти в миналото, просто не мога да разбера защо не работи в момента. Основно използвайте изображението по-горе като фон за навигация и коригирайте съответно ширините и позициите на фона. Ето моят 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; }

И ето кода на страницата с общия HTML5 doctype, ‹!DOCTYPE html›, посочен за бъдеща проверка:

<div id="navigation">

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

</div>

Странните неща, на които се натъкнах са: Първият раздел, Home, работи перфектно. Останалите четири раздела не се подчиняват на първоначалното свойство background-position, освен ако не посоча !important, но преобръщанията работят добре. Ето изображения на тези две ситуации, съответно:

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

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

Просто търся малко вникване в този (надяваме се) прост проблем. Благодаря предварително!


navigation html css css-sprites
person Andrew    schedule 07.08.2009    source източник

Отговори (2)


arrow_upward
1
arrow_downward

Стилът, в който посочвате фоновото изображение, е по-специфичен от стиловете за разделите, така че има предимство.

Вместо да използвате съставния стил background, който също задава background-position по подразбиране на 0% 0%, посочете отделните компоненти:

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

Можете да прочетете за спецификата тук.

person Guffa    schedule 07.08.2009
comment
Това свърши работа. Моята обосновка беше, че по-специфичните позиции на фона, определени след факта, ще заменят оригиналната, по подразбиране горе вляво/0 0. Изглежда малко контраинтуитивно за каскадната част на каскадните таблици със стилове, но работи и съм благодарен. - person Andrew; 08.08.2009

arrow_upward
0
arrow_downward

Не знам точно какъв е проблемът, но звучи като проблем с относителния приоритет на вашите CSS правила.

За такъв проблем Firebug е отличен - той ще ви каже за всеки даден елемент кои точно CSS правила се задействат то. Това трябва да ви помогне да видите къде е проблемът.

(Извинете ме, ако вече знаете за Firebug, но изненадващ брой уеб разработчици не знаят.)

person RichieHindle    schedule 07.08.2009