Skip to the Main Content

Note:These pages make extensive use of the latest XHTML and CSS Standards. They ought to look great in any standards-compliant modern browser. Unfortunately, they will probably look horrible in older browsers, like Netscape 4.x and IE 4.x. Moreover, many posts use MathML, which is, currently only supported in Mozilla. My best suggestion (and you will thank me when surfing an ever-increasing number of sites on the web which have been crafted to use the new standards) is to upgrade to the latest version of your browser. If that's not possible, consider moving to the Standards-compliant and open-source Mozilla browser.

August 18, 2003

Dutch Education

Anne van Kesteren has been educating me about my incorrect usage of CSS in this blog. In XHTML the <body> element does not fill the entire viewport. So, when I apply a background styling to it, the background also should not fill the entire viewport1.

My design, in which the background applied to the <body> did fill the entire viewport was an accident, due to a bug in Mozilla. The correct way to achieve the desired effect is to style the “root” <html> element.

Unfortunately, this will mess up in some stupid browser written by a corporation in Washington State. Anne proposed (comment 10; Anne: your comments really should have permalinks!) the following workaround 

html, body {
    background:#EEE url(/~distler/blog/images/LightBlueTexture.gif) fixed;
    }
html>body {background:none;}

This sets a background image for both the <html> and <body> elements and then turns off the background for the <body>. It assumes that the set of browsers which can correctly style the <html> element coincides with the set of browsers that understand the child selector html>body. I’m not sure that’s true (IE 6 ?), but life is too short to obsess about broken browsers. I’m sure someone will let me know if the background is messed up in their browser.

Update (8/24/2003): According to Anne, who’s done some testing, this hack will only work in IE 5.0/Win if there are no spaces in the child selector html>body. Lord, I hate CSS hacks.

 1Strictly speaking, the <body> element doesn’t cover the entire viewport in HTML either. But the CSS Spec recommends that, for HTML (but not XHTML) documents, the background of the <body> element be applied to the entire viewport anyway, so that it will work as expected legacy browsers (which don’t recognize styling the <html> element).

Posted by distler at August 18, 2003 12:00 AM

TrackBack URL for this Entry:   https://golem.ph.utexas.edu/cgi-bin/MT-3.0/dxy-tb.fcgi/203



5 Comments & 0 Trackbacks

Re: Dutch Education

I prefer this technique:

html { margin: 0;
padding: 0;
}

body { margin: 0;
padding: 1em;
background:#EEE url(/~distler/blog/images/LightBlueTexture.gif) fixed;
}

Posted by: David Dorward on August 18, 2003 3:36 AM | Permalink | Reply to this

Re: Dutch Education

Umh, that’s what doesn’t work in XHTML (served as application/xhtml+xml, blah, blah,…).

Since the <body> doesn’t fill the viewport, neither does the background. Setting margins and padding have nothing to do with this.

In fact, this sometimes does work, but only because of the aforementioned bug in Mozilla (which treats an XHTML document as if it were HTML and propagates the background from the <body> to the root element.

Until Anne straightened me out, my design relied on this same buggy behaviour of Mozilla.

Posted by: Jacques Distler on August 18, 2003 6:31 AM | Permalink | Reply to this

Re: Dutch Education

In what browsers doesn’t it work? I was testing in Mozilla and it seemed fine (with the XHTML content type).

Posted by: David Dorward on August 19, 2003 1:52 AM | Permalink | Reply to this

Re: Dutch Education

Anne has examples using absolute positioning in which it fails in Mozilla.

But that’s not the point.

The point is that the only reason it works at all in Mozilla is because of an acknowledged bug. One morning you are going to wake up and discover that they’ve fixed the bug and thereby broken all your designs.

That’s the problem with coding to browser bugs instead of coding to Standards. I prefer to do the latter … and sleep at night.

Posted by: Jacques Distler on August 19, 2003 7:18 AM | Permalink | Reply to this

Comments!

For the sake of archiving and permalinks. I now added a semantic way to bookmark my comments.

I hope your happy! And who know what the future will bring, validated comments…

Posted by: Anne van Kesteren on August 18, 2003 2:02 PM | Permalink | Reply to this

Post a New Comment