100% ≠ 100% ?
Experiments: Body Element
Part 1 - Starting Point

This set of experiments use the body element as the Container Block to observe how each Browser controls its Default Scrollbars (i.e. the height and width calculations used in Scrollbar Control Logic). For this purpose, the overflow property of the body element is left as default (i.e. not specified).

Again starting with the same page used in the experiments of DIV Experiments, but removing the #container:

C
S
S

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

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

#test
{background: none #fffacd;
height: 100%; width: 100%;}

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

H
T
M
L

<body>

<p>

This is some text....

</p>

</div>

</body>

This sets the body background color to dark green. A test block - #test was inserted inside body. The experiments were conducted by varying the height and width of #test, while observing the behavior of the Browsers Default Scrollbars. It should be noted that, the above styling in the CSS styling also Normalizes (i.e. strips the secret privilages of) the body and the html elements, as discussed in detail in Privileged Ones. This becomes a critical issue for the experiments using the body element as the Container Block, since the Browser given privileges - with or without the explicit blessings of W3C, will create a chase-the-tail condition.


IExplorer	Mozilla	FireFox	Netscape	Opera

Important Notes:

Due to the fact that the html & body elemnts have been Normalized, there were no inconsistent and/or strange behavior of scrollbars.
Furthermore, the infamous Vertical Scrollbar of IExplorer is also ever present, as expected.

Vertical Integrity

Let's set the width of #test to 120% (i.e. much greater than that of the body) to force the Horizontal Scrollbar, while setting the height to 100%, to observe the behavior of the Vertical Scrollbar.


IExplorer	Mozilla	FireFox	Netscape	Opera

Observations:

The Vertical Scrollbar of Internet Explorer is visible, but not active.
The Vertical Scrollbars of Mozilla, Netscape & Opera were not activated.
The Vertical Scrollbar of FireFox was activated prematurely, due to the presence of the Horizontal Scrollbar.

Horizontal Integrity

Now, we can repeat the steps of Vertical Testing, by setting the height of #test to 120% (a value much greater than that of the body) to force the Vertical Scrollbar, while reetting the width to 100% to observe the behavior of the Horizontal Scrollbar.


IExplorer	Mozilla	FireFox	Netscape	Opera

Observations:

The Horizontal Scrollbars of all the browsers tested were not activated.

What is Next?

Following the same direction used in DIV Experiments - 100% ≠ 100%! , we will not waste any time and proceed directly to the next step - Sanity Check, a further and deeper investigation. Again, a series of experiments were conducted towards this end, which are further discussed in Part 2 of this article. www.web-zonez.com/screen/100/body/100body2.html

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,

100% ≠ 100% ? Experiments: Body Element Part 1 - Starting Point

Important Notes:

Vertical Integrity

Observations:

Horizontal Integrity

Observations:

What is Next?

Obvious is not ALWAYS Obvious!

100% ≠ 100% ?
Experiments: Body Element
Part 1 - Starting Point