2px space CSS bug help?



So this time, I wrote perfectly valid CSS code. It looks good in Mozilla (as always) but yet again, I have what looks like 2 px of “empty space” between the img and the bottom border.

Normally, if I were using a block display, I’d do a vertical-align: baseline to fix this common IE problem but since my links go horizontal (not vertical), block display isn’t going to get around this.

And I don’t want to have to completely trash perfectly good code to fix it. Why IE can’t fix this is beyond me but does anyone know of another fix?

Webpage: http://calendar.oaksclass.com

Raven Oak



Remove the extraneous white space in your HTML markup, including line breaks:

<div class="home"><a href="http://www.oaksclass.com/"><img src="index_files/home.gif" alt="oaksclass.com" class="home"></a></div><div class="mainmenu"><a href="http://calendar.oaksclass.com/index.html"><img src="index_files/apcurrent.gif" alt="ap"></a><a href="http://calendar.oaksclass.com/ol/index.html"><img src="index_files/ol.gif"></a></div><div class="bottommenu">IE apparently interprets the whitespace as an anonymous linebox somehow.

Also why use a HTML 3.2 DOCTYPE, and you do realize that ‘bold’ is not a value for the CSS font-style property, nor is ‘width=100%’ valid CSS.

:cool: Perl / MySQL / HTML+CSS


On the bold, oops. Yeah, that should be font-weight I believe. The width= was just my html slipping through. Wonder how those two made it through the validator…

On the doctype, I get the purpose of one but have never figured out which one I should be using.

Removing the space fixed it.
So irritating question here:
In programming, making your code spaced out and readable is a good thing. How can I do that if IE’s going to interpret it as space?
Not only that but I swear IE didn’t do this before I was using CSS…