CSS Image Sprites and PHP

sorry. The site is http://www.hillsdalesigmachi.org/news

When you rollover, all you get is blank images when the images should roll up to reveal the hover image.

Here is the CSS code that I use for the navigation on the rest of the site. (which works everywhere but on the WP page) This code is a bit different than some other sprite code, because the image starts at the top, and then rolls down. (most other code I’ve seen starts at the bottom and rolls up)

.nav_container {
	width: 875px;
	padding-top: 0px;
	margin-right: auto;
	margin-left: auto;
	float: none;
	position: relative;
	left: auto;
	right: auto;
	z-index: auto;
}

#navMenu{
	display: inline;
	padding: 0px;
	width: 700px;
	margin-right: auto;
	margin-left: auto;
	float: none;
	height: 45px;
	left: auto;
	right: auto;
	Z-index: auto;
}

#navMenu li{
	float: left;
	display: inline;
}

#navMenu li.first{
	float: left;
	display: inline;
	width:25px;
	height:40px;
	padding:0px;
	background-image: url("Images/LeftEnd.png");
}

#navMenu li.last{
	float: left;
	display: inline;
	width:25px;
	height:40px;
	background-image: url("Images/RightEnd.png");
}

#navMenu li.spacer{
	float: left;
	display: inline;
	width:165px;
	height:45px;
	background-image: url("Images/alphakappaseal.png");
}

a.navNews, a.navNews:active{
	display:block;
	float:left;
	width:110px;
	height:45px;
	background-repeat:no-repeat;
	background-image: url("Images/News.png");
}
a.navNews:hover{
	background-image: url("Images/News.png");
	background-position: 0 90px;
}
a.navNews:active{
	background-image: url("Images/News.png");
	background-position: 0 45px;
}

a.navRush, a.navRush:active{
	display:block;
	float:left;
	width:110px;
	height:45px;
	background-repeat:no-repeat;
	background-image: url("Images/Rush.png");
}
a.navRush:hover{
	background-image: url("Images/Rush.png");
	background-position: 0 90px;
}
a.navRush:active{
	background-image: url("Images/Rush.png");
	background-position: 0 45px;
}

a.navAlumni, a.navAlumni:active{
	display:block;
	float:left;
	width:110px;
	height:45px;
	background-repeat:no-repeat;
	background-image: url("Images/Alumni.png");
}
a.navAlumni:hover{
	background-image: url("Images/Alumni.png");
	background-position: 0 90px;
}
a.navAlumni:active{
	background-image: url("Images/Alumni.png");
	background-position: 0 45px;
}

a.navAbout, a.navAbout:active{
	display:block;
	float:left;
	width:110px;
	height:45px;
	background-repeat:no-repeat;
	background-image: url("Images/About.png");
}
a.navAbout:hover{
	background-image: url("Images/About.png");
	background-position: 0 90px;
}
a.navAbout:active{
	background-image: url("Images/About.png");
	background-position: 0 45px;
}

a.navLogin, a.navLogin:active{
	display:block;
	float:left;
	width:110px;
	height:45px;
	background-repeat:no-repeat;
	background-image: url("Images/Login.png");
}
a.navLogin:hover{
	background-image: url("Images/Login.png");
	background-position: 0 90px;
}
a.navLogin:active{
	background-image: url("Images/Login.png");
	background-position: 0 45px;
}

a.navDonate, a.navDonate:active{
	display:block;
	float:left;
	width:110px;
	height:45px;
	background-repeat:no-repeat;
	background-image: url("Images/Donate.png");
}
a.navDonate:hover{
	background-image: url("Images/Donate.png");
	background-position: 0 90px;
}
a.navDonate:active{
	background-image: url("Images/Donate.png");
	background-position: 0 45px;
}

This is absolutely bizarre.

I changed the values in the code where it moves the images from positive to negative, and they’re working now. Maybe there’s a bug in WP that caused it to be reading it backwards?