sorry I know sprites are covered quite a lot but I haven't been able to find an answer out there with my specific context.
I have 4 absolutely positioned buttons using the same .png file with 3 states (link,hover,active) for the 'home' button the hover works but the hover area is not the whole button, for the 'cars' button the hover is all of the button, but the other 2 buttons have no clickable or hoverable area.
Most articles dealing with this problem say to adjust the height/width, but all that does for me is move the image but not the text and doesn't change any of the hovering issues... not sure what else to try..
necessary style:
span.nav-button-adjust { display:block;
position:relative;
top:3px;
left:9px;
}
span.nav-button a:link,
span.nav-button a:visited { display:block;
width: 91px; height: 30px;
background-image: url(images/nav-button.png);
background-position: top;
background-repeat: no-repeat;
font-family:arial black;
text-decoration:none;
color:#1461b2;
}
span.nav-button a:hover { background-image: url(images/nav-button.png);
background-position: center;
}
span.nav-button a:active { background-image: url(images/nav-button.png);
background-position: bottom;
}
necessary html:
<span class="nav-button"><a href="home.php" style="position:absolute;left:420px;top:17px"><span class="nav-button-adjust"> HOME</span></a></span>
<span class="nav-button"><a href="about.php" style="position:absolute;left:522px;top:17px"><span class="nav-button-adjust"> ABOUT</span></a></span>
<span class="nav-button"><a href="cars.php" style="position:absolute;left:392px;top:59px"><span class="nav-button-adjust"> CARS</span></a></span>
<span class="nav-button"><a href="search.php" style="position:absolute;left:496px;top:59px"><span class="nav-button-adjust">SEARCH</span></a></span>
EDIT: per request:
the image I am using: https://dl.dropboxusercontent.com/u/12017360/cars/images/nav-button.png
You have too much going on with your CSS and especially your HTML. You can tidy up what you want to do with the following. You don't need to use absolute positioning.
In the following jsFiddle you'll notice that when you hover or click a link, a tiny sliver of another part of the background image pokes through. That has to do with how you made/setup your sprite.
Not sure if those links have to be 30px tall. If not you can fix them by setting #nav a { height: 29px; line-height: 29px; and adjusting the background-positions by 1px so they'd be 0 -1px, 0 -30px, 0 -59px. See second jsFiddle.
CSS
ul, li {
margin: 0;
padding: 0;
list-style: none;
font: 12px/1.5em Arial, sans-serif; /* this should be inherited */
}
#nav {
width: 202px; /* ( 5px + 91px + 5px ) x 2 */
}
#nav li {
float: left;
margin: 5px;
}
#nav a:link,
#nav a:visited {
display: block;
width: 91px;
height: 30px;
line-height: 30px; /* vertically centers text */
text-transform: uppercase;
color:#1461b2;
background: url(images/nav-button.png) no-repeat 0 0;
text-decoration: none;
text-align: center;
font-weight: bold;
}
#nav a:hover {
background-position: 0 -29px;
}
#nav a:active {
background-position: 0 -58px;
color: white;
}
.home,
.about {
position: relative;
left: 25%;
}
HTML
<ul id="nav">
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#">About</a></li>
<li><a href="#">Cars</a></li>
<li><a href="#">Search</a></li>
</ul>
That HTML is a lot tidier wouldn't you say?
Navigation should be placed in an un-ordered list <ul>. Please avoid inline styles like you have on your anchor <a> tags. The span tag is not need inside the anchor tag and you should not use to push things (text) around. If you need some space use margin and padding. That's what they're for!