100% ≠ 100%?
Overview Article
Part 2 -
Test Criteria & Experiments
Now, let's define the experiments set up to prove or disprove the equation in question.
First, the model to be used as the starting point (basis) of the experiments conducted: This very easy and straight-forward! It is the same model as the one used define the question, namely:
- A Container Block with a predetermined height and width (in absolute units - px).
- Again, inserted in it, a Liner Block - with its height and width set to 100% initially.
By pure definition, the activation of the Vertical and Horizontal Scrollbars should be independent of each other. Consequently, we will take two independent, but parallel paths in our experiments, to see if they really are, as well as to eliminate any possibility of any interaction between the two, if such exists.
-
Vertical Integrity Testing:
This experiments sets the width of the Liner Block (#test) to a value far greater than that of the Container Block (#container) - thus forcing the activation of the Horizontal Scrollbar, while keeping the height at 100%. The purpose of this is to see if the "Height Calculations" - and, the resultant "Scrollbar Control Logic" of the browsers, do what they are supposed (expected/assumed) to do!
-
Horizontal Integrity Testing:
Similarly, in these experiments we will set the height of the Liner Block (#test) to a value far greater than that of the Container Block (#container) - thus forcing the activation of the Vertical Scrollbar, while keeping the height at 100%. The purpose of this is to see if the "Height Calculations" - and, the resultant "Scrollbar Control Logic" of the browsers, do what they are supposed (expected/assumed) to do!
Experiments
-
DIV's - 100% ≠ 100% !
This set of experiments use the div element as the Container Block to observe how each Browser controls the Scrollbars of this element (i.e. the height and width calculations used in Scrollbar Control Logic). In order to achieve this, the overflow property of the Container Block is set to auto.
The height (300px) and width (400px) of the Container Block has been intentionally specified in absolute values (px), to facilitate calculations and comparisons. These values are arbitrary, but selected to be smaller than those of the Screen (aka Peep-Hole), to avoid any interference from the Browser's Default Scrollbars.
The liner block - #test, - inserted inside Container Block is used to test the the Vertical & Horizontal Integrity of the #container (i.e. the height and width calculations used in Scrollbar Logic for each Browser).
Results of each experiment have been documented in a tabular format, with links to pertinent details, such as the test page code and screen shots, as applicable.
Side Note....
To some, testing the div element may sound trivial or insignificant (then, consider them just as "warm-up exercises"), but to me it is the out most importance. You may aggree with me when (and if) you read the ................
-
BODY - 100% ≠ 100% !
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).
The Liner Block - #test was inserted inside body element. The experiments were conducted by varying the height and width of #test, while observing the behavior of the Browsers Default Scrollbars.
In order to be able to follow the same model, the first step was to establish absolute values for the height and width (in px) for the body element to be used as benchmarks in the experiments. However, the absolute values of height and width of the body element are moving targets and will depend on to many variables - from screen resolution to browser settings to user habits. Consequently, with the need to "freeze" the Screeen (i.e. Peep-Hole), we used a screen resolution of 800x600 - without the annoying "side bar" jazz, and varied the height and width independently and incrementally for each browser to arrive at the "magical" combination for each.
Results of each experiment have been documented in a tabular format, with links to pertinent details, such as the test page code and screen shots, as applicable.
Methodology
Each test page used in these experiments are:
- Stand-alone with an Internal Style Sheet
- In the Standards Mode (XHTML 1.0 Transitional)
Again, we used some of my "simple-minded tricks" in these experiments:
- Assigning a background color to each element used - including the html to facilitate positive identification
- Using the CSS styling also to Normalize the body and the html elements (i.e. strips them of their Browser given privileges), as discussed in detail in Privileged Ones. This becomes a critical issue for this set of experiments, since the Browser given privileges - with or without the explicit blessings of W3C, will create a chase-the-tail condition.
When this study originaly started sometime ago, the following browsers/versions were used, since they were the most current versions at that time:
- Internet Explorer 6.0
- Mozilla 1.7
- Netscape 7.1
- Opera 7.54
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:
- Internet Explorer 7.0
- FireFox 1.5
- Netscape 8.1
- Opera 9.01
The results did not show any significant differences, with the exception of the following:
- Transition from Mozilla to FireFox showed a differnce in Vertical Integrity. Consequently, the the results of these experiments with Mozilla were also included.
- The experiments conducted with Opera 7.54 show some "weird" phenomena. This may possible be the first citing of the Bottom Band Syndrome caused by the monstrosity I named the Phantom of Opera. Even though this led to the discovery this monstrosity, it does not pertain to the subject matter of this study. Consequently, the results of experiments with Opera 7.54 are not given.
- Otherwise, the results presented pertain to the most recent versions of the browsers as listed ealier.
Next Step
I will suggest that you take a close look at these experiments, and their results:
- DIV's - 100% ≠ 100% ! www.web-zonez.com/screen/100/div/index.html
- BODY - 100% ≠ 100% ! www.web-zonez.com/screen/100/body/index.html
However, should you decide take my word (... Now, that is dangerous!), you can proceed to Part 3 of this article, to review the overall results in a summary format. www.web-zonez.com/screen/100/1003.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
|
