How to use css sprites in this kind of menu?

I've been trying to use css sprites in this MENU intead of simple icons for each menu item without any luck because it need a 16px widht setted. But if i do that the whole thing get messed (the li specificaly).

The image sprite is located HERE but i dont know wnought css to make it work by myself, i've been trying without luck and without affect the current functionality. (the li ul need to have a widht of auto to get the parent widht and auto adjust to the spans).

Please i need help with this :(.

SOLUTION: CSS

.nav li a{

line-height: 16px; /* new position */
position: relative; /* new position */
padding-left: 24px; /* new position */

}

.iconized i{
background: url("images/icons/menu.png") no-repeat scroll transparent;
display: inline-block;
height: 16px;
vertical-align: middle;
width: 1开发者_开发百科6px;
margin-right: 3px;

position: absolute;  /* new position */
left: 5px;/* new position */
}

.iconized li .user{
background-position: -2px -2px;
}

SOLUTION: HTML

<ul class="nav iconized left">
    <li><a href="#"><i class="user"></i><span>Profile</span></a></li>
</ul>

An image sprite is just an image that is only partially displayed. This is achieved by creating an element (usually a div, but can be other element as well). You give the element a fixed width and height (16px in your case). Then you use the background css property to put a part of the image in the background of the element. By setting the background-position css property, you can define which part of the image is displayed, by specifying the coordinates of the background image pixel that should be in the left top corner of your element.

So in you css you write something like this:

.icon {
    background-image: url('yoursprite.png');
    width: 16px;
    height: 16px;
}

.icon.i1 {
    background-position: 0 0; /* Second image on the first row */
}
.icon.i2 {
    background-position: 0, -16px; /* Second image on the first row */
}
/* Etc */

And in your HTML you write this:

<div class="icon i1"></div>
<div class="icon i2"></div>
<div class="icon i3"></div>
<div class="icon i4"></div>

This way, each div will display a different part of the image in its background.