424701 - CSS bug for absolute position (top, left, right) align on html element that has a margin, padding or border

Status: RESOLVED FIXED

(Core :: Layout, defect)

Description

[Alexandre Alapetite]

User-Agent:       Opera/9.26 (Windows NT 6.0; U; fr)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9b4) Gecko/2008030714 Firefox/3.0b4

(Buggy) behaviour new to Firefox 3 (tested with 3.0b4 and current pre-beta 5).

Firefox 2, Safari 3.1, Opera 9.5b, WebKit r31232, and my reading of CSS 2.1 specification all agree, but Firefox 3 does not seem to do proper absolute positioning (top, left, right) when the html element has a margin, padding or border.
See http://alexandre.alapetite.net/divers/vrac/20080323-absolute-align-html-element.html for a test.

Reproducible: Always

Steps to Reproduce:
http://alexandre.alapetite.net/divers/vrac/20080323-absolute-align-html-element.html
1. An XHTML document with a html element that has a CSS rule containing a margin, padding or border.
2. Any block element with position:absolute and aligned with top, left or right.
Actual Results:  
The element with position:absolute and top, left or right seem to be aligned on html's outer edge, instead of padding edge as per specification.

Expected Results:  
http://alexandre.alapetite.net/divers/vrac/20080323-absolute-align-html-element.png

The element with position:absolute and top, left or right should be aligned on html's padding edge as per specification:

CSS 2.1, §9.3.2 "For absolutely positioned elements whose containing block is based on a block-level element, this property is an offset from the padding edge of that element".
http://www.w3.org/TR/CSS21/visuren.html#position-props

Comment 1

[Steve England [:stevee]]

Attachment: testcase from reporter's URL

Comment 2

[Steve England [:stevee]]

Attachment: Expected rendering (?)

Comment 3

[Alexandre Alapetite]

Sorry, I think the proposed reference rendering (Safari 3.1, Opera 9.5b, WebKit r31232) is possibly bogus as well...

Anyway, there is currently an inconsistency between the alignment on the right, versus left and top: Firefox 3 currently seems to align block elements (position:absolute) top and left on the border edge of the html element, while right alignment seems to be done on outer edge.

Comment 4

[philippe (part-time)]

see http://www.w3.org/TR/CSS21/visudet.html#containing-block-details
The rendering in WebKit and Opera is correct

dupe of bug 243519 ?

Comment 5

[Alexandre Alapetite]

"right" align has a problem, as shown above, but very same issue is apparently also affecting "bottom" align ("top" and "left" seem fine in this regard). I have updated (and simplified) the test case to illustrate the "bottom" issue:
http://alexandre.alapetite.net/divers/vrac/20080323-absolute-align-html-element.html

Comment 6

[VR]

I have another example of this bug.  It does not appear in Firefox 2, Safari, or IE...

Notice the "Newsletter" header.  It has position:absolute and a negative margin set to place it.

http://venicenutrition.com/newsletter/default.aspx

Comment 7

[Daniel.S]

(In reply to comment #4)
> see http://www.w3.org/TR/CSS21/visudet.html#containing-block-details
> The rendering in WebKit and Opera is correct
> 
> dupe of bug 243519 ?

Yes, this bug was fixed when 243519 was fixed.