IE formatting oddity
Sunday, July 6th, 2008It’s good to know that within 1 day of returning to any amount of CSS work, Internet Explorer can still baffle me. Maybe I’m missing something here, but seems that if a small tag (yes, let the damnations begin, but it was mostly due to the WordPress default template using it, that I came across it) does not include some trailing whitespace, it receives a little extra padding.
Rendering oddity with small tags with no trailing whitespace.
The HTML code used validates, should you wish to inspect it yourself. The “CSS1Compat” mode is merely to ensure we’re in “standards mode”.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head><title>wth ie</title>
<style type="text/css">
h2{
background-color:red;
margin-bottom:0;}
.wth {
background-color:green;
margin-top:0;}
</style>
</head>
<body>
<h2>foo</h2> <small class="wth"> b ar </small>
<h2>foo</h2> <small class="wth"> b az</small>
<hr/>
<script type="text/javascript">
document.write(document.compatMode);
</script>
</body>
</html>
You’ll notice I remove all margin on the elements. And indeed, the first header h2 and small does render correctly. But the second gets a 2 pixel margin added for … who knows what reason.