[RESOLVED] css rollover issue

[Captainkewl]

Hey everyone. In the past I have used javascript for my rollover images. I am now starting to use pure CSS rollovers. I have everything working fine, but it is not allowing me to go to the URL of the button when clicked on. URL is: http://cinematiccorp.com/cartiertest/index.html

HTML:
<ul id="nav">
<li class="home"><a href="index.html"><span>home</span></a></li>
<li class="about"><a href="about.html"><span>about us</span></a></li>
<li class="products"><a href="products.html"><span>products</span></a></li>
<li class="beforeafter"><a href="beforeafter.html"><span>before and after</span></a></li>
<li class="contact"><a href="contact.html"><span>contact</span></a></li>
</ul>

CSS: #nav {
float:left;
margin-left:750px;
margin-top:5px;
width:208px;
}

.home, .about, .products, .beforeafter, .contact {
width: 208px;
height: 62px;
background: url(images/home.png) no-repeat 0 0;
}

.about {background: url(images/about.png) no-repeat 0 0;}

.products {background:url(images/products.png) no-repeat 0 0;}

.beforeafter {background:url(images/beforeafter.png) no-repeat 0 0;}

.contact {background:url(images/contact.png) no-repeat 0 0;}

.home:hover, .about:hover, .products:hover, .beforeafter:hover, .contact:hover{ background-position: 0 -62px;} .home span, .about span, .products span, .beforeafter span, .contact span{ display: none;}

I have the a href set for each image, but it's not working (rollover effect is working though)

[skywalker2208]

That is because your link text is set to display: none. If you make the links show then the actual text only allows you to click in the upper right hand corner of the button.

[Captainkewl]

Thanks for the reply. Is there a way to make the whole button clickable?

[Webnerd]

Make your <a> tag links display:block and set the height and width

[Captainkewl]

Thanks for the response. If you go here now: http://cinematiccorp.com/cartiertest/index.html you will see that the whole button does now allow to click the URL after doing this: #nav {
float:left;
margin-left:750px;
margin-top:5px;
width:208px;
}

.home, .about, .products, .beforeafter, .contact {
display: block;
width: 208px;
height: 62px;
background: url(images/home.png) no-repeat 0 0;
}

.about {background: url(images/about.png) no-repeat 0 0;}

.products {background:url(images/products.png) no-repeat 0 0;}

.beforeafter {background:url(images/beforeafter.png) no-repeat 0 0;}

.contact {background:url(images/contact.png) no-repeat 0 0;}

.home:hover, .about:hover, .products:hover, .beforeafter:hover, .contact:hover{ background-position: 0 -62px;} .home a span, .about a span, .products a span, .beforeafter a span, .contact a span{ display: block; height:62px; width:208px}. The only problem is, how do I hide the text that you see in the top left corner of the button??

[Captainkewl]

My bad, I just figured it out. I just added
a {
display:block;
height:62px;
width:208px;
}
Which is what you were telling me to do in the first place. Thanks for the help guys!!