100% ≠ 100%?
Overview Article
Part 3 - As the Stomach Turns....

The results of the experiments for both the div and the body elements, when used as the Container Block are almost a carbon copy for each Browser tested. Consquently, the results have been summarized a single comparison table:

Element VERTICAL INTEGRITY
(Height Calculation)		 HORIZONTAL INTEGRITY
(Width Calculation)
IExplorer
7.0 		DIV

Does Not compensate for the presence of the Horizontal Scrollbar.
As a result, the Vertical Scrollbar prematurely activated.

Does Not compensate for the presence of the Vertical Scrollbar.
As a result, the Horizontal Scrollbar is prematurely activated.

BODY

Does Not compensate for the presence of the Horizontal Scrollbar.
As a result, the Vertical Scrollbar prematurely activated.

Special Case!
The Defafult Vertical Scrollbar is permanent.

 
Mozilla
1.72 		DIV

Does Not compensate for the presence of the Horizontal Scrollbar.
As a result, the Horizontal Scrollbar is Superimposed on the bottom 19px of contents.

Does compensate for the presence of the Vertical Scrollbar.
A RARE FIND!

BODY

Does Not compensate for the presence of the Horizontal Scrollbar.
As a result, the Horizontal Scrollbar is Superimposed on the bottom 19px of contents.

Does compensate for the presence of the Vertical Scrollbar.
A RARE FIND!

 
FireFox
1.5 		DIV

Does Not compensate for the presence of the Horizontal Scrollbar.
As a result, the Vertical Scrollbar prematurely activated.

Does compensate for the presence of the Vertical Scrollbar.
A RARE FIND!

BODY

Does Not compensate for the presence of the Horizontal Scrollbar.
As a result, the Vertical Scrollbar prematurely activated.

Does compensate for the presence of the Vertical Scrollbar.
A RARE FIND!

 
Netscape
8.1 		DIV

Does Not compensate for the presence of the Horizontal Scrollbar.
As a result, the Horizontal Scrollbar is Superimposed on the bottom 19px of contents.

Does compensate for the presence of the Vertical Scrollbar.
A RARE FIND!

BODY

Does Not compensate for the presence of the Horizontal Scrollbar.
As a result, the Horizontal Scrollbar is Superimposed on the bottom 19px of contents.

Does compensate for the presence of the Vertical Scrollbar.
A RARE FIND!

 
Opera
9.01 		DIV

Does Not compensate for the presence of the Horizontal Scrollbar.
As a result, the Vertical Scrollbar prematurely activated.

Does Not compensate for the presence of the Vertical Scrollbar.
As a result, the Vertical Scrollbar is Superimposed on the right 17px of contents.

BODY

Does Not compensate for the presence of the Horizontal Scrollbar.
As a result, the Vertical Scrollbar prematurely activated.

Does Not compensate for the presence of the Vertical Scrollbar.
As a result, the Vertical Scrollbar is Superimposed on the right 17px of contents.

Conclusions: Alka  Seltzer Time!

The logic (or the illogic) - based on the height/width calculations, used by these browsers to activate and control the scrollbar(s) are totally Bizarre!, to say the least.

However, let's put our "scientist hat" back on and try to analyze the results objectively, starting with the rather "straight-forward" ones:

  1. Each Browser tested uses the same set of "control calculations/logic" to control the Scrollbars of the div element and the Default Scrollbars.However, the logic used by each of the Browsers studied to control the Vertical Scrollbar is not the same as the one used for the Horizontal Scrollbar, the only exception being the Internet Explorer.
  2. For any given Browser, the Thickness of the Scrollbars for the div element are the same as those of the Default Scrollbars. Furthermore, the Thickness of the Vertical Scrollbar is equal to that of the the Horizontal Scrollbar, namely:
    • Internet Explorer & Opera: 17px
    • Mozilla, FireFox & Netscape: 19px

