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. =)

[HeartOfPandora]

It might be that you're mixing em with px, some browsers don't like that. It's best to just pick one and stick with it. Other than that I can't think of anything I haven't already said.