More Zen and CSS

Question

I am still trying to get sprites to work right, and continue to be confused, since I can't seem to find an example matching what I want. Basically I have a series of 16x16 icons that need to go in row. I don't seem to be able to find the right element to use and set the background image on.

I have tried divs, and they work in block mode, but not inline mode. I have tried span, a, li and many others. All these set in display:inline don't allow me to set the element width, and so I get a few pixels of background image only. If I put in a few nbsp it will work, but that hardly seems to me to be the right solution.

Can anyone point me to a URL that has a little series of icons in a line that use sprites for their background images? Preferably elements that I can do :hover on?

Thanks for your help.

Answer 1

Stackoverflow uses this technique. If you right click on the upvote/downvote arrows, and click view background image (in Firefox) you will be taken to the sprites image. From looking at the source code, they are using spans. You should be able to set the width and height of the span with CSS.

If you want, you can use to use

display: block; float: left;

and the elements will line up as if they are inline. You can then set the height and width with CSS as well.

Answer 2

If you have to use display:inline then you have to put your elements inside a container. A common example is this:

<ul>
    <li><a></a></li>
    <li><a></a></li>
</ul>

Set the li elements to display:inline and the a elements to display:block. Then you can add a width to the a elements along with the sprite and the li elements force the a elements to sit horizontally.

You can find a tutorial using this method here.