Hi guys,

I've currently got a few images being displayed in a simple list, and want it so that if it's a link, it'll change the background location of that image, however I'm not having much luck.

Here's my current CSS code:
Code CSS:
.managers_icons li{
	background: url('../img/managers_info.png') no-repeat 0 -18px;
	float: left;
	margin: 0 5px;
	width: 18px;
	height: 18px;
 
}
.managers_icons li a{
	display: block;
	height: 18px;
	background-position: 0 0;
}
.e_info{background-position: 0 0;}
.e_notes{background-position: 0 -18px;}
.e_pdr{background-position: 0 -36px;}

For some reason the background position that's set where I initially define the background image (.managers_icons li) works just fine, and any changes made there is reflectec accordingly.

Anything after that just doesn't change the background image at all, which is really odd. I know it's taking the other attributes on fine because for example if I change .managers info li a to have 5px padding, it's added to any listed element that's linked. Likewise the bottom ones where it's defined seperately, adding padding for example is fine, but the background image won't change.

fwiw, here's my HTML code too:
Code HTML4Strict:
		<ul class="managers_icons">
			<li class="e_info"><a href="#">Employee Information</a></li>
			<li class="e_notes">Employee Notes</li>
			<li class="e_pdr">Employee e-PDR Information</li>
		</ul>

And finally, the image:


And help would be ace, thanks.