Using CSS Sprites for UL List Bullets?

[herhubby]

I'm something of a novice when it comes to CSS, but I'm trying to make my site more efficient by combining multiple images into a single image (AKA CSS Sprites). So far this has worked well, but I ran into a hurdle today I haven't been able to solve.

Let's say I'm doing something like this (typing in from memory):

ul.mylist {
list-style-type: none;
padding: 0px 0px 0px 15px;
margin: 0px 0px 0px 0px;
}

li.mylist {
background: url(graphics/banner.png) no-repeat -34px -60px;
height: 20px;
width: 20px;
}


<ul class="mylist">
<li>blah</li>
<li>blah</li>
</ul>

This isolates my bullet image from the main graphic, and displays it on the list. However, I can't figure out how to change the position of the bullet sprite to better align with the text. If I use background-position: it changes the area of my main image that is clipped out, rather than positioning the bullet I've defined.

For now I've worked around the problem by avoiding a UL list altogether and working with nested DIV's for each item. But, it would be nice to figure out how to position a CSS sprite as a bullet in a UL list. Is this possible?

Thanks,

Anthony

[herhubby]

I never received a reply to my question, but found a way to work around the problem.

Since I needed to use "background-position:" to select the desired portion of my main image, I couldn't find a way to adjust the position of the clipped image in a UL list. So, I simply shifted the sprite in my main image instead. It's still referenced from the top in the UL list, but by moving the sprite up or down in the main image, I could adjust the vertical position next to text in my UL list.

For lack of a better method, it works for me...

Anthony