Proceeding on to the more complicated "Scrollbar Control" related considerations, we also clearly see three different patterns:

  1. Self Adjusting:
    The calculations made to determine the height and/or width of the area available for the Liner block takes into consideration the presence (or absence) of each scrollbar individually. And, consequently, 100% height/width settings for the Liner Block become self-adjusting. An illustration of this would be that a 100% width setting for the Liner Block would result in:
    • If the Vertical Scrollbar is absent:
      Width of Liner Block (in px) = Width of the Container Block (in px).
    • If the Vertical Scrollbar is present:
      Width of Liner Block (in px) = Width of the Container Block) minus (Thickness of the Vertical Scrollbar)] (in px)
    Obviously, this is the Correct Method, but, sadly, is only valid for:
    • Mozilla: Horizontal Integrity (Width Calculations)
    • FireFox: Horizontal Integrity (Width Calculations)
    • Netscape: Horizontal Integrity (Width Calculations)
  2. Over Compensation:
    The calculations made to determine the height and/or width of the area available for the Liner block is based on the absolute values of the Liner Block is being equal to that of the Container Block at all times. When a Scrollbar is present, the Thickness that scrollbar scrollbar is tacked on the height/width of the Liner Block individually. And, consequently, the other scrollbar of the Container Block is activated prematurely. An illustration of this would be that a 100% width setting for the Liner Block would result in:
    • If the Vertical Scrollbar is absent:
      Width of Liner Block (in px) = Width of the Container Block (in px).
    • If the Vertical Scrollbar is present:
      Width of Liner Block (in px) = [(Width of the Container Block) plus (Thickness of the Vertical Scrollbar)] (in px)
    Obviously, and again sadly, this is just a Band-Aid, used by all the browser studied, extensively:
    • IExplorer: Horizontal Integrity (Width Calculations)
    • IExplorer: Vertical Integrity (Height Calculations)
    • FireFox: Vertical Integrity (Height Calculations)
    • Opera: Vertical Integrity (Height Calculations)
  3. Under Compensation - Dead Zone:
    The calculations made to determine the height and/or width of the area available for the Liner block is based on the absolute values of the Liner Block is being equal to that of the Container Block at all times. When a Scrollbar is present no action is taken. The other scrollbar is only activated when the height/width of the Liner Block exceedes that of the Container Block at least by 1 px. And, consequently, the scrollbar of the Container Block is superimposed on its contents, thus creating a "Dead Zone" equal to the Thickness of the scrollbar of that particular browser. An illustration of this would be that a 100% width setting for the Liner Block would result in:
    • If the Vertical Scrollbar is absent:
      Width of Liner Block (in px) = Width of the Container Block (in px).
    • If the Vertical Scrollbar is present:
      Width of Liner Block (in px) = Width of the Container Block (in px)
    The Dead Zone, however, tops all: It is The "Golden Absurdity Award!" And, the winners are:
    • Mozilla: Vertical Integrity (Height Calculations)
    • Netscape: Vertical Integrity (Height Calculations)
    • Opera: Horizontal Integrity (Width Calculations)

Special Case - IExplorer....

It is a very well known fact that the Default Vertical Scrollbar is ever-present, whether its active or not.

This is a deliberate Band-Aid ("Patch" as MS likes to call them) to avoid premature activation of the Default Horizontal Scrollbar, due to Over Compensation as discussed earlier.

This "Patch" can be Un-Done, and this ever-present Default Vertical Scrollbar can be removed easily and legally (i.e. without any hacks)!
« Reference: The Disappearing Act » www.web-zonez.com/screen/100/dis1.html

Dead Zone - Band-Aids:

At the present, the only remedy to the Dead Zone problem (i.e. "illegal clipping") I can offer, is no more than a band-aid:

The Poison Pill:

When it comes to the div element, there is another option that will remedy all of the above, as distasteful as it may be:
» Setting the "overflow" property to 'scroll'.

However, this is not even an option, when the body element is used as the Container Block, since the Default Scrollbar control and behavior varies greatly from Browser to Browser.
« Reference: Scrolin' Along... » www.web-zonez.com/screen/scroll/index.html

Bottom Line

Besides the Poison Pill for the div element, I can not come up with any other imaginative solution. However, it does mean that somebody out there may not! If you do, please let me know using the Feed-Back Form.

Obviously, the real solution lies with the browsers. They are the only ones who can correct this Fundamental Flaw. However, I do not think that it is a surmountable task, neither will it require a brain surgery. Just to illustrate this point, I put together a rather simple and non-language specific logic for review in Just A Bite of Logic. www.web-zonez.com/screen/100/1004.html

Moving Along...

If you have have had enough with this topic - contents of which are listed in the Auxiliary Panel on the left, you may want to consider looking into (if you have not already done so) the other main topics of this section:

On the other hand, you can also take a short-cut and go to the overall summary of this entire section at Screen Mysteries. www.web-zonez.com/screen/index.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