CSS: Problem with getting part of my sprite to use on a ul.

[benjamin.morgan]

http://img836.imageshack.us/img836/1040/sprites.gif is the link to my sprite. I am trying to get the 3rd one down to appear on an unordered list instead of bullets. Can someone please go through the steps? I have done it before but it has been so long and anything i do seems to screw it up. I've tried looking in several books and online tutorials also.

<ul>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ul>

what could the css be to get this to work?

 

[benjamin.morgan]

anyone?

 

[PixelPusher]

Well typically I would use the css property:

ul li {
list-style-image: url()
list-style-position: inside;
}

But the position property does not provide enough control for working with an image sprite (unfortunately).

In your case i would apply either a text indent or left padding value and add the image as a background element to the each list item. Like so:

ul li {
   background:url(http://img836.imageshack.us/img836/1040/sprites.gif) 0 -200px no-repeat;
   display:inline-block;
   list-style:none;
   padding-left:20px;
   margin:2px 0;
}

<ul>
<li>Line one</li>
<li>Line two</li>
<li>Line three</li>
</ul>