224057 - clear:both; doesn't work on :empty elements

Status: VERIFIED FIXED

(Core :: Layout: Floats, defect)

Description

[Volker Puttrich]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.4.1) Gecko/20031008
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.4.1) Gecko/20031008

# Begin Example Code
<div>
 <div style="clear:both;"></div>
 <div style="float:right; width:160px;">
  <div>content to the right</div>
 </div>
 <div style="float:left;">
  content floating left
 </div>
 <div style="clear:both;"></div>
 <br />
 <br />
 <div style="text-align:right;">right aligned</div>
</div>
# End Example Code


Example 1: This is what it should look like

-----------------------------------
| content to the right | content .|
| . . . . . . . . . . .| floating |
| . . . . . . . . . . .| left . . |
-----------------------------------
| <br /> . . . . . . . . . . . .  |
| <br /> . . . . . . . . . . . .  |
| . . . . . . . . . right aligned |
-----------------------------------


Example 2: This is what it looks like in Mozilla

-----------------------------------
| content to the right | content .|
| <br /> . . . . . . . | floating |
| <br /> . . . . . . . | left . . |
| . . . .right aligned | . . . . .|
-----------------------------------


This means to me that clear:both is not properly handled. If that is not true,
there would still be something wrong with the render engine. At least the code
written above should render like in the first example.

Reproducible: Always

Steps to Reproduce:
See Example Code in Details . . .
Actual Results:  
See Details, Example 2 ...

Expected Results:  
See Details, Example 1 ...

Happens in 1.3 and 1.4 for sure. Other versions have not been available for testing.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Probably a dup of the bug on clear margins collapsing through to the bottom of
empty elements.

Comment 2

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

Attachment: reporter's testcase

Comment 3

[Mats Palmgren (inactive)]

The bug Boris is looking for is bug 209694.  I think this is different,
although I am confused over the diagrams since "left" and "right" seems to be
flipped?

Comment 4

[Mats Palmgren (inactive)]

Attachment: Testcase #2

Does this show the problem?

Comment 5

[Volker Puttrich]

Attachment: Page where bug appears

On Win2k, Netscape >= 6.2, IE 6 and Opera >= 7 (or probably => 5) this page
renders perfectly right. Not so in Mozilla >= 1.3 including 1.4.1

My previous example doesn't seem to show the bug as I experienced it, when used
stand-alone. The attached XHTML 1.1 page shows it pretty clearly I hope.

Comment 6

[Volker Puttrich]

Comment on attachment 134460 [details]
Page where bug appears

Well, my attached file does NOT show the bug!
It seems that it has to do with the css file.

Here you can see a working example of the bug: 
http://mindarray.net/bugzilla/

Comment 7

[Mats Palmgren (inactive)]

Volker, thanks for clarifying, I can see the problem at the URL.

When I reduced http://mindarray.net/bugzilla/ I arrived at the same markup as in
"Testcase #2"

Comment 8

[Mats Palmgren (inactive)]

Attachment: Testcase #3 (minimal)

Comment 9

[Volker Puttrich]

Testcases #2 and #3 are not really the same as what I did.

I needed 2 columns, tableless. Then, below the 2 columns I would have to reduce 
it back to 1 column. But that doesn't seem to work properly. I still don't know 
why, but I will post my results here as soon as I found out more about it.

The weird thing is that it renders like expected in any other browser but 
Mozilla >= 1.3 (or even previous versions).

Comment 10

[Anne (:annevk)]

*** Bug 225999 has been marked as a duplicate of this bug. ***

Comment 11

[Martijn Wargers (dead)]

Not sure if this is really useful anymore, but:
The testcase does work in:
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.2.1) Gecko/20021130
But it doesn't work in:
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.3a) Gecko/20021212

Comment 12

[Andrew Schultz]

*** Bug 246565 has been marked as a duplicate of this bug. ***

Comment 13

[WADA:World Anti-bad-Duping Agency]

Workaround is inserting <P></P> after <BODY> and before first DIV with float.

Expected case : CLEARed by null <DIV>, but <P></P> is inserted after <BODY> and
before first FLOAT element(DIV).   
 http://bugzilla.mozilla.gr.jp/attachment.cgi?id=1508&action=view

Error Case : CLEARed by null <DIV>, no element before FLOATed element.   
 http://bugzilla.mozilla.gr.jp/attachment.cgi?id=1507&action=view
 Point where clear is effective varies according to window width.
 This is completely same as attachment 134503 [details] exept float:right/clear:right.
 Many floated <DIV>s is to see where CLEAR becomes effective.

Difference between two cases is only <P></P> after <BODY> and before first <DIV>
with float:right.
Inserting null <DIV></DIV> or null <SPAN></SPAN> before <DIV float=left> was not
a workaround.
Inserting null <P></P> was a workaround.
WIDTH>0 or HEIGHT>0 seems to be required as inserted element.
(Null <P></P> have width or height because <P> has margin or padding)

This problem still occurs after Bug 148994 was fixed.

Comment 14

[Molerat]

This bug has come up on the forums:
http://forums.mozillazine.org/viewtopic.php?p=621421#621421

Comment 15

[Martijn Wargers (dead)]

Fixed by bug 209694

Comment 16

[WADA:World Anti-bad-Duping Agency]

(In reply to comment #15)
Test case in comment #13 was displayed as expected. 
Verified (Mozilla suite latest-trunk 2004112606 build, Win-2K).