Everything old is new again » error http://www.svendtofte.com rantings & scraps on code and web development Sat, 06 Nov 2010 20:55:12 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 IE formatting oddity http://www.svendtofte.com/stylesheets/ie-formatting-oddity/ http://www.svendtofte.com/stylesheets/ie-formatting-oddity/#comments Sun, 06 Jul 2008 18:19:09 +0000 Svend http://www.svendtofte.com/?p=9 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.

]]> http://www.svendtofte.com/stylesheets/ie-formatting-oddity/feed/ 2