IE margin and line-height Options

[Nadiyya]

'K, it's been a while since I've been around, but I'm in need of some help again. And again with Internet Explorer. Only two problems this time, though.

1. On the right side bar of my site (f.erocio.us), the linked images at the top have a tiny (albeit, hellishly annoying) margin underneath the image, outside the border. It's a weird number ... 3 pixels. Nothing in my style sheet is a 3-pixel margin, so it's confusing me.

2. The links under the "Good to Know..." heading. I set a specific line height, but the line height is showing up differently in only IE (it works fine in Firefox and Safari, and I'm assuming in Opera, but I haven't checked it). Since IE shows it differently, the bullet wiggles when you hover over the link. Stupid.

Here's the coding for those links, though:

CODE

ul { list-style:none; }
#right ul { margin:0; }
#right ul li { line-height:2.0em; }
#right ul li a { background:#0a0a0a url(images/ul-bullet.png) no-repeat; border:1px solid #2b2b2b; border-left:0; display:block; margin:1px 0; padding:5px 5px 5px 20px; }
#right ul li a:hover { background:#0f0f0f url(images/ul-bullet.png) no-repeat bottom left; border-left:0; }
#right ul li a span { color:#ff0066; }
#right ul li a:hover span { color:#b50048; }

Any ideas, other than making a separate style sheet only for IE? Thanks. =)

[Nadiyya]

I didn't give a position for the background bullet because the image I'm using is the same height as the line-height + the padding + the borders (20px line-height + 5px top & bottom padding + 1px top & bottom padding = 32px). Actually, the image is half the height, because I do image hovers differently than most people and us only one image. Anyway, backgrounds not given a position default to position top left. It's just weird, because IE is displaying a different line-height than I have defined.

For the links, I only did a and not a:link, a:visited, etc., because the images that are having a problem aren't defined by those. These are the codes I'm using for those:

CODE

#right img, #right a:link img, #right a:visited img, img { background:#0a0a0a; border:1px solid #2b2b2b; margin:0; padding:5px; }
#right a:active img, #right a:hover img { background:#0f0f0f; margin:0; border:1px solid #2f2f2f; }
div.img { border:1px solid #000; margin:0 0 5px; }

The div.img class is the black border around the grey border. I don't have any margin associated with the linked images on the right, so it's confusing me as to why there's a 3-pixel margin beneath the images. Is that just what IE does and there's no way around it?