Closed Bug 14984 Opened 25 years ago Closed 9 years ago

[FLOAT] Tables overlap right floats (e.g., right-aligned images or tables)

Categories

(Core :: Layout: Floats, defect, P1)

defect

Tracking

()

RESOLVED DUPLICATE of bug 478834
Future

People

(Reporter: cplarosa, Unassigned)

References

(Blocks 1 open bug, )

Details

(Keywords: css1, testcase, Whiteboard: [Hixie-P4])

Attachments

(6 files, 1 obsolete file)

Overview Description:

Tables can overlap a right-aligned image (Build ID: 1999092013).  The following
code sample will demonstrate the problem.

Steps to Reproduce:

1) Create an HTML file containing the following HTML:

   <IMG ALIGN=RIGHT SRC="http://www.mozilla.org/images/mozilla-banner.gif">
   <TABLE BORDER>
   <TR><TD NOWRAP>This table should not overlap the floating image.
                  0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789</TD></TR>
   </TABLE>

2) Display the HTML file

Actual Results:

The table overlaps the image.

Expected Results:

The table should not overlap the image.  The effective page width should be
increased to prevent overlap.  The new page width may exceed the browser window
width (horizontal scroll bar should appear).

Build Date & Platform Bug Found:

Build ID: 1999092013, Windows 95, PC

Additional Builds and Platforms Tested On:

(none)

Additional Information:

This bug also exists in Netscape 3.0, Netscape 4.61, and Internet Explorer 5.0.
Assignee: troy → kipp
I disagree.  I don't think floats should cause horizontal scrolling unless
they're wider than the page.  They should be "safe".  I think the current
behavior is correct, unless perhaps you want to put a clear on wide tables that
are near floats.  Is there something in CSS3 for this?
This overlap does not occur when the table is replaced by a wide image or a
very long word.  In these cases, the text or non-floating image moves down
below the right-aligned image.  This is the first web browser that correctly
prevents overlap in these cases!  It only overlaps tables.

Unfortunately, the HTML 4.0 specification (section 15.1.3) does not define this
case unambiguously.  It states that right alignment "causes the object to float
to the ... right margin" and "Subsequent text flows along the image's left
side".  The second statement implies non-overlap.  These two statements
conflict in this test case.  The only way to honor both of these statements is
to widen the page or move the table down below the right-aligned image.  With
the current implementation, you are forcing the web page designer to specify a
certain minimum client window width, below which the text and image will
overlap.  This seems undesirable.  It forces the HTML page designer to have
knowledge of font sizes and window/screen sizes that should not be necessary in
pure HTML design.
There's a big difference between (images and words) and tables.  Images and
words are inline elements, and should flow around floats.  Tables are blocks,
and should not, except that CSS3 might be changing some of the float flow rules
to treat legacy table rendering sensibly.

