Consider the simple HTML below
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sepia Mutiny</title>
</head>
<body>
<div style="border: 1px solid black; background-color: red;">
<img style="" src="/sepia/images/SMB3.jpg"/></div>
</body>
</html>
This is a well-formed strict HTML document that validates. You'd be surprised to see what it produces. See below.
If you haven't realized what's wrong, there is a gap below the banner image, before the div tag ends. Why? Probably stupid IE doing it's own thing, is anybody's first guess. Actually this is Firefox 2. Huh? I tried setting margin, padding and any other property that I could think of to 0. No effect. What gives? The same document renders differently in Internet Explorer 7. No gap below the image. Weird. Upon further tests, I made another HTML document.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sepia Mutiny</title>
</head>
<body>
<div style="border: 1px solid black; background-color: red;">
<img style="" src="/sepia/images/SMB3.jpg"/></div>
</body>
</html>
What's the difference? Only the Doctype is missing. So of course this is not a valid strict HTML document. Here's how it renders in Firefox?
I spent scratching my head for the better part of this sunday over this. Is Firefox buggy and IE7 getting things right now? Traditionally, sites are designed for non-IE browsers first because they are standards-compliant, and code exceptions/hacks for IE because of all its quirks. Has the situation reversed? After much Googling, I finally found the story behind this mysterious gap. Apparently, Firefox is too good at being standards compliant.
Lesson: Because the html element <img> is an inline element by default, it is rendered with a baseline whose height from the bottom border of its container depends on the font applied to the container. The element's property must be set to block to render the element differently without this baseline (assuming there is no other element such as inline text that may need a baseline within the same container). Thus, re-writing legacy HTML to conform to today's standards will break a template design. This is because a well-formed standards compliant HTML document is rendered by today's A-grade browsers in 'standards mode', whereas badly written html documents of yesterday are rendered by browsers in 'quirks mode'. As some of us who don't have enough background in designing sites usually just wing it, this is going to be a problem because of the all the bad habits we've learned over the years working in browsers' quirks mode. Now doing it the standards way is rather hard because we have to re-learn or rather learn correctly html and css standards.
References:
- Eric A. Meyer, Images, Tables, and Mysterious Gaps. Mar 21, 2003.
- Eric A. Meyer, Images, Tables, and Mysterious Gaps. Mar 3, 2002.
