IE formatting oddity

Posted on 6th of July 2008

It’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.

Small element rendering comparison
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.

Tags: , , ,

This entry was posted on Sunday, July 6th, 2008 at 8:19 pm and is filed under Stylesheets. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “IE formatting oddity”

  1. Corey Docken Says:
    July 9th, 2008 at 9:17 pm

    I stumbled across your site looking at a post you wrote about expressions in CSS and I went to the main page and noticed this post. I figured out what is going on here… If you drag your mouse after the second “b az” text (the one you are having issues with), you’ll notice that Internet Explorer adds a space before taking advantage of the line break you have. If you were to put the hr tag directly after closing your second small tag (no spaces or line breaks), the problem should go away.

    You don’t seem to be too worked up about it, but I thought I’d just mention my thoughts on this subject.

  2. svendtofte Says:
    July 9th, 2008 at 11:04 pm

    Hmm, yeah, you’re right. I guess the behavior is related to collapsing whitespace across tags. Since the trailing whitespace behind the small tag gets collapsed, and it exists outside the tag, it gets the “normal” font-size. If trailing whitespace exists inside the tag (making it “small” font-size whitespace), all the trailign whitespace behind the second tag gets collapsed, and thus doesn’t affect the line-height.

    It’s not really related to small tags alone, you can see the same thing happening here.

    .wth {
font-size:50%;
background-color:green;
margin-top:0;}
...
<h2>foo</h2>    <span class="wth"> b az</span>
<h2>foo</h2>    <span class="wth"> b az </span>

    And no, I’m not really bothered, but it is interesting to observe.

Leave a Reply