CODEWITHSUNDEEP
htmlcsscss-sprites
Ben Jackson
Ben Jackson

Reputation: 1537

CSS Sprite only showing final image

I have a sprite sheet and I want to display images next to each other but the code is only displaying the final image. So this code displays only the google image but it does display it correctly (with a:hover) but it doesn't display the facebook or twitter images.

I know the co-ordinates are correct and if I comment out the google <li> when I refresh the page only the facebook image shows. I can not figure out what is wrong with it but wondered if it had something to do with the display property?

EDIT: Here is a live example of what's happening: http://jsfiddle.net/Duykb/

<div class="social"><h3>SHARE THIS PAGE</h3>
     <ul id="social">
         <li class="facebook">
             <a href="#" title="Facebook"></a></li>
         <li class="twitter">
             <a href="#" title="Twitter"></a></li>
         <li class="google">
             <a href="#" title="Google+"></a></li> 
    </ul>
 </div>

CSS:

h3 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px; }

#social {
margin-top: 10px;   
display: block;
position:relative;
padding-top: 30px; }        

#social li {
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0; }

#social li, #social a {
height:37px;
display:block; }


ul#social li.facebook a {
background: url('images/social_icons.png') no-repeat -5px -4px;
width: 37px;
height: 37px; }

ul#social li.facebook a:hover {
background: url('images/social_icons.png') no-repeat -5px -42px;
width: 37px;
height: 37px; }

ul#social li.twitter a {
background: url('images/social_icons.png') no-repeat -45px -4px;
width: 37px;
height: 37px; }

ul#social li.twitter a:hover {
background: url('images/social_icons.png') no-repeat -45px -42px;
width: 37px;
height: 37px; }

ul#social li.google a {
background: url('images/social_icons.png') no-repeat -82px -4px;
width: 37px;
height: 37px; }

ul#social li.google a:hover {
background: url('images/social_icons.png') no-repeat -82px -42px;
width: 37px;
height: 37px; }

Upvotes: 2

Views: 329

Answers (2)

Funktr0n
Funktr0n

Reputation: 1838

I think your <li>'s are all sitting on top of one another due to their absolute positioning. Therefore, you're dealing with a layering issue.

If you'd like them all positioned next to each other, try setting a width to each of the block elements and give them an absolute position using the left: or right: properties.

EDIT:

Change the #social li rule to...

    #social li {
    margin:0;
    padding:0;
    list-style:none;
    width: 37px;
    float:left;
}

http://jsfiddle.net/Duykb/2/

Upvotes: 1

Sparky
Sparky

Reputation: 98738

http://jsfiddle.net/Duykb/1/

Removed position: absolute and top: 0 from #social li, and then added...

#social li {
    float: left;
    width: 37px;
}

Then make necessary adjustments to #social for proper position on page.

Upvotes: 0

Related Questions