11

I am having a problem, for a while I have been trying to figure out how to resolve this issue. I will describe it very well below...

I am trying to use an image as a sprite image for an UL list. It should show an icon with text next to it, both the icon and the text should link to somewhere.

My first example look how I want it to be. When the font-size is set to 10px it looks ok... sprite ok

As soon as I change the font-size from 10px to 16px...

sprite not ok

Here is the CSS and HTML

CSS

#post-meta-wrapper{
    list-style: none;
    margin:20px 0 20px 20px;
    width:400px;
}

#post-meta-wrapper li {
    width:100%;
    color: #44495B;
    border-top: 1px dotted #CCC;
    color: #999;
    font-size: 10px;
    line-height: 28px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    text-indent: 0px;
}
#post-meta-wrapper li a{
    background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -183px;
    padding-left:15px;
}

#post-meta-wrapper .meta-img {
    background:#fff;
    width: 15px;
    height: 10px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 8px;
    overflow: hidden;
}

#post-meta-wrapper a:hover,
#post-meta-wrapper .active{
    background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -195px;
    width: 15px;
    height: 10px;
}

The HTML

<ul id="post-meta-wrapper">
    <li class="author">
        <a href="#"><span class="meta-img">Test link</a>
    </li>
    <li class="author">
        <a href="#" class="active"><span class="meta-img">Test link</a>
    </li>
    <li class="author">
        <a href="#"><span class="meta-img">Test link</a>
    </li>
    <li class="author">
        <a href="#"><span class="meta-img">Test link</a>
    </li>
    <li class="author">
        <a href="#"><span class="meta-img">Test link</a>
    </li>
    <li class="author">
        <a href="#"><span class="meta-img">Test link</a>
    </li>
   
</ul>

JSFiddle Examples

This is the first one with the font-size: 10px http://jsfiddle.net/jasondavis/Mt87G/4/

This is the MESSED UP one with the font-size: 16px http://jsfiddle.net/jasondavis/Mt87G/5/

Help me?

Ok I know I could just change the sprite image to have huge spaces around each object in the image and then you wouldn't notice this problem, but I would really like to resolve this issue the right way. I mean is it possible to do what I am trying to do with just CSS or does the image need to be spaced out? I have seen other sprite images where they are together close like mine and I have seen some where everything is like 100px apart.

Please help me if you know how to resolve this, I have tried eveything I can think of without any luck yet. I need to do this on a mass scale so I would like to get it done correctly now before I do that. Thank you for any help

2
  • 4
    Is there a reason that you are not closing the span tags? Nov 17, 2011 at 14:20
  • Closer the better I'd say, smaller file size etc.
    – 472084
    Nov 17, 2011 at 14:22

6 Answers 6

3

I would suggest using the :before pseudo element. Add the class to your anchor link or the list item and style the pseduo element to hold the sprite image. This gives the same effect as being able to set a specific size on a span, without the need of extra markup.

<li class="icon">
    <a href="#">Test Link<a/>
<li>

.icon:before{
    content: '';
    width: 10px;
    height: 10px;
    display: block;
    background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -183px;
    /* other css for positioning */
}

If you want the icon to be part of the link, the before should to be on the anchor. It will be underlined if the anchor is underlined.

If you put it on the li, the link can still be underlined without the icon being underlined, but to make it clickable you need to work some magic with padding on the anchors.

Note: As mentioned by jimplode, this will not work in IE <= 7 So if you need it to work there (sad for you) better to use the extra markup.

2
  1. Close the span
  2. Set width, height, float and margin-top of this span to align with base of line height

Try this: http://jsfiddle.net/Mt87G/19/

CSS

#first a{
     font-size: 10px;
     padding-left: 5px;
     line-height: 12px;
}
#second a{
    font-size: 22px;
    line-height: 25px;
    padding-left: 5px; 
}
.meta-img{
    background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -183px;
    width: 13px;
    height: 12px;
    float: left;
}
#first .meta-img{
    margin-top: 4px
}
#second .meta-img{
    margin-top: 7px
}

HTML

<p id="first">
    <a href="#">
        <span class="meta-img"></span>Test link
    </a>  
</p>    

<p id="second">
    <a href="#">
        <span class="meta-img"></span>Test link
    </a> 
</p>
2

I think you can give more spaces between the images. If you have individual images then you can use http://spritegen.website-performance.org/ to create sprite images and you can provide custom space between sprite images.

If you are changing the font-size dynamically then also you can use the sprite with more space and can only change the background-position.

2

Well written question! I simplified your two sample fiddles into one fiddle:

http://jsfiddle.net/Mt87G/6/

It seems in the 16px-variant the image is just showing a bit more as the line-height becomes bigger because of the larger font size.

Edited: apparently SO uses sprites as well, see for example this image. If I use firebug to increase the line-height for the "vote-up" button for example, at some point the next sprite starts showing up.

So, if you would follow their lead, it seems you could:

  • set a fixed height on your element
  • leave some space between sprites, just to be sure

Strict answer though to your question then seems "no, not necessary".

1

As you have your background image on an anchor, you could always put a span inside the anchor for the image, this way you can control the width and height of the span which in turn will only show the portion of the image you want it to use.

3
  • +1 This is far more flexible in the long run and allows for grid layout vs vertical (50+ icons = one long vertical sprite file). The downside is the extra markup. Jquery uses this technique for it's UI button icons.
    – Syri
    Nov 17, 2011 at 14:52
  • Using a span has the downside of extra markup. Using a pseudo element gives this same effect without the cruft. Nov 17, 2011 at 20:21
  • Has the upside of working in all browsers though, unlike the pseudo element.
    – jimplode
    Nov 21, 2011 at 10:32
1

I generally leave a few pixels in between sprites due to rounding errors that I've seen on mobile Safari. If there is just 1 pixel in between the sprites, sometimes there is a hair-width sliver of the next sprite over at the edge of the element. Adding a little more buffer room avoids this problem. If you are using PNG files, there isn't really much additional file size (extremely small increase) with more spacing due to the way they compress.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.