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]

The em is just relative to what you already have defined. I set my body text at 10px, so when I have a 2.0em line-height, it'll display at 20 pixels. The thing is, I tried just setting the line height to 20px instead of 2em, and it still gave me the same problem.

Microsoft is such a pain in the rump. Thank you for trying, though. =)

edit: I just did the validation you suggested. The markup was clean, and the CSS was clean, except for 5 warnings which were irrelevant to the margin problem (they were just related to floating).