css image rollover not working - css

Question

I have a css image rollover that is supposed to display a couple of buttons. It uses one image for 'normal' mode, one for 'hover' mode and one for 'active' mode. The three images are part of one large image file. I have implemented this method before on a different project and it worked fine, but for this project I cant seem to get the rollover effect working. My code is below:
<div class="homealertbox"><h1 class="homealert">The Worlds Best Marketplace For Buying & Selling Websites</h1>
<div class="addbuttons">
<span class="displace">Buy</span>
<span class="displace">Sell</span>
</div>
My CSS is below:
a.buy {
display: block;
width: 160px;
height: 40px;
float:left;
background:url('http://localhost/img/buy.png');
background-position: 0 0;
}
a.buy:hover {
background:url('http://localhost/img/buy.png');
background-position:0 -40px;
}
a.buy:active {
background:url('http://localhost/img/buy.png');
background-position:0 -80px;
}
.displace {
position: absolute;
left: -5000px;
}
a.sell {
display: block;
width: 160px;
height: 40px;
background: url('http://localhost/img/sell.png') 0 0 no-repeat;
float:right;
}
a.sell:hover {
background: url('http://localhost/img/sell.png') 0 -40px no-repeat;
}
a.sell:active {
background: url('http://localhost/img/sell.png') 0 -80px no-repeat;
}
I think the problem is to do with the nested div tags but I am not fully sure. Can somebody help please? Also, I apologize in advance if the code isnt formatted properly in this post.

Answer 1

Your code worked for me. The only this I changed to test in my local machine was the URL of CSS image backgrounds. I created 2 images with 2 button backgrounds each and saved each as sell.png and buy.png.. I changed the localhost/... background path in CSS to where I had saved them.
Check if your image path / url is correct and your images has the correct button backgrounds in correct locations. These are my images. My Buy image
Working Demo