Problem getting list styles with large image bullets to work

[smithaa02]

To fancy up a list I'm working on, I've used a background image for <li> bullet:

li {
list-style-image: url(images/custombulletimage.jpg);
}

The one problem I have with this is that the image I'm using is relatively large (at about 40px high). What happens then is that the bottom of the custom bullet image lines up with the bottom of the first line of text, when I want it the top of the custom bullet image to line up with the top of the first line of text. So both Firefox and IE put what appears to be a margin at the top of my text to accommodate the oversized bullet point. So it looks a stair step going down from the image to the text to the right of the image, when what I'm looking for is a nice smooth ceiling for aesthetic reasons.

Does anybody know of a way to fix this?

[Robin_reala]

Yep, don't use list-style-image :) Unfortunately there's no easy way to get stuff aligning correctly cross-browser with it, so the easiest fix is to pad in the li a bit and use a background image:

li {
list-style: none;
padding-left: 10px;
background: url(my_li_marker.png) no-repeat 0 0;
}

[edited by: Robin_reala at 10:04 am (utc) on May 20, 2007]