Bullet image will not align with list text

What can I do?

[crobb305]

My bullets appear to be a few pixels higher than the middle of the text. Of course, I want them to be middle aligned exactly with the text. I can find nothing that will help me accomplish this.

Any suggestions?

Thanks

[tootseywootsey]

Are you using the default bullets or a custom image? I would guess that your line height is taller than your text, and the bullet is centered in that, making it seem too high for the text. If it is a custom image, then just adjust it by adding more space at the top and moving the image down - you might have to shrink it to get it to position correctly. Hope that sparks an idea...

[tootseywootsey]

oh yeah, to fix it, don't use line height to put space between your lines of list items, use some padding.

[LunaC]

Are you using the image as a bullet or a background?

The best workaround for browsers not quite agreeing on bullet positioning I've found is something like:

ul li
{
list-style: none;
background: url(image.png) no-repeat center left;
}

That works most of the time and the bullet stays in place on text resizing.

[edited by: LunaC at 9:09 pm (utc) on Jan. 28, 2007]

[Benek]

I've had to resort to making the bullet a bg image many times as well. It gives you much more control. You'll also want to add something like:

li {
padding-left: 10px
}

to give that bullet some space ;)