CODEWITHSUNDEEP
cssspritecss-sprites
jefhart
jefhart

Reputation: 1

CSS Sprites- they all work but one

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

I have come across a very strange problem using css and sprites. If you go to the link above you will see all the navigation rollovers work but "home". I have used the same code for all the buttons and tried copying the ones that work and just replacing the name of the rollover, using things like "asdf" as the name in case "home" was reserved, etc. This makes NO SENSE.

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

This is the 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;
}

Upvotes: 0

Views: 121

Answers (1)

James
James

Reputation: 22246

What happens if you get rid of the extra } in your css file? Looks like it'll work.

Upvotes: 3

Related Questions