Need help with CSS Sprite

HTML & CSS
1

On my test site ( http://update.bharstore.com/) I added an icon to my nav bar and make the icon a sprite so when I hover over the icon / word cart the icon turns red. but I can’t get it to stop going above the nav bar it’s kinda like it’s jumpping.

here is the css


.cart64{
   background: url(../image/cart32.png) no-repeat;
   overflow: hidden;
   width: 15px;
   height: 16px;
   }

.cart64{
   background-position: -0px 13px ;

}
.cart64:hover{
   background-position: -0px -16px ;

}

and here is the image it’s 16 x 32
[http://update.bharstore.com/catalog/vie … cart32.png](http://update.bharstore.com/catalog/vie … cart32.png)

2

Yeah, you haven’t really gone about this the right way. Firstly, you want to keep everthing within the one <a>, not have separate ones. Place some right padding on the cart link and add the cart image as a background image. Shift its position on :hover.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

ul {margin:0;padding:0; list-style: none;}
li {float: left; padding: 6px 5px 5px 0px;}
a {display: block; padding-right: 20px; background: url(http://update.bharstore.com/catalog/view/theme/default/image/cart32.png) 100% 0 no-repeat; line-height: 16px; color: black; text-decoration: none; font-size: 16px;}
a:hover {background-position: 100% 100%; color: red;}

</style>
</head>
<body>

<ul>
	<li>
		<a href="http://update.bharstore.com/index.php?route=checkout/cart">Cart</a>
	</li>
</ul>

</body>
</html>

It’s best to have the elements within the sprite image further apart, as there’s very little margin for error at the moment. One pixel off and the other part of the image is liable to show.