SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background position not working in FireFox

    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...

    HTML Code:
    	<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>
    Code:
    	#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;
    		}

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Do you have a link to the page as that code seems to be working? If the site's not live then perhaps attach the sprite so we can see what we are dealing with.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •