ˇViva La Revolución! ˇViva La Revolución!
(Fall of The Privileged Ones)

In depth investigations into the behavior of the Privileged Elements that rule the screen - namely, html & body (as presented in Screen Mysteries), revealed wealth of information, including the fact that these elements have been manipulated behind the screen by Browsers, in bizarre ways. www.web-zonez.com/screen/index.html

Furthermore, the same studies also uncovered the Phantom of Opera - a hidden element over and above the html element in the hierarchy of elements, in Opera 7.54, (and very probably the earlier versions also). This monstrosity quietly disappeared by Opera 9.01, I do not know exactly what version this change occurred, since no tests were performed using the versions in between. To the best of my knowledge, this is the first positive identification and documentation of this phenomenon. www.web-zonez.com/screen/duo/phantom/index.html

Enough reasons to stage a revolution? I should say so! OK, let's go muchachos! But.. Do not forget to bring a bottle of tequila!

Step 1 - Normalization

The study titled The Privileged Ones, showed hidden (default) margin and padding settings of the body element. We also observed the chaotic behavior of the html element for different settings of its properties. Furthermore, we also clearly demonstrated that the default settings of height and width of this element is not 100%, as one would expect! The only exception is IExplorer 6.0 (but not 7.0).

However, the same study also allowed us to formulate solution to normalize them, by purely stripping them of the Browser given privileges:

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

Step 2 - Pacification

On the other hand, the experiments presented in the study titled Scrollin' Along... showed that the Default Scrollbars belong to the html element and controlled by the body element. Exceptions being IExplorer 6.0 & 7.0, where they belong to and controlled by the html element, and Opera 7.54, where the Vertical Scrollbar belongs to the Phantom of Opera, but the Horizontal Scrollbar does not. www.web-zonez.com/screen/scroll/index.html

Based on the results of the same set of experiments, we also documented the fact the default value of the overflow property of html element is visible for all browsers except for IExplorer.

However absurd it may seem, this appears to be with the explicit blessing of W3C in CSS 2.1, under:

11.1.1 Overflow: the 'overflow' property
..."UAs must apply the 'overflow' property set on the root element to the viewport. HTML UAs must instead apply the 'overflow' property from the BODY element to the viewport, if the value on the HTML element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'."
» Reference Date: Feb 03, 2007 www.w3.org/TR/CSS21/visufx.html#overflow

Again, the same study, based the data obtained by examining results of at least 175 test files, also allowed us to pin-point a single combination as the common denominator:

html{overflow: hidden} and body{overflow: hidden}

Well, let's not forget that these studies also show very clearly that these privileged elements are just glorified div's, with special privileges given to, and, fully manipulated at will, by the Browsers.

Even though we can not easily remove these privileged ones from their seats of power, we can simply passify them completely:

html, body
{height: 100%, width: 100%; margin: 0; padding: 0; overflow: hidden;}

Step 3 - New Order

Now the privileged ones have been stripped of all their Browser given privileges and lost their powers in controlling the screen completely. OK, what does give us: A screen without scrollbars?

But wait a second! Lets introduce the new ruler of the screen, #zpad - a simple div, just a peon:

#zpad
{height; 100%, width: 100%; margin: 0; overflow: auto;}

Now we have one single, but absolute ruler of the screen (including the control of the Default Scrollbars) - #zpad, who:

To End or Not to End?

Well, this may be a very quiet revolution, but it represents a radical change that calls for celebration.

Anyone who is satisfied with one single ruler of the screen (i.e. a flat page-layout design using only one set of scrollbars for the entire screen), you can stop here, grab your bottle of tequila, relax and join in the fiesta.

Muchachos who would like to see more changes and to explore the new horizons opened by this revolution, please re-cap your bottles of tequila after few sips and follow me to Implementing ZoneZ, before the real big celebration.

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