IE7 and IE6 don't like list images

I've had to go look this up so many times, I thought I'd post it to my own blog. IE6 and 7 do funny things to list images. Instead of creating a different style just for those browsers, there is an easy fix.

First take out all references to list-style: image
Then change css to this:

ul, li { (or the id/class of this specific ul)
list-style: none;
margin: 0;
padding: 0; (if you don't already have this)
}

ul li {
padding-left: whatever
background: url(heart.gif) left center no-repeat;
}