Forcing text not to wrap (as is required by your example) should be used with
extreme caution - it can have strange effects if you don't know the font size,
etc., etc.
Status: NEW → ASSIGNED
Target Milestone: M17
Whiteboard: [TESTCASE]
From reading the HTML spec, it seems that the floated table or image (to be
treated identically) should not overlap text (this happened in early browsers,
but is not desirable), should not increase page width unless they are wider
than the display, and should thus force text below them if it cannot be flowed
on the side of the floated image/table. See my new bug 21678 for more problems
with floating elements.
The HTML spec says very little, normatively, about presentation.  Do you have a
normative quote from HTML 4.0?  Otherwise, it's the CSS spec that's relevant.
Updating to default Layout Assignee...kipp no longer with us :-(
Why are you re-reassing layout bugs? Do NOT touch layout bugs.

The bugs are assigned to Kipp so they can stay neatly organized until we have a
new owner for the block/inline code.
Summary: Table overlaps right-aligned image → [FLOAT] Table overlaps right-aligned image
Bulk moving [testcase] code to new testcase keyword. Sorry for the spam!
Keywords: testcase
Whiteboard: [TESTCASE]
mine! mine mine mine!  all mine!  whoo-hoo!
Assignee: kipp → buster
I think this is unlikely to get fixed for 1.0.  Mozilla is behaving like Nav and
IE in its handling of floats in this case, and the spec is ambiguous as to what
should happen.  In the case of no clear direction from the specs, we go with
existing behavior, especially if both Nav and IE have the same behavior.
Status: NEW → RESOLVED
Closed: 24 years ago
Resolution: --- → LATER
Target Milestone: M17 → M20
reopening and marking Future
Status: RESOLVED → REOPENED
Resolution: LATER → ---
Target Milestone: M20 → Future
Blocks: float
Keywords: css1, mozilla1.0
Whiteboard: [Hixie-P4]
*** Bug 99408 has been marked as a duplicate of this bug. ***
Build reassigning Buster's bugs to Marc.
Assignee: buster → attinasi
Status: REOPENED → NEW
*** Bug 110253 has been marked as a duplicate of this bug. ***
The following paragraph from the CSS2 Specification seems on point:

"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."

http://www.w3.org/TR/REC-CSS2/visuren.html#floats

This seems to indicate that block boxes lay out with no regard whatsoever to
floats. The proper approach would seem to be to clear the float if it will
obscure a block box.
OS: Windows 95 → All
Hardware: PC → All
The CSS2 specification doesn't explain how to handle this.  CSS3 should address
these problems.
I think this is where my bug kind of fits. I have a problem with rendering. If
you look at http://www.memphisrunners.com/links.html at the bottom of the
"memphis area links" section, the right floated imaged does not get enclosed by
the parent div. This behavior makes the image overlap the edge of the div and
not respect padding and borders of the div.

Hopefully, this will help in tracking down this bug.
I think this is where my bug kind of fits. I have a problem with rendering. If
you look at http://www.memphisrunners.com/links.html at the bottom of the
"memphis area links" section, the right floated imaged does not get enclosed by
the parent div. This behavior makes the image overlap the edge of the div and
not respect padding and borders of the div.

Hopefully, this will help in tracking down this bug.

Sorry, I forgot to tell you version 1.3b on Windows ME.
Warren, what you're seeing is very different from what's being reported in this
bug.  Actually, the behavior on your page is not a bug, but the way floats are
described in CSS1 and CSS2.
Attached file The same thing done with a CSS float (obsolete) —
Attachment #120563 - Attachment is obsolete: true
The same thing done with a CSS float instead of align="right" (see attachment)
does wrap the table below the image in my IE6/Win32.

Mozilla, however, treats style="float: right" exactly the same way as align="right".

Is this the same bug at all?  Anyway, this is a clear case of conflicting
behaviour between IE and Moz that needs to be solved.
.
Assignee: attinasi → float
Component: Layout → Layout: Floats
QA Contact: petersen → ian
Floating elements and tables overlapping each other will often cause data loss
-> raising severity to major.
Severity: minor → major
*** Bug 203825 has been marked as a duplicate of this bug. ***
This should probably be fixed by replacing -moz-float-edge with properties
called -moz-float-displace and -moz-indent-edge-reset, based on proposed the
CSS3 properties with similar names.
I would just like to say that I'm glad I could help pinpoint a little quirk 
and help contribute towards the development of Mozilla.

But moreover, I have a slight concern.

Being marked as a future change to the Mozilla rendering engine, this means 
this problem will continue to exist.  Would anyone know of a way for designers 
to sidestep this problem for the time being?  A subtle solution might be all I 
need for now, something that other browsers would ignore.

Sorry to interrupt the dialogue of resolving this bug.

Just trying to keep it practical!

";^)
Summary: [FLOAT] Table overlaps right-aligned image → [FLOAT] Tables overlap right floats (e.g., right-aligned images or tables)
*** Bug 181963 has been marked as a duplicate of this bug. ***
*** Bug 105377 has been marked as a duplicate of this bug. ***
*** Bug 118318 has been marked as a duplicate of this bug. ***
Blocks: 35478
*** Bug 72979 has been marked as a duplicate of this bug. ***
*** Bug 237397 has been marked as a duplicate of this bug. ***
Adding float ore align may be a workaround bevore this bug is fixed. It works in
the most cases.
<p>... <img src="abc" style="float: right" /></p>
<table style="width:100%;float: left"> ...
*** Bug 243899 has been marked as a duplicate of this bug. ***
*** Bug 191941 has been marked as a duplicate of this bug. ***
*** Bug 209129 has been marked as a duplicate of this bug. ***
Attached image Spread Fox Site
Attached image A9.com
Attached image Texturizer.net
*** Bug 280751 has been marked as a duplicate of this bug. ***
Blocks: 134706
Probably late in the game to get this in for 1.9, but given that it affects a lot of sites, is it worth looking into seeing if this is easier to fix nowadays?
Flags: blocking1.9?
Flags: blocking1.9? → blocking1.9-
Assignee: layout.floats → nobody
QA Contact: ian → layout.floats
This also applies to contentEditable regions.

WebKit has the same issue: https://bugs.webkit.org/show_bug.cgi?id=3564
Bug 134706 (and bug 427129) should have helped here, but there's also the issue of fixing bug 25888 for blocks.  I'm not sure if there's anything else needed to fix this.
Comment on attachment 1880 [details]
Demonstration of table and right-aligned image overlap

><HEAD>
><TITLE>Table / Float Test</TITLE>
></HEAD>
><BODY>
>The following test fails on the following browsers, including mozilla:
>

<UL>
><LI>Internet Explorer 5.0
></UL>
><P>
><IMG ALIGN=RIGHT SRC="http://www.mozilla.org/images/mozilla-banner.gif">
><TABLE BORDER>
><TR><TD NOWRAP>This table should not overlap the floating image. 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789</TD></TR>
></TABLE>
></BODY>
The testcases in this bug were all fixed by bug 478834; some remaining related problems should have been fixed a few days later by bug 538194 (which is what I previously referred to as fixing bug 25888 for blocks).
Status: NEW → RESOLVED
Closed: 24 years ago9 years ago
Resolution: --- → DUPLICATE
\o/  Been waiting ~15 years for this one.....
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: