CSS ul li image to align with text

Question

Hi,

I have a CSS like this

ul {
    list-style-image:url(images/bulletArrow.gif);
}

ul li {
    background: url(images/hr.gif) no-repeat left bottom;
    padding: 5px 0 7px 0;
}

But the bullet image doesn't align properly in IE (it's fine in Firefox). I already have a background image for li, so I can't use the bullet image as a background. Is there any solution to this?

Thanks in advance.

Answer 1

There is a good explanation and solution of this here: http://css.maxdesign.com.au/listutorial/master.htm

It says that using list-style-image results in inconsistent placement of the image with different browsers. Then it explains how to use background images for the bullets for a better result.

Answer 2

I see you're removing left padding for list items. For IE, you need to do the same with the left margin - either completely remove it (set to zero) or make it something smaller than the default. Then your list items will align nicely.

Answer 3

Thank you both of you. The problem is that I already use background for a line-separator. But I'll change it to border then I'll use background for the bullet image.

Answer 4

use line-height :)