HTML, BODY - What's the difference, what's reqd?

The HTML tag is the parent of both HEAD and BODY. But what do you get by styling each/both. Is the HTML tag more important for XHTML?
Date Created: 24th September 2006
Date Modified: 24th September 2006
Home > CSS > HTML, BODY tag styling

Styles used:

html { background:url(/img/html_bkgrd.gif); background-color:#f66; /* RED */ border:2px solid #f00; margin:50px; padding:20px; width:90%; } body { background-color:#66f; /* BLUE */ border:2px solid #00f; padding:5px; margin:10px; width:80%; }

HTML4.01 Strict, Transitional - html covers the entire client area. The background-color always fills the entire area. The BODY contents height depends on it's contents and may not cover the entire client (HTML) area.

XHTML1.0 Strict - Seems to be the same as for HTML

html.margin - IE6 ignores any margin/width (padding is OK) set on the HTML element, so the border is always on the outside edge and the contents is unaffected. In FF, however, the margin is taken into account, so the border can be inside, but the background(color/image) will still extend to the edge of the client area. In FF you can set a width on the html area which is wider than the available area, but you get no horizontal scrollbar.

body.width - In FF the width of the body is related to the width of the html parent element. Since IE6 ignores width of the html element, the width of the body in IE6 is dependent on the client area and extend beyond the right margin if a width is not explicitly defined.

Quirksmode (no DOCTYPE) - FF is no different. IE6 is a bit cocked up - padding on the html element is ignored, background image on the html element still shows through, the body element extends to the edge of the client area, completely covering the html area. IE6 seems to have a large default margin on the body?! Setting a margin of 10px seems to greatly reduce this, ignoring completely the html padding?!