No browser supports CSS2 / position:absolute?

[Peter Pfannenschmid]

Hello experts,

I would be very grateful if you would have a look at the following
URL:

http://www.omeganet.de/test.html

The html file and the associated style have been validated
successfully by the online validators of w3.org.

In my opinion, the word "ABSOLUTE" should appear within the blue
frame, 10 pixels from the left side of the blue frame.

According to the CSS 2.1 reference on w3.org regarding the
"position:absolute" style: "The box's position (and possibly size) is
specified with the 'top', 'right', 'bottom', and 'left' properties.
These properties specify offsets with respect to the box's containing
block.".

Since the div containing the word "ABSOLUTE" is placed within the div
with the blue frame, the div with the blue frame is the containing
block, right? So why is the word "ABSOLUTE" placed 10 pixels left from
the _browser_ window, which is completely wrong?

I get this behaviour in the latest versions of IE, Firefox, Mozilla
and Opera, so I suspect the error is on my side although I have read
the specs multiple times.

Thanks for your help

Peter

[Brian]

Peter Pfannenschmid wrote:

http://www.omeganet.de/test.html

In my opinion, the word "ABSOLUTE" should appear within the blue
frame, 10 pixels from the left side of the blue frame.

According to the CSS 2.1 reference on w3.org regarding the
"position:absolute" style: "The box's position (and possibly size) is
specified with the 'top', 'right', 'bottom', and 'left' properties.
These properties specify offsets with respect to the box's containing
block.".

Since the div containing the word "ABSOLUTE" is placed within the div
with the blue frame, the div with the blue frame is the containing
block, right?

Not necessarily. The containing box is the most immediate ancestor box
whose position is not static. If there is no such box, the containing
box is the window.

--
Brian

[mscir]

Peter Pfannenschmid wrote:

Hello experts,
I would be very grateful if you would have a look at the following
URL: http://www.omeganet.de/test.html <snip> In my opinion, the word "ABSOLUTE" should appear within the blue
frame, 10 pixels from the left side of the blue frame.

<div style="position:relative; left:10px;">ABSOLUTE</div>

or

div.FrameBlue { border-color:#0000FF; border-width:1px;
border-style:solid; padding-top:4pt; padding-bottom:4pt; position:
relative }

http://www.juicystudio.com/tutorial/css/fixed.asp

Absolute Position

When an element is positioned absolutely, it is removed from the normal
flow, and has no effect on other elements in the normal flow. The
element is portioned according to its container block using the offset
positions left, right, top, and bottom.

*** A containing block is an element with the position property set to
relative or fixed. If the element isn't inside a containing block, the
browser window will be the containing block. ***

Mike

[Gus Richter]

Peter Pfannenschmid wrote:

Hello experts,

I would be very grateful if you would have a look at the following
URL:

http://www.omeganet.de/test.html

The html file and the associated style have been validated
successfully by the online validators of w3.org.

In my opinion, the word "ABSOLUTE" should appear within the blue
frame, 10 pixels from the left side of the blue frame.

According to the CSS 2.1 reference on w3.org regarding the
"position:absolute" style: "The box's position (and possibly size) is
specified with the 'top', 'right', 'bottom', and 'left' properties.
These properties specify offsets with respect to the box's containing
block.".

Since the div containing the word "ABSOLUTE" is placed within the div
with the blue frame, the div with the blue frame is the containing
block, right? So why is the word "ABSOLUTE" placed 10 pixels left from
the _browser_ window, which is completely wrong?

I get this behaviour in the latest versions of IE, Firefox, Mozilla
and Opera, so I suspect the error is on my side although I have read
the specs multiple times.

Related to your question/problem, you should check out:
http://www.w3.org/TR/CSS21/visuren.h...ntaining-block
http://www.w3.org/TR/CSS21/visudet.h...-block-details

The 'Containing Block' is determined by the Positioning Property of both
the content element and that of the container block (nearest ancestor).

Rephrasing what has been said, the way that you have it now, the
'Containing Block' is the Viewport (initial containing block) since the
nearest ancestor to the Absolute Box is Static.

Add position:relative; in order to make FrameBlue the 'Containing
Block' for the Absolute Div and add padding:0; to remove your entered
padding amounts. The text in question will now be positioned as you want.

If you wish to have it bordered, then you will have to give FrameBlue
height, so add height:16px; (or whatever) to it and add width:100px;
(or whatever) to set the box width.

--
Gus

[Peter Pfannenschmid]

Gus Richter <gu********@netscape.net> wrote in message news:<bq********************@golden.net>...

Peter Pfannenschmid wrote:

Related to your question/problem, you should check out:
http://www.w3.org/TR/CSS21/visuren.h...ntaining-block
http://www.w3.org/TR/CSS21/visudet.h...-block-details

The 'Containing Block' is determined by the Positioning Property of both
the content element and that of the container block (nearest ancestor).

Rephrasing what has been said, the way that you have it now, the
'Containing Block' is the Viewport (initial containing block) since the
nearest ancestor to the Absolute Box is Static.

Add position:relative; in order to make FrameBlue the 'Containing
Block' for the Absolute Div and add padding:0; to remove your entered
padding amounts. The text in question will now be positioned as you want.

If you wish to have it bordered, then you will have to give FrameBlue
height, so add height:16px; (or whatever) to it and add width:100px;
(or whatever) to set the box width.

Dear Brian, mcir and Gus,

thank you very much for your fast and excellent advice. Indeed, I had
only read the passage where the first link mentioned by Gus points to,
but I had overlooked the passage where the second link points to.

Now I can continue my fight of converting a table-driven layout to a
CSS-driven one...

Yours sincerely,

Peter