Vertical Aligning List Images with CSS

[Fruit & Veg]

I'm using an image for a bulleted list with this code;

ul {list-style: disc url(tick.gif) inside;}

However the text and image aren't aligned properly. I've tried playing with the image but the fact is that I cannot get the image to sit below the line of the text. I tried adding 'vertical-align: middle' but that doesn't work.

Any ideas?

[LazyJim]

add some transparent pixels to the top or bottom of the image?

[Fruit & Veg]

Yeah, I tried adjusting the image but the problem is that the image can't be placed below the line of the text.

Anway, I solved it by not using lists, just using an image with the style="vertical-align: middle" in the <img src> tag.

Probably not the best method, but unless anyone has anything better I'll stick with it.

[LazyJim]

only one other idea, - if you can't move the bullet image down, move the list item text up!

on the <li>...
position: relative;
top: -10px;
left: 0px;

But some browsers put the list bullet inside the <li> and some outside, so probably best to do the positioning on a <span> inside the <li>