210083 - Image shown out of <div> tag styled borders

Status: VERIFIED INVALID

(Core :: Layout: Floats, defect)

Description

[Andrzej Haczewski]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.4) Gecko/20030529
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.4) Gecko/20030529

Image wider than the width CSS style applied to <div> is being drawn partially
out of the <div> layer. This covers text written outside the layer. The code
example is included in steps to reproduce.

Reproducible: Always

Steps to Reproduce:
<div style="width: 150px; border: 1px solid; float: left;"> <br>
<img src="testimg.jpg" width="160" height="120"><br><br>
</div>
<p>Blah Blah<br>
Blah Blah<br>
Blah Blah<br>
Blah Blah<br>
Blah Blah<br>
Blah Blah<br>
Blah Blah<br>
</p>

Note: Black 1px border shows exacly where layer ends.

Actual Results:  
Image is rendered outside expected <div> float.

Expected Results:  
I think that she(he?:-) should resize that <div> layer just like it is done by
Microsoft's browser. But decision is yours.

Comment 1

[Mats Palmgren (inactive)]

This happens for all blocks, not just floats and it's not a bug in Mozilla.
If the content can't fit inside the specified width it should overflow.
The bug is in IE which implements 'width' as 'min-width'.
See http://www.w3.org/TR/CSS21/visudet.html#min-max-widths
and http://www.w3.org/TR/CSS21/visufx.html#overflow
and http://www.w3.org/TR/CSS21/visudet.html#width

-> INVALID

Comment 2

[Mats Palmgren (inactive)]

Attachment: Testcase

Comment 3

[Vedran Miletic]

v