PRIVILEDGED ONES
 ROOT ALCHEMY
 Part 2 - HTML - Height & Width

The experiments covered in the topic titled Body Secrets showed that setting the height and the width of the body element to 100% - to match the the size of the Screeen (i.e. Peep-Hole), has no meaning unless the height and the width of the html element is also set to 100%. (The only exception Internet Explorer.)

As a result, we need to continue our investigation into the dark secrets of the Priviledged Ones, by going one more step in the hierarchy of elements: The ever elusive, behind the scenes ambiguity, code named "html", and sometimes alleged to be the "root element".

Of course, the most logical point to start this, will be to probe the height and width properties.

Before We Start

Each test page used in these experiments are:

The following browsers/versions were used in this study:

Within the scope of this study, the results did not show any significant differences between two versions tested, with the exception of Internet Explorer. Consequently, the results for both versions were given. Otherwise, the results presented pertain to the most recent versions of the other browsers.

Starting Point

Again, let's start with a simplistic page, with a very basic and traditional styling:

C
S
S

html
{background: none #a52a2a;
height: 100%; width: 100%;
border: 5px solid #000000;}

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

#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>

It should be noted that, the above styling in CSS is also to Normalizes (i.e. strips the secret privileges of) the body element for the browsers tested, as previously discussed in Body Secrects. Borders were specified for the html element, for obvious reasons.

In these study, we will be experimenting with proportional (%) and absolute (px) values for the height and width of the html, to observe the behavior of this element for different Browsers. Similarly, different height and width setting - both in proportional (%) and absolute (px) units, will be used for the the body element. However, these values are intentionally set to be much smaller than those of the html element, for the purposes of avoiding any possible UBO's.

The main purpose of assigning proportional (%) height/width values is to determine what each browser uses as their "base" for such calculations. Furthermore some may think that some of the experiments presented are redundant, I will not argue with that. But, this was intentional, to double - or even, triple check the results obtained against each other.

Html < Peep-Hole

In this group ofexperiments, we will set the height and width of the html - in proportional (%) and absolute (px) values, to be much smaller than those of the actual Peep-Hole.


ROOT111S html {width: 400px; height: 300px;}
body {width: 300px; height: 200px;}
IExplorer
6.0 		IExplorer
7.0 		Mozilla
1.7 		FireFox
1.5 		Netscape
8.1 		Opera
9.1

ROOT112S html {width: 400px; height: 300px;}
body {width: 50%; height: 50%;}
IExplorer
6.0 		IExplorer
7.0 		Mozilla
1.7 		FireFox
1.5 		Netscape
8.1 		Opera
9.1

ROOT113S html {width: 50%; height: 50%;}
body {width: 50%; height: 50%;}
IExplorer
6.0 		IExplorer
7.0 		Mozilla
1.7 		FireFox
1.5 		Netscape
8.1 		Opera
9.1

ROOT114S html {width: 50%; height: 50%;}
body {width: 50%; height: 100%;}
IExplorer
6.0 		IExplorer
7.0 		Mozilla
1.7 		FireFox
1.5 		Netscape
8.1 		Opera
9.1

Html Height > Peep-Hole Height

As expected, in this step we will set only the height of the html - in proportional (%) and absolute (px) values, to be much greater than that of the actual Peep-Hole, while keeping the width much smaller.


ROOT121S html {width: 400px; height: 1500px;}
body {width: 300px; height: 200px;}
IExplorer
6.0 		IExplorer
7.0 		Mozilla
1.7 		FireFox
1.5 		Netscape
8.1 		Opera
9.1

ROOT122S html {width: 400px; height: 1500px;}
body {width: 50%; height: 50%;}
IExplorer
6.0 		IExplorer
7.0 		Mozilla
1.7 		FireFox
1.5 		Netscape
8.1 		Opera
9.1

ROOT123S html {width: 50%; height: 120%;}
body {width: 50%; height: 50%;}
IExplorer
6.0 		IExplorer
7.0 		Mozilla
1.7 		FireFox
1.5 		Netscape
8.1 		Opera
9.1

ROOT124S html {width: 50%; height: 120%;}
body {width: 50%; height: 100%;}
IExplorer
6.0 		IExplorer
7.0 		Mozilla
1.7 		FireFox
1.5 		Netscape
8.1 		Opera
9.1

Html Width > Peep-Hole Width

As expected, in this step we will set only the width of the html - in proportional (%) and absolute (px) values, to be much greater than that of the actual Peep-Hole, while keeping the height much smaller.


ROOT131S html {width: 1500px; height: 300px;}
body {width: 300px; height: 200px;}
IExplorer
6.0 		IExplorer
7.0 		Mozilla
1.7 		FireFox
1.5 		Netscape
8.1 		Opera
9.1

ROOT132S html {width: 1500px; height: 300px;}
body {width: 50%; height: 50%;}
IExplorer
6.0 		IExplorer
7.0 		Mozilla
1.7 		FireFox
1.5 		Netscape
8.1 		Opera
9.1

ROOT133S html {width: 120%; height: 50%;}
body {width: 50%; height: 50%;}
IExplorer
6.0 		IExplorer
7.0 		Mozilla
1.7 		FireFox
1.5 		Netscape
8.1 		Opera
9.1

Well, let's add a redundancy, to assure that IExplorer 7, Mozilla, Netscape & FireFox does really calculate the width of the body element based on the specified value for the html element.


ROOT134S html {width: 120%; height: 50%;}
body {width: 80%; height: 50%;}
IExplorer
6.0 		IExplorer
7.0 		Mozilla
1.7 		FireFox
1.5 		Netscape
8.1 		Opera
9.1

Html Height & Width > Peep-Hole

In this final step, we will set both the width and height of the html - in proportional (%) and absolute (px) values, to be much greater than those of the actual Peep-Hole.


ROOT141S html {width: 1500px; height: 1500px;}
body {width: 300px; height: 200px;}
IExplorer
6.0 		IExplorer
7.0 		Mozilla
1.7 		FireFox
1.5 		Netscape
8.1 		Opera
9.1

ROOT142S html {width: 1500px; height: 1500px;}
body {width: 50%; height: 50%;}
IExplorer
6.0 		IExplorer
7.0 		Mozilla
1.7 		FireFox
1.5 		Netscape
8.1 		Opera
9.1

ROOT143S html {width: 120%; height: 120%;}
body {width: 50%; height: 50%;}
IExplorer
6.0 		IExplorer
7.0 		Mozilla
1.7 		FireFox
1.5 		Netscape
8.1 		Opera
9.1

ROOT144S html {width: 120%; height: 120%;}
body {width: 50%; height: 100%;}
IExplorer
6.0 		IExplorer
7.0 		Mozilla
1.7 		FireFox
1.5 		Netscape
8.1 		Opera
9.1

Observations

As I said earlier, I can be blamed for a lot of redundancies in the experiments included in this study. However, if I am going to err, I always choose to err on the side of caution. Having succeeded to bore you to great extend, now I will try summarize the results in the most concise format (let's see if I succeed!):

SUMMARY of RESULTS Html Height Html Width
< Peep-Hole > Peep-Hole < Peep-Hole > Peep-Hole
 
IExplorer 6.0 HTML SETTING Preset
(100%) 		Preset
(100%) 		Preset
(100%) 		Preset
(100%)
SCROLLBAR Not Active Not Active None None
Calculation BASE Html=Peep-Hole Html=Peep-Hole Html=Peep-Hole Html=Peep-Hole
 
IExplorer 7.0 HTML SETTING Ignored
(100%) 		Accepted Ignored
(Body Width) 		Ignored
(Body Width)
SCROLLBAR Not Active Active None None
Calculation BASE Peep-Hole Peep-Hole Html Html
 
Mozilla 1.7
Netscape 8.1 		HTML SETTING Ignored
(100%) 		Accepted Accepted Accepted
SCROLLBAR None Active None None
Calculation BASE Html Html Html Html
 
FireFox 1.5 HTML SETTING Accepted Accepted Accepted Accepted
SCROLLBAR None Active None None
Calculation BASE Html Html Html Html
 
Opera 9.1 HTML SETTING Accepted Accepted Accepted Accepted
SCROLLBAR None Active None Active
Calculation BASE Html Html Html Html

What is Next?

Well, the results of this study clearly shows the bizarre ways each browser "shape" the html element, as they wish!

However, it makes it very clear the height and the width of the html elment needs to be set to 100%, for the height and the width settings of the body element - in proportional units (%), to have any meaning!

Since we entered this labyrinth, let's be adventurous and explore a bit further the hidden secrets of the html element by assigning values to other CSS properties. Even though this may not give us any real world solutions, but may possibly give some more insight into the chaotic "infra-structure" of the Browsers.

Or. if in a hurry, you can jump to Part 4 to review the summary of results of all of the experiments and the conclusions. www.web-zonez/screen/duo/root/root4.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,

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