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]

You should try to be more thorough when you define things. On the #right ul li a you didn't put where the bullet background was supposed to sit, but you did on the a:hover which IE rendered differently than the default position (which is where the background sits in the general a(should be a:link) category).

About the extra pixels: when you defined the links, you only used "a" which means any kind of link - text or image. You have a 1px border and a 1px margin on the links, which IE defines everywhere you didn't specify it not to. With IE, you have to be very thorough and even if it seems stupid to define something, undefined traits are inherited whether or not you want them to be.

a:link {
font-family: times new roman;
color: #fff;
text-decoration: none;
}

will invariably define in the exact same way a:visited, a:hover, and a:active unless you specify something different in each of them. Because a:link is at the top of the link hierarchy, it's subordinates will inherit any trait you didn't define them to. If you put a margin on a:link and don't want it on a:hover, you must must must specify that.