100% ≠ 100%?
Overview Article
Part 1 - About This Study

Rather a bizzare title, is it not? But, as you will see, this topic itself, is rather bizzare!

This study is an investigation into the Control Logic used by different Browsers - based on their height/width calculations, to control (i.e. activate or de-activate) the Scrollbars, when the overflow property is set to auto.

Background

This topic, again, represents another subset of what I term as my "Chasing-The-Tail Experiments", that eventually led to the real experiments presented in Scrollin' Along... , which investigated behavior of the Browser Default Scrollbars as a function of the overflow property of both the html and the body elements. The reason why I termed them as such is due the fact that, I kept on chasing my tail due to interferences from other factors unrelated to the subject. As a result, I had to go back to square one and try to identify and isolate these UBO's. In the process I uncovered some skeltons in the closet. This is one of them!

Defining the Question

First, I should start by defining what I mean by 100%.

Based on the concept behind the auto value of the CSS "overflow" property, a container block with its overflow property set to auto, would be expected to behave as follows:

  1. The Horizontal and Vertical Scrollbar activation will be independent of each other.
  2. The Vertical Scrollbar will be activated only if the height of the contents exceed its own height.
  3. The Horizontal Scrollbar will be activated only if width of the contents exceed its own width.

Following the same general concept, let's take one more step and build a simple model:

Now we wouldn't we expect (or assume?) that the Liner Block will indeed act as liner that fits snugly inside the Container Block, regardless of the presence or absence of either Scrollbar or both.

If I have managed to confuse everyone without even trying (I seem to be very good at that), let me expand on this with the hopes of clarifying the issue.

Since the height and width of the Liner Block is set to 100%, its Actual Size, as calculated by the browsers, should be as follows:

Height of the Liner Block in absolute values (in px):

Width of the Liner Block in absolute values (in px):

That is what I mean by 100%!

A Second Opinion

At this point, let's see what W3C has to say on this matter:
CSS 2.1 refers to this subject under 11.1.1 "Overflow: the 'overflow' property":

...."In the case of a scrollbar being placed on an edge of the element's box, it should be inserted between the inner border edge and the outer padding edge. Any space taken up by the scrollbars should be subtracted from the computed width/height, thus preserving the inner border edge.".....
»  Reference Date:  Jan 03, 2007 http://www.w3.org/TR/CSS21/visufx.html#overflow

Since then, it appears that this wording has been revised, true to W3C reputation, to make it even more ambigious:

...."In the case of a scrollbar being placed on an edge of the element's box, it should be inserted between the inner border edge and the outer padding edge. The space taken up by the scrollbars affects the computation of the dimensions in the rendering model. "
»  Reference Date:  July 07, 2007 http://www.w3.org/TR/CSS21/visufx.html#overflow

Before this revision, I thought that is what W3C meant too! But, now I am utterly at a loss as to what the underlying intend and/or motivation of W3C for this revision!

Perhaps, someone can translate this to plain English, or Spanish, or Portugese, or French, or Turkish, or even German! Perhaps, then I may be able to understand it.

Next Step

Having defined the question (hopefully!), we can start with our investigation to see if the browsers do what they are supposed (expected/assumed) to do!

In the Part 2 of this study, we will discuss the Test Criteria and Methodology formulated to conduct this investigation, as well as the outlining the two sets of experiments conducted. www.web-zonez.com/screen/100/1002.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