How 2 clip an area of an image on the fly ?

[Yovav]

Dear all.

I've created a custom style for list items that uses an image:
http://Yovav.com/Temp/ListItemImages.gif

The problem is that when the list item is higher than 16 pixels the next image shows up (while it should be white)

See the problem in this example:
http://Yovav.com/Temp/ListItemImageProblem.gif


I would like to be able to clip just the area I need for the image

How can I do that ?



This is the style I'm using:

.CustomUL LI
{
background:url("../Images/Controls/ListItem/ListItemImages.gif") no-repeat 0px0px;
list-style-type:none; /* circle */
line-height:16px;
margin-top:7px;
margin-bottom:7px;
padding-left:22px;
}


.CustomUL LI.SignVGray {background-position:0px-80px;}
.CustomUL LI.SignVBlack {background-position:0px-96px;}
.CustomUL LI.SignVRed {background-position:0px-112px;}
.CustomUL LI.SignVGreen {background-position:0px-128px;}
.CustomUL LI.SignVBlue {background-position:0px-144px;}


And in the HTML:

<ul class="CustomUL">
<li class="SignArrowBlack">Test1</li>
<li class="SignArrowBlack">Test1</li>
<li class="SignArrowBlack">Test1</li>
</ul>