un-ordered list image and text alignment

[djbrink]

If I define a list to use an image like this:
UL {list-style-image: url(images/PCb.gif);
list-style-position: outside;
}
the text of the list is aligned with the bottom of the image, I want to align it with the middle or top of the image.

I tried this:
LI {vertical-align: top;}

but it does not work. can this be done?

Thank you

[SavoryMedia]

Duh... nevermind. I misread your question.

I agree with the guy below me...try adjusting the line height by a few pixels.

[BonRouge]

Maybe if you adjust the line-height...

[Fang]

place the image on the background, then use padding and image position to adjust the text position in relation to the image:li {
background: url(images/PCb.gif) no-repeat left center;
list-style: none;
padding:0 0 0 30px;
}

[djbrink]

Thanks Fang, this Background image method with padding is interesting, and it works.
Only one problem, the image (bullet) is always in the middle of a multi line list item and not at the top. this can become confusing where one LI end and the next begin for long LI's.

Hope you have a solution

[NogDog]

Instead of "center" for the vertical coordinate, try a fixed distance in em units (so it adjusts if the user increases/decreases their base font size). So it might be:

background: url(images/PCb.gif) no-repeat left 0.25em;

(Experiment with different values for the "0.25em" to find what looks good to you.)