210011 - Float-object inside a <DIV> is alligned vertically *under* previous left-alligned <DIV> instead of being only aligned inside its own <DIV>

Status: RESOLVED INVALID

(Core :: Layout: Floats, defect)

Description

[Stephen Simmat]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; de-AT; rv:1.4b) Gecko/20030507
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; de-AT; rv:1.4b) Gecko/20030507

First: Sorry if this is a duplicate, although I did my best to find the problem
in the bugzilla database. I'm not that Layout and CSS specialist but just
discovered this strange Mozilla rendering behaviour when setting up a new
homepage with a new CSS layout.

Go to my URL. You will find a website-template with three columns realized by
CSS floats. In the second column there is a dotted box. This box should appear
directly under the headline of the first article. Also the referer "TOP" should
be placed directly above the horizontal separator line.
But these two objects are both aligned *under* the textbox in the first column,
althought they should be placed as described above it.

Mozilla 1.3.1 and previous versions did this correctly, but with 1.4 (up to rc2)
the layout gets messed up. As a reference(?) the IE renders the page like
Mozilla 1.3.1 did.

This bug is very anoying: If you are writing new CSS and develop a page you
can't be shure that the rendering is correct. It took me hours to find out, that
this was a problem with mozilla and not with the CSS... ;-)

Reproducible: Always

Steps to Reproduce:
1. Go to the URL http://www.simmat.de/purplehaze/
2. Look for the placement of the dotted box
3. Compare with rendering by Mozilla 1.3 or IE

Actual Results:  
The dotted box and the "TOP" referer seems to be placed incorrect. There are
below the first left-column textbox.

Expected Results:  
Render the Page correctly, i.e. place the dotted box directly below the first
headline and the "TOP" directly above the horizontal ruler.

Make sure, your browser window is wide enough, so that the intended placement of
the objects is an issue.

Comment 1

[Matthias Versen [:Matti]]

doesn't block Mozilla development..

Comment 2

[Bill Mason]

This is correct behavior.  CSS2:
http://www.w3.org/TR/CSS2/visuren.html#float-position
"The outer top of a floating box may not be higher than the outer top of any
block or floated box generated by an element earlier in the source document."

This behavior was previously broken in Mozilla and fixed in bug 196919.

Comment 3

[Stephen Simmat]

Ok, I see. The intended behaviour is in fact a bug... Thats nice, I love
Web-Standards that are implemented differently by different browsers... :)

But only one comment: I don't use CSS2, so I don't see, what a CSS2-Rule has to
do with this. (?!?)

On the other hand: How can I do a 3-column design with CSS without using tables
and without utilizing the now fixed bug, that is still present in most browsers?
Well, I'll find out...

Thanks for the fast response. Didn't want you to make useless work.

Comment 4

[Bill Mason]

Mozilla is a CSS2/2.1 browser.  Those are the rules it will follow, regardless
of your (I assume) intention from your comment to write CSS1.

Comment 5

[Stephen Simmat]

Ok, thanks for explaining. I will keep this in mind.

I also have already an idea how to correct my CSS to fulfill the official
standard implemented by Mozilla. So this is a good opportunity to learn much
more about CSS(2). :)

By the way:
I took a closer look at the example for bug 196919. I modified it a little and
I'm not satisfied with the rendering result. (See
http://www.simmat.de/float-above.html )
Is this really correct?