Re: CSS Sprites

[virtual]

There are several things. First delete the ul#menu li styling completely. Next you have set a height of 50px for ul#menu li a, so for your hover state -39px is not going to show your hover image, you need to lower it to the same height i.e. -50px and the active state needs to be -100px. You can’t style the hover and active states together as they are stacked 50px apart, so your css needs to read like this:

Code:

ul#menu {
list-style: none;
}

ul#menu li a {
text-indent: -9999px;
display: block;
height: 50px;
float: left;
background: url(images/menu-home.png; /*if you put the 3 states in one image you would still put it here*/
}

ul#menu li a.home {
background-position: 0 0; /*Here you define the position of the home a link*/
width: 100px;
}

ul#menu li a.home:hover {
background-position: 0 -50px; /*Here you define the position of the home hover state*/
}

ul#menu li a.home:active{
background-position: 0 -100px;
}

If you have all 3 states in one image along a line you will also have to change the x value of the background position e.g. the about menu:
ul#menu li a.about {
background-position: -100px 0; /*Here you define the position of the about a link so it does not sit on top of home*/
width: 100px;
}

ul#menu li a.about:hover {
background-position: -100 -50px;
}

It is much easier to do the maths if all your images are the same width.