Having a hard time with CSS Sprites!!! Any Much Needed Help Appreciated

@Jerrell_BAug 07.2012

I am attempting to place sprites in front of its corresponding anchor/link tag(s) however the sprite(s) are not appearing. I’m not sure what I am doing wrong but any help and explanation is appreciated. I have attached the sprites.gif. Thank You.

HTML code:

[code] <ul class=”postmetadata clearfix”> <li><a class=”post-comment” href=”#” title=”post-comment”>Post a Comment</a</li> | <li><a class=”email” href=”#” title=”email”>E-mail</a></li> | <li><a class=”print” href=”#” title=”print”>Print</a></li> | <li><a class=”share” href=”#” title=”share”>Share</a></li> | <li><a class=”large-type” href=”#” title=”large-type”>Large type</a> </li> </ul>

[/code]

CSS code:

[code] ul.postmetadata li{ list-style-type: none; font-size: 12px; }

ul.postmetadata li a { background: url(‘img/sprites.gif’)top left; background-repeat: no-repeat; display: block; }

li a.post-comment{ background-position: 0 -624px; height: 12px; width: 11px; }

[/code]

to post a comment

CSS

6 Comments(s) _↴

@bionoidAug 07.2012 — #A few corrections/additions:

[CODE]ul.postmetadata li{
 list-style-type: none;
 font-size: 12px;
 }
 
 ul.postmetadata li a {
 background-image: url(img/sprites.gif);
 background-repeat: no-repeat;
 padding-left: 16px;
 height: 20px;
 display: block;
 }
 
 li a.post-comment{
 background-position: 0 -624px;
 }
 
 li a.email{
 background-position: 0 -847px;
 }[/CODE]

[CODE]<ul class="postmetadata clearfix">
 <li><a class="post-comment" href="#" title="post-comment">Post a Comment</a></li> |
 <li><a class="email" href="#" title="email">E-mail</a></li> |
 <li><a class="print" href="#" title="print">Print</a></li> |
 <li><a class="share" href="#" title="share">Share</a></li> |
 <li><a class="large-type" href="#" title="large-type">Large type</a>  </li>
 </ul>[/CODE]

@Jerrell_BauthorAug 07.2012 — #Hi bionoid,

Thank you for your help. The sprites are still not appearing next to the corresponding links. I have since removed many of the sprites since I did not need all of them. The new sprite has been attached.

I tried your revised code but unfortunately the sprites are still not showing. I am using HTML 5 Boiler Template starter template not sure if that has to do with the icons not appearing?

Here is my current code in attempts to get this working. Any suggestions are welcome and appreciated. Thanks again!

html code

<i>
 </i>&lt;ul class="postmetadata clearfix"&gt;
 &lt;li&gt;&lt;a class="post-comment" href="#" title="post-comment"&gt;Post a Comment&lt;/a&gt;&lt;/li&gt; |
 &lt;li&gt;&lt;a class="email" href="#" title="email"&gt;E-mail&lt;/a&gt;&lt;/li&gt; |
 &lt;li&gt;&lt;a class="print" href="#" title="print"&gt;Print&lt;/a&gt;&lt;/li&gt; | 
 &lt;li&gt;&lt;a class="share" href="#" title="share"&gt;Share&lt;/a&gt;&lt;/li&gt; |
 &lt;li&gt;&lt;a class="large-type" href="#" title="large-type"&gt;Large type&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;

css code

<i>
 </i>ul.postmetadata li{
 list-style-type: none;
 font-size: 12px; 
 }
 
 ul.postmetadata li a {
 background: url("img/sprites.png") no-repeat top left;
 padding-left: 16px;
 padding-right: 5px;
 text-decoration: none;
 color: #202020;
 font-size: 12px;
 font-family: sans-serif, Arial,"MS Trebuchet";
 }
 
 li a.post-comment{background-position: 0px 0px;
 width: 13px; height: 13px;			  <br/>
 } 
 
 li a.email{background-position: 0px -63px;
 width: 13px; height: 13px;
 }
 
 li a.print{background-position: 0px -126px;
 width: 13px; height: 13px;
 }
 
 li a.share{background-position: 0px -189px;
 width: 13px; height: 13px;
 }
 
 li a.large-type{background-position: 0px -252px;
 width: 13px; height: 13px;
 }

@bionoidAug 07.2012 — #Assuming your image is in the right place, this code works in FF, IE and Chrome using the new sprite image:

[CODE]<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8" />
 <title>CSS Sprite</title>
 
   <style type="text/css">
 
   ul.postmetadata li{
   list-style-type: none;
   font-size: 12px;
   }
 
   ul.postmetadata li a {
   background-image: url(img/sprites.png);
   background-repeat: no-repeat;
   padding-left: 16px;
   padding-right: 5px;
   text-decoration: none;
   color: #202020;
   font-size: 12px;
   font-family: sans-serif,Arial,"MS Trebuchet";
   }
 
   li a.post-comment{
   background-position: 0 0px;
   /*width: 13px; height: 13px;*/
   }
 
   li a.email{
   background-position: 0 -63px;
   /*width: 13px; height: 13px;*/
   }
 
   li a.print{
   background-position: 0 -126px;
   /*width: 13px; height: 13px;*/
   }
 
   li a.share{
   background-position: 0 -189px;
   /*width: 13px; height: 13px;*/
   }
 
   li a.large-type{
   background-position: 0 -252px;
   /*width: 13px; height: 13px;*/
   }
 
   </style>
 
  </head>
  <body>
 
   <ul class="postmetadata clearfix">
   <li><a class="post-comment" href="#" title="post-comment">Post a Comment</a></li> |
   <li><a class="email" href="#" title="email">E-mail</a></li> |
   <li><a class="print" href="#" title="print">Print</a></li> |
   <li><a class="share" href="#" title="share">Share</a></li> |
   <li><a class="large-type" href="#" title="large-type">Large type</a></li>
   </ul>
 
  </body>
 </html>[/CODE]

@Jerrell_BauthorAug 07.2012 — #You were right I was not locating the sprites.png correctly it works when i do ('../img/sprites.png').

However only the first sprite icon is appearing next to all the links... how can place the sprite / link correspondingly ?

Thanks.

@bionoidAug 07.2012 — #Please go through the post I previously submitted #4, and compare the css styles to yours.

I had the sprites being displaying correctly for each link.

@Jerrell_BauthorAug 07.2012 — #IT IS WORKING PERFECTLY!!! Thanks for all your help Bionoid!

Also in #CSS _↴

Div Display Error, Firefox/Safara vs IE; Help pls!Newbie Here CSS in Dreamweaver

Success!

Help @Jerrell_B spread the word by sharing this article on Twitter...

Tweet This

Having a hard time with CSS Sprites!!! Any Much Needed Help Appreciated

6 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Having a hard time with CSS Sprites!!! Any Much Needed Help Appreciated

6 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #CSS _↴