Anne van Kesteren

Your body element is just a div

Alternative title: "one more reason to hate IE". In XHTML documents, there is nothing special at all with the body element. If you don't believe me, save the following code as "test2.xml":

<html xmlns="" xml:lang="nl">
 <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/>
 <title>body test</title>
<body bgcolor="red">
 <p>Echt waar!</p>

You need a recent build of Mozilla to see the correct effect. Even Opera 7.11 does this incorrect. It is understandable that this still works when a file is send as text/html for compatibility mode, actually, the file is still HTML in that case :-). In XML mode however, it should act differently, like Mozilla does.

As you can see from the example, Mozilla treats the body element not special at all. This is nice, since you won't need an extra div when you want to center something. My next design, which will be very clean (and not finished for the first couple of months, if have got work to do ;-) and Arthur too, BTW) will make use of this technique and will serve some outdated style sheet (which will work) to browsers who don't understand the XHTML media-type.

When I find my (lost) time back, I will try to add some test cases to demonstrate the effect.

UPDATE: WOW, Internet Explorer 6.0 (in standard compliant mode, not in quirks mode (another reason to hate quirksmode)) supports styling the body element! Of course that is not enough for big commercial websites (they need IE5.x), but it may be a relieve for my readers, who are using Internet Explorer to browse the web. Examples can be found here:


  1. Camino gets it right, too. But Safari doesn't.

    I know what you mean about extra divs. However, some people do use plenty - IIRC, the Slashdot redesign at ALA does - and I'm not sure that's a bad thing per se. Where more than one person is maintaining a document or set of documents, and providing the div names are functional, and help to mark-off and show the different parts of a document, they could be of help even where they don't do much. And, if a later redesign comes along, who knows? ...

    Currently, even if I don't want a multi-column layout, I tend to use four divs with the ids "header", "content", and "footer". Everything is wrapped in a fourth div called "wrapper" (with the margins and padding declared as "0" on the body). Then I add other divs as needed.

    Posted by Michael at

  2. Sounds good, can't wait to see your new design.

    Posted by ACJ at

  3. I knew about this for some time already. But unlike you , I didn't add an extra div into my XHTML, but used the box-model hack in CSS to make the new design for instead of being centered, a left orientated design for IE5, IE 5.5 (and it seems Safari and Opera [IE mode]). But in any commercial site I have to develop I use the "wrapper" div to catch all others, even when it is not a centered lay-out.

    Posted by JW at