241031 - incorrect page rendering: graphics on left overlap text on right

Status: RESOLVED INVALID

(Firefox :: General, defect)

Description

[S.Green]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8a) Gecko/20040419 Firefox/0.8.0+
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8a) Gecko/20040419 Firefox/0.8.0+

see screen prints attached from both FF and IE -- self-explanatory

Reproducible: Always
Steps to Reproduce:
1.
2.
3.

Comment 1

[S.Green]

Attachment: Ex. 1 FF

distorted - graphic overlaps text

Comment 2

[S.Green]

Attachment: Ex. 2 FF

graphics overlaps text

Comment 3

[S.Green]

Attachment: Ex. 1 IE6

correct rendering

Comment 4

[S.Green]

Attachment: Ex. 2 IE6

correct rendering

Comment 5

[Mike Connor [:mconnor]]

actually, Mozilla is rendering this properly according to the CSS spec.  Its IE
that gets it wrong, however the page was obviously designed based on IE's behaviour.

the images are contained within the div with the width set to 180 pixels.  IE
treats "height" and "width" as "min-height" and "min-width" in many cases, so
even if you specify a width it just expands to fit whatever content you put
inside of the block element.

http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow dictates that overflow:
visible is the default for that property, and demonstrates how that is expected
to behave.  We honour the width parameter correctly, what should be used if a
flexing div is desired is min-width: 180px instead of width: 180px.