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>

[PeejAvery]

You can set the bounds and then hide the overflow.

display: block;
height: 16px;
overflow: hidden;

[Yovav]

Thanks for your help,

When I'm limiting the height it also limits the text of the List Item element
so for example - if it has 3 lines it will only show the first line (16 pixels high)

I'm trying to limit the list item image while showing more that one line of text on the list...

[olivthill]

I have searched, and I have found no solutions. There are not many options about background pictures. So, you could have several pictures instead of only one, or you could have a lot of spaces between each picture in your ListItemImage.gif file.

[Yovav]

Thanks for the reply,

I also thought about this option,

But I still wonder as I saw people using a one big image that includes all kind of images...

[PeejAvery]

I'm trying to limit the list item image while showing more that one line of text on the list...

So, you can apply my same method to just the image itself.

<div style="display: block; height: 16px; overflow: hidden;"><img src="image1.png" alt="" /></div>

[javajawa]

How about something along the lines of positioning the image in a sub element?

<div style="width: 16px; height: 16px; overflow: hidden;">
  <div style="position: absolute; top: -100px; left: -100px; background-image: url('');">&nbsp;</div>
</div>

That should show pixels (101, 101)-(117, 117).