Странное поведение 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 html›, указанным для проверки в будущем:

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

Странные вещи, с которыми я столкнулся: первая вкладка «Главная» работает отлично. Остальные четыре вкладки не подчиняются начальному свойству 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