Question

I have a few css sprites for a rating system: https://i.stack.imgur.com/7ZmSz.png

When loading the thumbs

 .thumb-down {
    background: url('https://i.stack.imgur.com/7ZmSz.png') no-repeat -126px -13px;
    width: 15px;
    height: 16px;
 }

 .thumb-up {
    background: url('https://i.stack.imgur.com/7ZmSz.png') no-repeat -126px -33px;
    width: 15px;
    height: 16px;
 }

The only way I can get the thumbs to show up is if I do this:

Was this review helpful? <a href="#" class="thumb-up rating">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a> | <a href="#" class="thumb-down rating">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>

If I remove all the   then the thumbs disappear. If I leave only one   then it shows a partial view of the sprite.

How can I display the sprite without the need of  ?

Answer 1

by using float:left:

 .thumb-down {
    background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -13px;
    width: 15px;
    height: 16px;
    float: left;  /* OR float:right, depending on what you need */
 }

 .thumb-up {
    background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -33px;
    width: 15px;
    height: 16px;
    float: left;
 }