33605 - table overlaps preceding float

Status: VERIFIED INVALID

(Core :: Layout, defect, P3)

Description

[Sampo Syreeni]

From Bugzilla Helper:
User-Agent: Mozilla/5.0 (Windows; N; Win95; en-US; m14)
BuildID:    2000032308

The example URL shows how an address element with just text in it is floated to
the right side. It overlaps with the table. No CSSP has been used, the CSS used is:
address {white-space:nowrap; text-align:right; float:right; white-space:nowrap;
margin:1ex 0 1ex 0;}



Reproducible: Always
Steps to Reproduce:
1.Go to the page



Expected Results:  CSS float:right; implies display:block; When no CSSP is used,
block elements should not overlap.

Comment 1

[troy]

Floater problem

Comment 2

[Gervase Markham [:gerv]]

This URL currently crashes Mozilla. Bug 39112 filed.

Gerv

Comment 3

[Gervase Markham [:gerv]]

The DUPE tree here is a mess. I'm going to re-evaluate this bug.

Gerv

Comment 4

[Blake Ross]

This URL currently crashes because of bug 27507 (nsbeta2+); will reevaluate this 
when that is fixed 

Comment 5

[Alex]

On build 2000061308 using Windows 98, the page does not crash, and I can see the 
bug being described.

Confirming status to NEW.

Comment 6

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

This is actually probably correct according to the CSS spec, although the tables 
section is vague.  Probably some application of 'float-edge' for tables is 
needed.

Comment 7

[buster]

I believe this bug is invalid.  IE is doing the wrong thing, per spec. Section 
9.5 of the CSS2 spec says:
       ------------------------------------------------------
Since a float is not in the flow, non-positioned block boxes created before and 
after the float box flow vertically as if the float didn't exist. However, line 
boxes created next to the float are
shortened to make room for the floated box. Any content in the current line 
before a floated box is reflowed in the first available line on the other side 
of the float. 

Several floats may be adjacent, and this model also applies to adjacent floats 
in the same line. 

[some of spec omitted here]

A float can overlap other boxes in the normal flow (e.g., when a normal flow box 
next to a float has negative margins). When an inline box overlaps with a float, 
the content, background, and borders of the inline box are rendered in front of 
the float. When a block box overlaps, the background and borders of the block 
box are rendered behind the float and are only be visible where the box is 
transparent. The content of the block box is rendered in front of the float. 
       ------------------------------------------------------

No exception is made for tables.

I believe the proper coding for what you want on this site would have the 
address be followed by a <br clear=all>, and the table would be floated.  That 
way, you are invoking the stacking rules for floaters, and the BR ensures the 
address will be on a line by itself.

Marking Invalid.  Adding keyword evangwanted in the hopes that someone contacts 
the page author with the suggestion above.

Comment 8

[Hixie (not reading bugmail)]

Yep

Comment 9

[Julian Hall]

Maybe I'm being a bit dumb here - as a page designer, how do I avoid this
problem?  I have a page with a floated DIV on the right hand side, and a table
defined after it in the HTML.  I want to make the table shift down to below the
DIV only in the case where the table would overlap the DIV (as it does by
default in IE, which you describe as incorrect).  Obviously a <br clear=all>
would move it down in all cases, but normally it isn't necessary.

Also, what is 'float-edge'?  I can't find any references to that that explain it
in any detail.