## 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:   http://golem.ph.utexas.edu/cgi-bin/MT-3.0/dxy-tb.fcgi/203

### Re: Dutch Education

I prefer this technique:

html { margin: 0;
}

body { margin: 0;
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