Closed Bug 140384 Opened 22 years ago Closed 22 years ago

Bad layout of boxes from div tags and CSS style

Categories

(Core :: Layout, defect)

Product:
Core
Component:
Layout
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
major

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: V.Haisman, Assigned: attinasi)

References

(
URL
)

Details

From Bugzilla Helper:
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.0rc1)
Gecko/20020417
BuildID:    Mozilla 1.0 Release Candidate 1 Mozilla/5.0 (Windows; U; Windows NT
5.1; en-US; rv:1.0rc1) Gecko/20020417

What I expect is red box around two green boxes.
Inside upper green box I expect three boxes. Yellow and blue box at the left,
gap and then magenta box at right side. Yellow, blue and magenta boxes have some
text inside. In the second green box which is bellow the first one is some text too.
My expectations come rom what IE6 has rendered.

Reproducible: Always
Steps to Reproduce:
Just try the HTML supplied in Additional Information field.

Actual Results:  What I get instead is a red box as expected but the first green
box degenerated to its borders (one thick green line). The the yellow, blue and
magenta box seem to be correctly clipped to upper green box but because the box
has degenerated they overlay the second green box and the text in the second
green box is layed to the gap between blue and magenta box.

Expected Results:  I expect same layout as IE6 renders.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Bug</title>
</head>

<body>

<div style="border: solid thick red; margin: 1px; width: 500px">
	<div style="border: solid thick green; margin: 1px; width: 100%">
		<div style="border: solid thick yellow; margin: 1px; padding: 0px; width: 25%;
float: left">
			Cas 12.12.1212 12:12
		</div>

		<div style="border: solid thick blue; padding:0px; margin:1px; float: left">
			modra
		</div>
		<div style="border: solid thick magenta; padding:0px; margin:1px; width: 15%;
float: right"> 
			V pravo hled!
			Test test testiik.
		</div>
	</div>
	<div style="border: solid thick green; padding:0px; margin: 1px; width: 100%">
		Nejaky ten obsah.<br>
		Test.
	</div>

</div>

</body>
</html>
can't be too wrong - Opera and konqueror render this more or less as Mozilla does.
> What I get instead is a red box as expected but the first green
> box degenerated to its borders (one thick green line).

This is correct.  The height of the first green box is not specified, so its
determined by its in-flow content.  There is no in-flow content, since all the
content in the first green box is floating (hence out of flow).  So the correct
computed height of the first green box is 0.  See
http://www.w3.org/TR/REC-CSS2/visudet.html#q17 (CSS2 spec describing height
calculation for a block, which is what a div is) for a clear statement of this...

> because the box has degenerated they overlay the second green box

Yep.  This is exactly how floaters are supposed to behave.  See the second
illustration in the CSS2 specification on floats
(http://www.w3.org/TR/REC-CSS2/visuren.html#floats).

> text in the second green box is layed to the gap between blue and magenta box.

That is also correct (see http://www.w3.org/TR/REC-CSS2/visuren.html#floats once
again).

One problem is that IE6 renders your page in its "quirks" or
"backwards-compatible" mode instead of in "standards" mode.  So does Mozilla,
but our quirks mode is a lot closer to standards than IE's....

Marking invalid, since the rendering is correct.
Status: UNCONFIRMED → RESOLVED
Closed: 22 years ago
Resolution: --- → INVALID
Changing QA Contact
QA Contact: petersen → amar
You need to log in before you can comment on or make changes to this bug.