100% ≠ 100% ?
Container Block: Div Element
Part 2 -
Sanity Check
Towards this end, I will follow one of my old rules:
When in doubt, measure it out!
The easiest, and simplest way to make an accurate measurement in this case is utilize vertical/horizontal bars (in the form of DIV's) for respective testing, to ascertain if any Dead Zone ("illegal clipping") has occured or not.
However, it should be noted that the Thickness of 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 #container - 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 other "measuring bar" at 1px intervals, as a reality-check:
- Scrollbar Thickness Verifier - Scrollbar Adjustment: 18px
- Scrollbar Thickness Verifier - Scrollbar Adjustment: 20px
Vertical Integrity
Inside #test, the five vertical measure bars (DIVs), each with different background colors and heights, were inserted:
- Dark Blue - Height: 300px (Scrollbar Adjustment: 0px)
- Medium Blue - Height: 283px (Scrollbar Adjustment: 17px)
- Purple - Height: 282px (Scrollbar Adjustment: 18px)
- Dark Red - Height: 281px (Scrollbar Adjustment: 19px)
- Dark Yellow/Green - Height: 280px (Scrollbar Adjustment: 20px)
Step 1:
The Logic Behind....
With the inclusion of the measure bar (width=300px) in #test, the width setting (100%) of #test will be effectively overriden. As a result, we would expect that the Vertical Scrollbar of #container will be acivated.
| IExplorer | Mozilla | FireFox | Netscape | Opera |
Observations:
- It is clear that, there is a Dead Zone (i.e. "illegal clipping") of bottom 19px in Mozilla and Netscape.
- It appears that with the release of FireFox, replacing Mozilla, this problem has been fixed, but only at the expense of activating the Vertical Scrollbar prematurely.
- It is suprising that Netscape, also based on recent version of Mozilla, still has this problem.
Step 2:
To verify that the "disappearing pixels" of the Dead Zone are actuallly caused by the Horizontal Scrollbar being superimposed on the content of #container, we can set the width of #test equal to that of #container (400px), to eliminate the Horizontal Scrollbar. Again, the same vertical measure bars (DIVs) were retained inside #test.
| IExplorer | Mozilla | FireFox | Netscape | Opera |
Observations:
- Well, here is the proof! The Dead Zone is, indeed, caused by the Horizontal Scrollbar of Mozilla and Netscape being superimposed on the bottom 19px of #test.
On the way to Opera Buffa....
It should be noted that the Vertical Scrollbar of Opera is still present, but inactive. At this point, I will not even venture to offer a guess. As they say: ..."Moving right along!"
Step 3:
Even though it simply defeats the purpose, let's demonstrate the fact that changing the value of the overflow property of #container from 'auto' to 'scroll' will cure this Fundamental Flaw of Mozilla and Netscape - "Disappearing Pixels" of the Dead Zone:
| IExplorer | Mozilla | FireFox | Netscape | Opera |
Horizontal Integrity
Again, we can parallel the logic behind, and steps of Vertical Integrity testing, starting with original configuration of the test file and by inserting five different horizontal "measure" bars (DIVs), each with different background colors and heights, were inserted inside #test:
- Dark Blue - Width: 400px (Scrollbar Adjustment: 0px)
- Medium Blue - Width: 383px (Scrollbar Adjustment: 17px)
- Purple - Width: 382px (Scrollbar Adjustment: 18px)
- Dark Red - Width: 381px (Scrollbar Adjustment: 19px)
- Dark Yellow/Green - Width: 380px (Scrollbar Adjustment: 20px)
Step 1:
| IExplorer | Mozilla | FireFox | Netscape | Opera |
Step 2:
To verify that the "dissapearing pixels" of the Dead Zone are actuallly caused by the Vertical Scrollbar of Opera being superimposed on the content of #container, we can set the height of #test equal to that of #container (300px), to eliminate the Vertical Scrollbar. Again, the same horizontal measure bars (DIVs) were retained inside #test.
| IExplorer | Mozilla | FireFox | Netscape | Opera |
Observations:
- As expected! The Dead Zone is caused by the Vertical Scrollbar of Opera being superimposed on the right 17px of #test.
Step 3:
Again, let's demonstrate the fact that, changing the value of the overflow property of #container from 'auto' to 'scroll' will cure this Fundamental Flaw of Opera:
| IExplorer | Mozilla | FireFox | Netscape | Opera |
Side Note....
These experiments also clearly showed that the Thickness of both the Vertical & HorizontalScrollbars of the div element are the same for a given Browser, as follows:
- Mozilla/Firefox & Netscape: 19px
- Internet Explorer & Opera: 17px
Next Step
Now that we have seen clearly how the browsers miscalculate the height/width to control the Scrollbars of the div element, I invite you to check out the experiments conducted in the same fashion, using the body element as the Container Block. I am sure, most of you having humored me by going over the DIV experiments, are anxious to get to the meat of the matter. (After all, the div element is just a peon, while the body element is a privileged one! )
By the way, the experiments associated with the body element are presented in BODY Experiments - 100% ≠ 100%! www.web-zonez/screen/100/body
- 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
|
