CSS Sprite Issues

My hair is now all gone! Can someone explain what I am doing wrong here?

My sprites aren't cooperating with me for some reason.

Thanks in advance!
LMW1

Remove the background from the ul and then apply it to the anchors, like
#mainNav li a{
background:url(/images/navigation_main.png);
}
After that set the backgrouns positions specifically to each anchors, for the normal as well as hover states, like
#mainNav #navBio a{
background-position:-143px -2px;
}
#mainNav #navBio a:hover{
background-position:-143px -120px;
}
(..and for the other anchors too)

Hmm? It's still a little wacky. And I somehow lost the "Contact" button.

Any more ideas?

I appreciate your help!

Respectfully,
LMW1

You need to remove the text-indent from the <li>s first and position the anchors in the desired locations (make sure that there's enough space among them to contain the width of the circle image). Then apply the sprites and adjust them to come well aligned with the text. Then finally bring the text-indent.

Your advice worked perfectly! Thank you sir!

Respectfully,
LMW1