PLEASE DELETE POST - I found the problem to be relating the correct CSS page back to my HTML.
I have a sprite I’m trying to get to work and when I view Firebug it’s completely ignoring the fact that I have a background-position: declaration in my CSS.
(I’m having issues with the “#as span” and the “#iso span”
I did some reading and all I could find was FireFox has issues with background-position-x & -y. This is not my case.
I also tried typing in background-position right into Firebug and it came up crossed out with an “Invalid Property Value”
I’m at a loss here…
<ul id="certsHeader">
<li id="ts"><a href="documents/certifications/ISO_TS16949.pdf" target="_blank"><span></span>TS16949 (ISO9001)</a></li>
<li id="as"><a href="documents/certifications/AS9100.pdf" target="_blank"><span></span>AS9100</a></li>
<li id="iso"><a href="documents/certifications/ISO14001.pdf" target="_blank"><span></span>ISO14001</a></li>
</ul>
#certsHeader{
float: left;
font-size: 11pt;
margin: 35px 0 0 125px;
color: #696969;
font-weight: 600;
font-style: italic;
position: relative;
}
#certsHeader li{
display: inline-block;
margin-left: 75px;
}
#certsHeader li a, #certsHeader li a:visited{color: #696969;}
#certsHeader li a:hover{color: blue;}
#ts span{
background-image: url('images/certIcons.png');
position: absolute;
top: 0;
left: 40px;
height: 18px;
width: 25px;
}
#as span{
background-image: url('images/certIcons.png');
background-position: -25px 0px;
height: 18px;
width: 16px;
position: absolute;
top: 0;
left: 270px;
}
#iso span{
background-position: -41px 0;
position: absolute;
top: 0;
left: 400px;
height: 18px;
width: 16px;
}