« July 14, 2005 | Main | July 17, 2005 »

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 16:19 Permalink

Strike Out Posted

I've just posted a document, Strike Out: Reading Unedited Text, which describes the technique I've adopted for reading unedited text such as postings on discussion boards, comments on web logs, and the like. The absence of an editor between the author and the eyes of the reader means that anybody with something to say can reach anybody inclined to read it, which is both the advantage and the problem with these new "unmediated media". Reading too much unedited text, particularly if you're doing so in search of nuggets of genuine wisdom or technical detail, can be depressing and result in scornful estimation of the intellect of the Internet community.

I'm not sure how this suggestion will be taken. I suspect that many will say, "How bloody obvious can you get?" Well, as simple-minded as it is, it took my simple mind more than decade to stumble onto the scheme, so perhaps others may benefit from having it explained with examples. I'm sure there will be some controversy over the implicit assumption that those who cannot spell or write grammatically have nothing to say, but since the "hate kiddies" who most vehemently advocate this viewpoint already hate everybody and everything anyway, the net increase in temperature is likely to be minimal.

Posted at 15:49 Permalink