Question

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…

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

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

Answer 1

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>