16731 - {css2} absolutely positioned replaced elements stretched to container

Status: VERIFIED INVALID

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

Description

[Igor]

Using Milestone 10.

Two problems with the style sheet rendering--which seem to be the same problem:

The backgrounds for the frames do not render correctly.  The background for the
frame in the top left with the WICF logo extends beyond the border of this frame
continuing all the way to the right-hand side of the page.

Also the background for the other frames on the site--on this page the
navigation frame is a good example--fail to render in the correct color.  This
page displays correctly using IE 5.0 and should adhere to the CSS standard,
unless we missed something when we coded it up.

Comment 1

[Pierre Saslawsky]

Reassigning peterl's bugs to myself.

Comment 2

[Pierre Saslawsky]

The color is fine (or correct at least, I don't like the khaki very much).

The problem with the background comes from the absolute positionning of elements.
What we see is the white background of the WICF gif that extends to the right
border of the window. It's a bit related to Bug 12906 except that in this case,
the element is an image and according to
http://www.w3.org/TR/REC-CSS2/visudet.html#Computing_widths_and_margins, we
should have used its intrisic width to calculate 'right'.

Some gray areas about absolute positionning will be discussed next week at the
working group so I'm not doing to work on this until it's all cleared up. Marking
dogfood/M11.

Comment 3

[Pierre Saslawsky]

Attachment: testcase part 1/3: html file

Comment 4

[Pierre Saslawsky]

Attachment: testcase part 1/3: css file

Comment 5

[Pierre Saslawsky]

Attachment: testcase part 3/3: gif file

Comment 6

[Pierre Saslawsky]

Changed the tile to "{css2} absolutely positioned replaced elements stretched to
container" from "Style Sheet backgrounds displayed incorrectly"

Comment 7

[Pierre Saslawsky]

[e-mail], your page revealed a second problem: the box containing
the text "What You Can Do Here" has a wrong line height. This was reported as bug
17532.

Comment 8

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: html file, reattached to use CSS and GIF on bugzilla

Comment 9

[Pierre Saslawsky]

The following explanation comes from troy:

    There's no bug there. We're doing exactly what the spec says.

    What I see is an image inside of an absolutely positioned SPAN element.
    The SPAN doesn't specify a 'width' property and so it has the default
    value of 'auto'. The SPAN is a non-replaced element and that's why it
    is as wide as its containing block.

    That's the way the spec is defined. IE doesn't do what the spec says;
    it shrink wraps the width.

    They can either specify the 'background' as 'none' and that way it will
    be transparent, or they can absolutely position the image and not put it
    inside of the absolutely positioned SPAN.

The simplest fix is for CSS file to specify "background: none" instead of
"background: #FFFFFF" in the ".LogoImage" declaration.

Closed as Invalid.

Comment 10

[Christine Hoffman]

Verifying bug invalid.

Comment 11

[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...