PRIVILEDGED ONES
 Body Secrets

A good point to start our investigation into the dark secrets of the Priviledged Ones, is the first step in the hierarchy of elements: The masked, front man - code named "body", who appears to rule the presentation aspects (i.e. rendition) of a Web Page on the Screen, especially in the Quirks Age.

Let's proceed to see - as far as it is possible, what these "secret" powers and priviliges of this character are!

Before We Start

Each test page used in these experiments are:

When this study originaly started sometime ago, the following browsers/versions were used, since they were the most current versions at that time:

However, due to other obligations on my part, I have not had much "spare time" to dedicate to this project. In the mean time different browsers came out with later versions of their software, prompting me to repeat the same experiments with the following Browsers/versions:

The results did not show any significant differences, with the exception of Opera. Consequently, the results for both versions were given. Otherwise, the results presented pertain to the most recent versions of the other browsers.

Starting Point

Starting with a simplistic page, with a very minimal basic styling:

C
S
S

body
{background: none #006700;}

#test
{background: none #fffacd;}

p
{font-family: sans-serif;
margin-top: 0px; padding: 4px;
font-size: large; font-weight: bold;}

  H
T
M
L

<body>

<div id="test">

<p>

This is some text....

</p>

</div><!-- test -->

</body>

This sets the body background color to dark green. A test block - #test, with its background set to light yellow, was inserted inside the body.

Now, let's take a look at this simple page we are starting from:

IExplorer
7.0 		Mozilla
1.7 		FireFox
1.5 		Netscape
8.1 		Opera
7.54 		Opera
9.01

No surprises.. What we see, is what we expected! #test (and its contents) is on a yellow background, inside a dark green body, which occupies the entire screen. End of subject; right? No, Not that simple. This is just only the beginning.

html - The Chameleon

Well, at this point let me introduce our secret weapon, by assigning a background color - dark red, to the html element:

CSS

html {background: none #a52a2a;}


IExplorer
7.0 		Mozilla
1.7 		FireFox
1.5 		Netscape
8.1 		Opera
7.54 		Opera
9.01

The screen is now mainly dark red - background color assigned to the html element, with some or no green - background color assigned to the body element. In other words, the body element shrank as dictated by its contents, subject to the differences of rendition for each browser.

Observations:

Comparing Notes....

The html element masquerading as the body element, appears to be with total blessing of W3C per CSS 2.1:

For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For HTML documents whose root HTML element has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of those properties from that HTML element's first BODY element child when painting backgrounds for the canvas, and must not paint a background for that BODY element. This does not apply to XHTML documents."
« Reference: CSS 2.1 - 14.2 The background »
« Referenced Date: January 22, 2006 » http://www.w3.org/TR/CSS21/colors.html

Height & Width

While we are here, let's see if the wide spread assumption of setting the height and width of the body element to 100% is a "cure-all":

1DD13S

html {background: none #a52a2a;}
body {background: none #006700; height: 100%; width: 100%;}

IExplorer
7.0 		Mozilla
1.7 		FireFox
1.5 		Netscape
8.1 		Opera
7.54 		Opera
9.01

Observations:

Putting the other irregularities observed aside for a moment or two, and let's do the obvious: Set the height and width of the html element to 100% also.

1DD14S

html {background: none #a52a2a; height: 100%; width: 100%;}
body {background: none #006700; height: 100%; width: 100%;}

IExplorer
7.0 		Mozilla
1.7 		FireFox
1.5 		Netscape
8.1 		Opera
7.54 		Opera
9.01

Observations:

Margin & Padding

Now, let's step back to analyze the "irregularities" observed:

At this point, It becomes obvious, does it not? Yes! Built-in (default) margins and/or padding! Let's prove it, by starting with the margins:

1DD15S

html {background: none #a52a2a; height: 100%; width: 100%;}
body {background: none #006700; height: 100%; width: 100%; margin: 0;}

IExplorer
7.0 		Mozilla
1.7 		FireFox
1.5 		Netscape
8.1 		Opera
7.54 		Opera
9.01

Observations:

Now, let's reset the padding property of the body element also:

1DD16S

html {background: none #a52a2a; height: 100%; width: 100%;}
body {background: none #006700; height: 100%; width: 100%; margin: 0; padding: 0;}

IExplorer
7.0 		Mozilla
1.7 		FireFox
1.5 		Netscape
8.1 		Opera
7.54 		Opera
9.01

Observations:

Consequently, we have also formally identified and documented a fundamental "peculiarity" of Opera 7.54 in a very objective and scientific manner. The reason I am saying this is due to the fact that, I have encountered this phenomena on and off, under different circumstances. However, the test files used for this set of experiments clearly identify this phenomenon, in its most essential and "naked" form. For the sake of facilitating references and avoiding possible confusion in nomenclosure, I have termed this "peculiarity" the Bottom Band Syndrome.

Furthermore, it also becomes very obvious that the discovery and clear identification of this phenomenon is solely due to the use of background color for the html element which is different than that of the body element. Should we remove the background specification, this Bottom Band would appear to be part of the body element:

Bottom Line

We have identified some fundamental secrets of the body element, and found some-what of a common denominator:

CSS

html {height: 100%; width: 100%;}

body {height: 100%; width: 100%; margin: 0; padding: 0;}

Please Note That....

Lessons Learned...

However, let's not get distracted from a very valuable lesson learned:

The assumption that the browsers will honor the expected - and/or specified by W3C, default values for any given CSS property of any given element, is a boomerang, and a very dangerous one. The default margin/padding setting discussed above is very good example of this. This is true for others too: Top margin of p element, top and bottom margins of the form element, just to mention a few...

So, back to Z Rules: When in doubt, spell it out!

What is Next?

Mission accomplished. We have identified some Browser given privileges of the body element and succeesfully Normalized them, by stripping off these secret privileges. Well, almost.....

However, the Bottom Band Syndrome still lurkes in the shadows. Well..Let's address it.

At this point, first reaction would be to jump to the conclusion that this band belongs to the html element, as indicated by its background color. However, this would be jumping the gun! The experiments conducted exploring the behavior of the Default Browser Scrollbars as a function of the overflow property of the body and html elements, as presented in Scrollin' Along..., clearly demonstrates that the Bottom Band is actually outside the html element and it is a part of the Phantom of Opera. This subject is discussed futher in the study titled Phantom of Opera.

This ended up as a rather short article, compared to the frustrations these UBO's have caused, till they were isolated and identified. Simply by using background colors, we have been able to provide a considerable insight as to the Browser given powers and privileges of the body element, as well as somehow managing to shatter some wide spread assumptions and/or beliefs.

Well, this is just the tip of the iceberg - as you may well guess. Using basicly the same strategies and techniquies, let's move up the hierarchy one more step and and begin our investigation of the html element in Root Alchemy.

Feed-back & Comments:
Please send any comments, opinions, and even contributions on this subject, using the Feed-Back Form.
Further Reading:
You can review the list of Related Articles, with brief descriptions and links on the Auxiliary Panel,

Web Design & Engineering: Dr. Z
© 2004-2008 Martian Melodies.
All rights reserved.www.Web-ZoneZ.com