[CSS21] clarification needed for top and bottom property

Consider the following example:

    <div style="position: absolute;">
      <div style="position: relative; top: +50%; left: +50%;">
        Some<br>
        content
      </div>
    </div>

See also
    http://inigent.se/test/test-top-percentage.html
with the two DIVs styled in color as:
    div { border: 1px solid green; }
    div div { border: 1px dotted red; }

DESCRIPTION OF EXAMPLE

The two DIVs' sizes will both be based on the size of "Some 
content" and as the outer DIV is positioned it establishes a
positioning context. Following the spec, expectation is that
the inner DIV will be positioned down and right of the outer 
DIV according to the specified percentages. 

OUTCOME

In standard browsers only the right shift happens and the
|top| percentage setting is ignored.
(Notably, IE performs the shift in both directions).

CURRENT SPEC

There are probably good reasons why UAs have chosen to do like 
this, but it cannot be deciphered from the current spec, see
text for |top| property in 9.3.2:
    http://www.w3.org/TR/CSS21/visuren.html#propdef-top
    Percentages: refer to height of containing block
    ...
    The values for the four properties have the following 
    meanings:
    ...
    <percentage> 
    The offset is a percentage of the containing block's width 
    (for 'left' or 'right') or height (for 'top' and 'bottom').

As can be seen there is no mention that percentage-based 
positioning is ignored when the containing block's size is 
dependent on the current element.

Contrast this with the |height| property which is also ignored
when assigned a percentage with a dependent containing block
in 10.5 (important part marked with *):
    http://www.w3.org/TR/CSS21/visudet.html#the-height-property
    Percentages: see prose
    ...
    Values have the following meanings:
    ...
    <percentage> 
    Specifies a percentage height. The percentage is calculated 
    with respect to the height of the generated box's 
*   containing block. If the height of the containing block is 
*   not specified explicitly (i.e., it depends on content 
*   height), and this element is not absolutely positioned, the 
*   value computes to 'auto'. 

CLARIFICATION

So, if UAs are correct in honoring the |left| property but not 
the |top| property in this example, this could be clarified in
9.3.2 by adding something like the following text to the 
"prose" section:
    <percentage> 
    The offset is a percentage of the containing block's width 
    (for 'left' or 'right') or height (for 'top' and 'bottom').
*   If the height of the containing block is not specified 
*   explicitly (i.e., it depends on content height), and this 
*   element is not absolutely positioned, the value for 'top'
*   and 'bottom' computes to 'auto'.

Best regards
Mike Wilson

Received on Thursday, 23 August 2007 14:41:13 UTC