IE and font-size

IE did it again. seriocomic pointed out that the frontpage of my blog displays incorrectly on IE. Well, half an hour of debugging and the culprit was found.

Update 13.1.2005: Images lost during some update or another…

Screenshot of display bug On the left you can see how IE rendered it. The only elements that the frontpage has that are unique to it are the following: 

<h1 id="blogname">randomfire</h1>
 
<p id="desc">
<a href="/ramin/" title="Ramin Miraftabi">ramin</a> 
on usability, the [Semantic] Web, and whatnot&hellip;
</p>

The styles that are applied to these two are: 

#blogname {
	font-family: "Verdana", "Arial", helvetica, sans-serif;
	font-style: italic;
	color: #333;
}
#desc {
	margin-top: -1.5em;
	margin-bottom: 1.5em;
	margin-left: 3em;
        font-size: small;
	font-style: italic;
	color: #555;
}
…

Debugging it, i.e. removing a line a seeing what happens, gave the appearance that the margin rules of the desc were to blame. While fiddling around, I noticed that the font-size rule was irrelevant, so I removed it. Then when I reapplied the margin rules (written in another way), the layout was fixed. Further testing revealed that the font-size rule was to blame. Now all is well again. Or at least until someone finds the next bug.