100% ≠ 100% ?
Container Block: Body Element
Part 2 -
Sanity Check
Again, to ascertain if any Dead Zone ("illegal clipping") is occuring or not, I will follow one of my old rules:
When in doubt, measure it out!
To follow the same model used in the experiments of DIV Experiments, the first step will be to establish absolute values for the height and width (in px) for the body element to be used as benchmarks in the experiments.
However, in those experiments, this was rather easy, since we could arbitrarily set them for #container. 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 of #test independently and incrementally for each browser to arrive at the "magical" combination for each:
| IExplorer | Mozilla | FireFox | Netscape | Opera |
Please note that....
If you would like to dublicate the results shown in this study on your own, more than probably you will have to start with tweaking the height and width values shown above, to represent your particular setup.
Now that we have established some absolute values for the body element, we will again proceed using my Old Rule:
When in doubt, measure it out!
However, it should be noted that the Thickness of the Dafault Scrollbars are:
- Mozilla/Firefox & Netscape: 19px
- Internet Explorer & Opera: 17px
Taking this into consideration, we will need minimum of three "measuring bars":
- Actual Height/Width of body - Scrollbar Adjustment: 0px
- Height/Width available for #test - Scrollbar Adjustment: 17px
- Height/Width available for #test - Scrollbar Adjustment: 19px
In addition, just to verify that the Thickness of the Scrollbars noted above are correct, we will add two more "measuring bar" at 1px intervals, as a reality-check:
- Scrollbar Thickness Verifier - Scrollbar Adjustment: 18px
- Scrollbar Thickness Verifier - Scrollbar Adjustment: 20px
Vertical Integrity
We will start with setting the width of #test to 120% to force the Horizontal Scrollbar, while keeping the height at 100%. Then, inside #test, we will insert five different vertical measure bars (DIVs) for each Browser tested, each with different background color and height, as follows:
| Measure Bars | IExplorer | Mozilla | FireFox | Netscape | Opera | Offset |
| Dark Blue | 398px | 389px | 436px | 408px | 461px | -0px |
| Medium Blue | 381px | 372px | 419px | 391px | 444px | -17px |
| Purple | 380px | 371px | 418px | 390px | 443px | -18px |
| Dark Red | 379px | 370px | 417px | 389px | 442px | -19px |
| Dark Yellow | 378px | 369px | 416px | 388px | 441px | -20px |
Step 1:
| IExplorer | Mozilla | FireFox | Netscape | Opera |
Observations:
- As it was the case with the results of experiments covered in DIV Experiments, the Vertical Scrollbars of Mozilla and Netscape were not activated and the bottom 19 pixels disappeared into the Dead Zone for these browsers.
- However, there is a twist in the case of the body element. The page is still scrollable for these two browsers, by using the arrow keys or the mouse wheel.
Please note that....
This Vertical Scrollability via arrow keys is due to the browser given privileges of - or, shall we say a "Fundemental Flaw" in, the body element in the case of these browsers.
This subject has been investigated in depth separately, with the experiments conducted and the results obtained presented in Scrollin' Along...
Step 2:
Let's verify that the "disappearing pixels" of the Dead Zone are actuallly caused by the Horizontal Scrollbar being superimposed on the content of body, by setting the width of #test back to 100%. Again, the same vertical measure bars (DIVs) were retained inside #test.
| IExplorer | Mozilla | FireFox | Netscape | Opera |
Observations:
- Well, here is the proof! As it was the case with the results of experiments covered in DIV Experiments, the Dead Zone is again caused by the Horizontal Scrollbar of Mozilla and Netscape being superimposed on the bottom 19px of #test.
Horizontal Integrity
Similarly,we will start with setting the height of #test to 120% to force the Vertical Scrollbar (except for Internet Explorer, as the Vertical Scrollbar is ever-present), while keeping the height at 100%. Similarly, five different horizontal measure bars (DIVs), each with different background colors and widths for each Browser, were inserted inside #test, as follows:
| Measure Bars | IExplorer | Mozilla | FireFox | Netscape | Opera | Offset |
| Dark Blue | 796px | 798px | 800px | 800px | 794px | -0px |
| Medium Blue | 779px | 781px | 783px | 783px | 777px | -17px |
| Purple | 778px | 780px | 782px | 782px | 776px | -18px |
| Dark Red | 777px | 779px | 781px | 781px | 775px | -19px |
| Dark Yellow | 776px | 778px | 780px | 780px | 774px | -20px |
Step 1:
| IExplorer | Mozilla | FireFox | Netscape | Opera |
Observations:
- As it was the case with the results of experiments covered in DIV Experiments, the Vertical Scrollbar of Opera wwas not activated and the right 17 pixels disappeared into the Dead Zone.
- However, there is a twist in the case of the body element. The page is still scrollable horizontally, by using the arrow keys.
Please note that....
Similarly, this Horizontal Scrollability via arrow keys is due to the browser given privileges of - or, shall we say a "Fundemental Flaw" in, the body element in the case of Opera.
This subject has been investigated in depth separately, with the experiments conducted and the results obtained presented in Scrollin' Along...
Step 2:
As we done before, we will attempt to verify that the "dissapearing pixels" of the Dead Zone are actuallly caused by the Vertical Scrollbar being superimposed on the content of body, by setting the width of #test to 100%.
| IExplorer | Mozilla | FireFox | Netscape | Opera |
Observations:
- Well, here is the proof! As it was the case with the results of experiments covered in DIV Experiments, the Dead Zone is again caused by the Vertical Scrollbar of Opera being superimposed on the right 17px of #test.
Next Step
Now that we have seen clearly how the browsers miscalculate the height/width to control the Scrollbars of not only the div element (just a peon), but also the body element (a privileged one), I invite you return to return to Part 3 of the overview article on this topic, to review the discussion of results and the consequent conclusions. 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
|
| Preliminary |
|
