CSS Sprites - все они работают, но один - PullRequest
Новая
       3

CSS Sprites - все они работают, но один

0 голосов
/ 18 августа 2011

http://kilgourschameleons.com/new/test/index.asp

Я столкнулся с очень странной проблемой при использовании CSS и спрайтов.Если вы перейдете по ссылке выше, вы увидите все , навигационные ролловеры работают , но"home".Я использовал один и тот же код для всех кнопок и попытался скопировать те, которые работают, и просто заменил имя ролловера, используя такие слова, как «asdf», как имя в случае, когда «home» был зарезервирован, и т. Д. Это не имеет смысла.

<div>
    <img src="images/spacer.gif" width=960 height=104 border=0>
    </div>
    <center>
    <ul id="navigation">
    <li><a href="index.asp" class="home active"></a></li>
    <li><a href="gallery.asp" class="gallery"></a></li>
    <li><a href="care.asp" class="care"></a></li>
    <li><a href="products.asp" class="products"></a></li>
    <li><a href="sires.asp" class="sires"></a></li>
    <li><a href="faq.asp" class="faq"></a></li>
    <li><a href="about.asp" class="about"></a></li>
    </ul>
    </center>
    <div>
    <img src="images/spacer.gif" width=960 height=37 border=0>
    </div>

Это css ... 

#navigation {
    position:relative;
    top:0px;
    width:960px;
    height=55px;
    text-align:center;
    margin-left: 0 auto;
    margin-right: 0 auto;
    margin:0;
    z-index:1000;
}
#navigation li {
    float: left;
}
#navigation li a {
    background: url("../images/navigation_bg.png") no-repeat scroll left top transparent;
    display: block;
    height: 55px;
}
#navigation li a.home {
    background-position: 0px 0px;
    width: 148px;
}
#navigation li a.gallery {
    background-position: -148px 0px;
    width: 109px;
}
#navigation li a.care {
    background-position: -257px 0px;
    width: 84px;
}
#navigation li a.products {
    background-position: -341px 0px;
    width: 115px;
}
#navigation li a.sires {
    background-position: -456px 0px;
    width: 79px;
}
#navigation li a.faq {
    background-position: -535px 0px;
    width: 80px;
}
#navigation li a.about {
    background-position: -615px 0px;
    width: 120px;
}

}
#navigation li a.home:hover, #navigation li a.home.active {
    background-position: 0px -55px;
}
#navigation li a.gallery:hover, #navigation li a.gallery.active {
    background-position: -148px -55px;
}
#navigation li a.care:hover, #navigation li a.care.active {
    background-position: -257px -55px;
}
#navigation li a.products:hover, #navigation li a.products.active {
    background-position: -341px -55px;
}
#navigation li a.sires:hover, #navigation li a.sires.active {
    background-position: -456px -55px;
}
#navigation li a.faq:hover, #navigation li a.faq.active {
    background-position: -535px -55px;
}
#navigation li a.about:hover, #navigation li a.about.active {
    background-position: -615px -55px;
}

1 Ответ

3 голосов
/ 18 августа 2011

Что произойдет, если вы избавитесь от лишних } в вашем CSS-файле?Похоже, это сработает.

...