« Strike Out Posted | Main | Reading List: Rocket Boys »

Friday, July 15, 2005

HTML: Persuading Internet Explorer to Do Widths Correctly

If you've ever created an HTML document with page margins and then included tables with widths specified which are narrower than the margins, you've probably noticed that Microsoft Internet Explorer has a very eccentric way of rendering such pages, different from any other present-day browser. As a concrete example, suppose you've defined page margins for the main body copy of your page with the following Cascading Style Sheet definition: 
    div.bodycopy {
        margin-left: 15%;
        margin-right: 10%
    }
and then wrapped the entire <body> of your document in this division style: 
    <body>
    <div class="bodycopy">
        . . .
    </div>
    </body>
Now suppose you'd like to include some tables in the document, each 85% of the width of the body copy, with a subtle light yellow background. You define the style of the table in CSS with: 
    table.data {
	background-color: #FFFFD0;
    	margin-left: 10%;
	width: 85%;
    }
and then include tables in this style: 
    <table class="data">
    <tr>
    <td>
        . . .
    </td>
    </tr>
    </table>
Now, all of this works precisely as you expected in Firefox, Netscape, Opera, and other browsers, and is validated without a quibble by the W3C XHTML and CSS checkers, but when you view the page with Internet Explorer, to your horror you discover that the tables are so wide that they extend off to the right of the body copy and may spill over the right side of the window! What's going on here?

It turns out that back in the days of Internet Explorer 4, Microsoft made different assumptions about the way widths, margins, and padding worked than those finally adopted in the W3C CSS standard. Because so many "Exploder Enhanced" pages had been created by the time the CSS standard was adopted, the default behaviour of Internet Explorer is the old, bad way, which results in the incorrect rendering of your page. "But wait," you say, "I included a DOCTYPE specifying the current version of XHTML. Shouldn't that direct the browser to render the page according to the standard?"

Well, it should, but in the case of Internet Explorer 6, it doesn't if you've begun your XHTML document, as you're supposed to, with an XML character set declaration like: 

    <?xml version="1.0" encoding="iso-8859-1"?>
This, for some screwball reason, causes Explorer to ignore the DOCTYPE declaration which follows it and render the page in the justly named "quirks" mode of version 4 of Explorer. If you omit the character set declaration, then the validators will complain, default to UTF-8, and fail if the document contains a different character encoding.

You can, however, specify the character encoding to the satisfaction of the validators and standards compliant browsers by using the <meta> "http-equiv" gimmick to force an HTTP Content-Type header on the document by including a meta tag like the following somewhere in the document <head>: 

    <meta http-equiv="Content-Type"
     content="text/html; charset=iso-8859-1" />
This suffices to specify the document's character set, but slips past Internet Explorer without triggering its eccentric interpretation of margins and widths; your tables will be properly rendered. I discovered this stratagem on page 336 of the O'Reilly JavaScript & DHTML Cookbook by Danny Goodman.

Posted at July 15, 2005 16:19