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.

[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?

[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.

[HeartOfPandora]

Have you tried validating? That would probably catch a few errors.

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