Using CSS Sprites on anchor tags

Question

I'm looking for some CSS guru advice on best structure. I'm implementing sprites instead of icons on a horizontal 'list'. Current html is like :

<a href="link"><img src="icon" /></a><a href="link_b"><img src="icon"/></a>

etc.

So I replace with a sprite. I'm using

<a href="link" class="sprite_img_a"></a><a href="link_b" class="sprite_img_b"></a>

but to do this I give the tag inline-block and width. I've never liked inline-block and it seems clunky.

Are there better options ? (nested span, div wrapper ?)

Answer 1

@karishma: inline-block is a good option but if don't want it so, you can use the CSS below.

a.sprite_img_a{
  background:url('image.jpg') no-repeat 0 0 ;
  float:left;
  display:block;
  width:30px;
  height:30px;
}
a.sprite_img_a:hover{
  background-position:-20px 10px ;
}

It's good to use icon image in background because 1) it saves markup space & 2) it's good for SEO purposes to avoid unwanted images caches by Google.