sprite problem with image link

Question

how to use sprite with image links. when i try to use as below link lost

<a target="_blank" rel="nofollow" title="link1" href="http://www.yahoo.com"&gt;
    <div id="yahoo1" class="logosprite"></div>
 </a>

css:

#yahoo1.logosprite {
background-position:0 0;
height:16px;
width:16px;
}

can anyone suggest better solution ?

Answer 1

a elements cannot contain div elements.

Just set the background image on the a itself.

Answer 2

That's not valid markup.

Simply apply the CSS to the anchor and add the following css property so that it is the right size:

display: block;