I've been updating my website by replacing most inline images with sprites.
Here's a basic CSS code snippet for the sprite class:
.sprite{
background-image:url(...);
background-position:...;
width: 16px;
height:16px;
}
After learning that nesting a div inside an anchor tag is not recommended, I attempted to use sprites with span elements instead.
<a><span class="sprite"></span></a>
Unfortunately, the span elements did not expand as expected based on the width and height properties set. I considered adding a blank gif image into the span element for expansion, but this would contradict the purpose of using sprites (to minimize http requests).
It's important to note that using div elements within an anchor tag is incorrect.
So, how can sprites be effectively incorporated within an anchor element?
The issue of aligning the div also arises. If an image is centered within another element, what is the best approach to replace it with a sprite?