List-style-image alignment problem in IE6

[4midori]

Hi,

I'm using a standard method for creating bulleted nav lists on the left sidebar of this page:

http://weacbenefits.com

ul.leftNav { font-size:70%; list-style-image:url(./graphics/carrot.gif); padding:0; line-height:130%; margin:5px 0 0 14px;}

My "carrot" image has no padding, but in IE6 it doesn't align properly with the text that follows. Ideas?

Thx,

Ben

[Kravvitz]

The common solution to this is to use a background-image on the <li>s instead of list-style-image. You can use background-repeat:no-repeat and the background-position property to make it display how you want.

[4midori]

Yeah, I had that originally but this seemed easier. Is the list-style-image alignment a known issue with IE?

Thx.

[Kravvitz]

It's not a bug. This is just an implementation difference. The CSS2 specs don't specify how the image should be positioned.