- From: C. Bottelier <c.bottelier@iradis.org>
- Date: Sun, 30 Jun 2002 15:49:48 +0200
- To: www-style@w3.org
Consider the following HTML and style sheet:
<body id="body">
<div id="div1">
<p id="p1">
<img id="img1">
<img id="img2" style="position:absolute; right:0.6em">
<span id="em1">text</span>
</p>
</div>
</body>
Both images have a height of 100px and both their width is less than half
of the screen / C.B. of HTML.
Following section 10.1 the C.B. of img2 is established by the nearest
parent with position other then 'static'. Or when no parent could be found
the initial C.B. This gives the following table:
For box generated by C.B. is established by
-------------------------------------------
body initial C.B.
div1 body
p1 div1
img1 p1
img2 initial C.B.
em1 p1
Following section 9.7 the position : absolute forces display : block and
therefore following section 9.4.1 and 9.6 it has no impact on later
siblings, do not flow and therefore may obscure other elements like em1.
To determine it rendering position within the initial C.B. (say 0,0 ->
780,540) and the image is 150x100 pixels and 0.6em equals 12 pixels for the
current font, the tops of p1, div1, and img1 are at 0.
We follow section 10.3.8 (and 10.3.7) for the horizontal position
1. Width is auto so width becomes 150px
2. left is set to something below 780-150-12 pixels.
3. Nothing done
4. Nothing done
5. Margin-left = margin-right = i.e. 0px
6. Nothing done
7. over-constrained:
left = _initCBright_ - width - right - margins - padding
left = 780 - 150 - 12 - (0 + 0) - (0 + 0) = 618
So the image is painted between pixel 618 and 768 on the screen
We follow section 10.6.5 (and 10.6.4) for the horizontal position
1. height is set to 100px
2. pronlem here on what the hypothetical box would heve been
if position was left static. Multiple posibilities here or
at least a differance in intepretation of the specs between:
me (Christian Bottelier), Opera, IE, ...;
and Boris Zbarsky with Mozilla.
First intrepetation would be:
- Take the top as if the position would not have been absolute
so we take the C.B. of p1 being 0px. (Section 10.6.5 literal)
- Take the top as if the position would not have been absolute
so that the image would be still inline and would have been
positioned next the img1 top being 0px. (Section 10.6.5
free interpretation of the as it would been static so the
image would not have been forced block but was still in-line)
- Since the display property is forced block we take the
bottom of img1 as the top for img2. (?Ignore? section 10.6.5
substitution 2 because it is overruled by the display
being block so align using the rules in section 9.4.1)
Interpretation 1 and 2 give:
+-body C.B.--------------------------+
|+-div1 C.B.------------------------+|
||+-img1 C.B.---+----+-img2 C.B.---+||
||| | | |||
||| | | |||
||+-------------+----+-------------+||
|+----------------------------------+|
+------------------------------------+
Interpretation 3 give:
+-body C.B.--------------------------+
|+-div1 C.B.------------------------+|
||+-img1 C.B.---+------------------+||
||| | |||
||| | |||
||+-------------+----+-img2 C.B.---+||
|+-------------------|-------------|+|
| | | |
| +-------------+ |
+------------------------------------+
These three interpretations all have something in them that would
made them more or less valid. To my opinion the first is the most plausible
according to Boris the third is.
No matter which of the interpretations is correct I think the CSS2 specs
need to be updated to clarify on the correct interpretation. And ofcouse I
(and Boris) want to know the correct interpretation.
Regards
Christian Bottelier
Received on Sunday, 30 June 2002 09:43:45 UTC