How to make cross browser compatible list with list-style image properly?

Question

I need to make design like this,

to make this possible i used dotted line as background of li and + icon as a list-style-image. but it's not looking same in all browsers.

<ul>
   <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
   <li>item 4</li>
   <li class="last">item 5</li>
</ul>

IE7 and 6 it's looking like this

Answer 1

You should edit the image so it is the height of one li, and it has (transparent) padding as part of the image. It seems to be impossible (or very hard) to control the position of the image cross-browser.

Answer 2

Just use a background image rather than a list-style-image. The downside of this though is that the 2nd and any following lines of text will be padded as well.

li {
    list-style: none;
    background: url(path-to-image) no-repeat left center;
}

Answer 3

Did you try setting a line-height (or top and bottom padding values) on the LIs exclusively for IE6 and 7 to vertically center the [+] icon?
A css reset should fix the indentation - if it doesn't just use text-indent (or some margin-left or padding-left).

You can use *+html li {} to target IE7 and * html li {} for IE6.