CODEWITHSUNDEEP
htmlcss
Nicholas McDonough
Nicholas McDonough

Reputation: 23

Image Sprite Will Not Show

I can't seem to get the image sprite to display. Can someone look at the code and tell me if I have it correct? I have checked the code and can't seem to figure out what's wrong.

CSS

#nav-footer 
{ background:url(./_img//Footersprite.png) repeat-y;     
     width: 490px;
    height: 40px;
    margin: 0;
    padding: 0;
}

#nav-footer li, #nav-footer a {
    height: 40px;
    display: block;
}

#nav-footer li {
    float: left;
    list-style: none;
    display: inline;
}

#whyroofrepair a:hover { background:url("/_img/Footersprite.png") 0px -40px no-repeat; }
#savings a:hover { background:url("/_img/Footersprite.png") -98px -40px no-repeat; }
#enviromental a:hover { background:url("/_img/Footersprite.png") -229px -40px no-repeat; }
#advantage a:hover { background:url("/_img/Footersprite.png") -352px -40px no-repeat; }

#whyroofrepair { width: 55px; }
#savings { width: 55px; }
#enviromental { width: 55px; }
#advantage { width: 55px; }

HTML

<ul id="nav-footer">
<li id="whyroofrepair"><a href="/why-roof-repair.html">Why Repair</a></li>
<li id="savings"><a href="/savings.html">Savings</a></li>
<li id="environmental"><a href="/environmental-benefits.html">Environmental Benefits</a></li>
<li id="advantage"><a href="/roof-rx-advantage.html" class="advantage">Roof Rx Advantage</a></li>

Blockquote

http://jsfiddle.net/LQCm2/2/

I tested this using Js fiddle.

can some one take a look?

Upvotes: 0

Views: 73

Answers (2)

Nicholas McDonough
Nicholas McDonough

Reputation: 23

EmileKumfa - I added additional info. Please see original post

Upvotes: 0

EmileKumfa
EmileKumfa

Reputation: 414

First, change ./_img//Footersprite.png to ../_img/Footersprite.png

If that doesn't solve the problem then proceed below:

If your _img folder, containing the sprite:

  1. Live next to your css file, then your image path should be like _img/foo.jpg
  2. Live just outside your css file's parent folder, then your image path should be like ../_img/foo.jpg
  3. Live in the root of your project, then your image path should be like /_img/foo.jpg

Upvotes: 1

Related Questions