Question

I am replacing most inline images on my sites with a sprite.

The sprite class would contain some basic css:

.sprite{
background-image:url(...);
background-position:...;
width: 16px;
height:16px;
}

I saw that nesting div inside of an anchor tag is not a good idea.

<a><div class="sprite"></div></a>

I’ve tried to add sprites to span elements instead.

<a><span class="sprite"></span></a>

But the span elements do not expand to the width and height that I set.
It would be really useful to be able to use span elements to replace image tags with a sprite.
I could add a blank gif image into the span element to expand it. But that would defeat the reason why I want to use sprites (to reduce the number of http requests).

Using div elements inside an anchor tag is not correct.

So how can I use sprites inside an anchor element?

And there also is always the problem of aligning the div. If an image is centered in another element, how do I replace it with a sprite?

Answer 1

You need to declare display: block; on your span elements which are by default inline elements. Something like:

.sprite{
    display: block;
    background-image:url(...);
    background-position:...;
    width: 16px;
    height:16px;
}

That should make the span elements expand to your desired width/height.

Hope this helps !