CSS Trouble, seems like easy answer?

I have just added Alex King's popularity plugin to my blog at http://www.andrewpolanski.com . It looks great in Firefox, however when I view it in Internet Explorer there is a big gap between the green arrow and the beginning post title.

Here is the style.css block that the
li goes through:

.misc ul li a {
background:transparent url(images/bullet.gif) no-repeat left;
padding-left:18px;
line-height:18px;
}

Code (markup):

I would assume I would just make a "misc1", but I don't know how to modify that above code so it doesn't gap so much like it does right now. I want to look just like my blogroll or my top commentators.

Thanks,
Comatose

 

I have IE for Linux (thus not quite the same) and I see not just the arrows squished but also as you scroll down the page, the letters gradually fall off to the left.

Usually you'd add more padding left but I don't think you have the room for it. There may be something else overall in the css setting IE screwy everywhere.