15388 - {css2} 'bottom' and 'right' don't work for absolutely positioned DIV

Status: VERIFIED FIXED

(Core :: CSS Parsing and Computation, defect, P3)

Description

[Ian Graham]

The bottom: and right: properties don't seem to work
properly (M9 on WIn 98), as illustrated in the test
URL -- and as implied by my understanding of CSS 2
Sections 9.3.2, 10.3.7 and 10.6.4.

THe document has an absolutely positioned div containing
4 absolutely positioned divs. These are 45% wide and
positioned, using top:0, left:0, bottom:0 and right:0
to the four corners of the containing element.

It should look like:

 ----------------------------
 |Top/left         Top/right|
 |                          |
 |                          |
 |                          |
 |                          |
 |                          |
 |                          |
 |Bot/left         Bot/right|
 ----------------------------

But -- they don't go there.  instead the bottom: parts
are positioned outside the containing element, and
right: doesn't seem to work at all -- everything gets
pushed to the left margin of the containing div.

Comment 1

[troy]

There are two issues involved in this bug:
1. my 'right' isn't work as you expect. What Gecko is doing is correct, although
the reason why is probably not obvious.

See section 10.3.7 of the CSS2 spec where it describes how absolutely positioned
non-replaced elements work.

Basically the values are over constrained and so the value for 'right' is
ignored (see rule #7). And because 'left' defaults to 'auto', rule #1 as well.

That whole section of the spec is messy and not very intuitive.

You can get the behavior you expect by adding a 'margin-left: auto' rule as
well. Make it look like this:

.topright { top:        0;
            right:       0;
            margin-left: auto;
            width:      45%;
            position:   absolute;
            background: white;     }

Do that for '.botright' as well

2. the other issue is the two nested DIV elements are being positioned below the
containing DIV.

That's a bug in Gecko that I need to fix (the same problem as in bug #15408).

Comment 2

[Ian Graham]

Great -- two bugs turn into one :-)

I've reread 10.3.7 and agree with you about the 'right' property
and overspecification of the width equation -- although it is decidedly
non-intuitive, as you note. Thanks for the clarification.

Comment 3

[troy]

You're not going to be real happy with the way this looks, but I've fixed the
basic problem. The issue was containing blocks with a specified 'height' of
'auto'. Ian probably remembers this from a test case he submitted. The
difference was in his test case the containing block was relatively positioned

Ignoring the previous issue of 'margin-left', the page still doesn't display the
way you would like.

There are two reasons:
1. you'll probably notice that the height of TOP/left and TOP/right are large.
Unfortunately that's how the CSS2 spec says it should work for a 'height' of
'auto'. See 10.6.4 for the details, but basically the height gets set to the
containing block height

I really dislike the way this part of the spec is defined

2. BOT/left and BOT/right are getting positioned at the very bottom of the
containing block and hence aren't visible. The reason that happens is because
they have a default 'top' value of 'auto' and hence get put where their in flow
position would have been. That's right down at the end of the containing block

If you add some <BR> tags below them (see my attachment which is your example
modified slightly), then they do display

Comment 4

[troy]

Attachment: Your example modified so BOT/left and BOT/right display

Comment 5

[Ian Graham]

I share your feelings for 10.6.4 .....

In fiddling with the example I found another odd example --
which I _believe_ produces correct rendering, and which might
 make a goodtest case. This is found at:

http://smaug.java.utoronto.ca/NS5-bugs/abs-test2.html

Note how the bottom/left box is on top of the top/left
box (which is of height:auto) -- the extra thick border
of the top/left box make the bottom/left box fit inside
the right edge of the top/left one, verifying that the
top/left box height is that of the parent.

However, I've re-read 10.6.4 three times now, and I'm still
not convinced that the bottom/left box (which has no specified
top: value, and thus should have top:auto) is in the correct
location....

Comment 6

[Christine Hoffman]

Verified fixed

Comment 7

[Hixie (not reading bugmail)]

Migrating from {css2} to css2 keyword. The {css1}, {css2}, {css3} and {css-moz}
radars should now be considered deprecated in favour of keywords.
I am *really* sorry about the spam...