Last Comment Bug 14984 - [FLOAT] Tables overlap right floats (e.g., right-aligned images or tables)
: [FLOAT] Tables overlap right floats (e.g., right-aligned images or tables)
Status: RESOLVED DUPLICATE of bug 478834
[Hixie-P4]
: css1, testcase
Product: Core
Classification: Components
Component: Layout: Floats (show other bugs)
: Trunk
: All All
: P1 major with 21 votes (vote)
: Future
Assigned To: Nobody; OK to take it and work on it
:
Mentors:
http://www.geocities.com/SiliconValle...
: 72979 99408 105377 110253 118318 181963 191941 203825 209129 237397 243899 280751 404760 409978 516683 833788 (view as bug list)
Depends on:
Blocks: float 35478 134706
  Show dependency treegraph
 
Reported: 1999-09-27 09:29 PDT by Chris LaRosa
Modified: 2015-08-06 17:53 PDT (History)
38 users (show)
roc: blocking1.9-
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
Demonstration of table and right-aligned image overlap (447 bytes, text/html)
1999-09-27 09:32 PDT, Chris LaRosa
no flags Details
The same thing done with a CSS float (442 bytes, text/html)
2003-04-15 03:44 PDT, Antti Näyhä
no flags Details
The same thing done as a CSS float (300 bytes, text/html)
2003-04-15 03:46 PDT, Antti Näyhä
no flags Details
Spread Fox Site (112.64 KB, image/png)
2004-09-28 21:03 PDT, Biju
no flags Details
A9.com (96.25 KB, image/png)
2004-09-28 21:04 PDT, Biju
no flags Details
Texturizer.net (113.25 KB, image/png)
2004-09-28 21:06 PDT, Biju
no flags Details
Testcase from bug 516683 (3.09 KB, text/html)
2009-09-15 07:31 PDT, Mats Palmgren (:mats)
no flags Details

Description Chris LaRosa 1999-09-27 09:29:32 PDT
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.
Comment 1 Chris LaRosa 1999-09-27 09:32:59 PDT
Created attachment 1880 [details]
Demonstration of table and right-aligned image overlap
Comment 2 David Baron :dbaron: ⌚️UTC-7 (review requests must explain patch) 1999-09-27 20:26:59 PDT
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?
Comment 3 Chris LaRosa 1999-09-28 10:25:59 PDT
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.
Comment 4 David Baron :dbaron: ⌚️UTC-7 (review requests must explain patch) 1999-09-28 11:36:59 PDT
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.
Comment 5 Benjamin Smedberg [:bsmedberg] 1999-12-13 21:17:59 PST
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.
Comment 6 David Baron :dbaron: ⌚️UTC-7 (review requests must explain patch) 1999-12-14 06:44:59 PST
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.
Comment 7 leger 1999-12-14 13:53:59 PST
Updating to default Layout Assignee...kipp no longer with us :-(
Comment 8 troy 1999-12-14 14:14:59 PST
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.
Comment 9 ekrock's old account (dead) 2000-01-21 13:51:21 PST
Bulk moving [testcase] code to new testcase keyword. Sorry for the spam!
Comment 10 buster 2000-03-03 16:08:46 PST
mine! mine mine mine!  all mine!  whoo-hoo!
Comment 11 buster 2000-03-22 13:43:21 PST
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.
Comment 12 Blake Ross 2000-09-29 09:44:46 PDT
reopening and marking Future
Comment 13 David Baron :dbaron: ⌚️UTC-7 (review requests must explain patch) 2001-09-13 13:02:44 PDT
*** Bug 99408 has been marked as a duplicate of this bug. ***
Comment 14 Kevin McCluskey (gone) 2001-10-04 16:29:17 PDT
Build reassigning Buster's bugs to Marc.
Comment 15 Boris Zbarsky [:bz] 2001-11-15 07:54:27 PST
*** Bug 110253 has been marked as a duplicate of this bug. ***
Comment 16 Greg K. 2002-05-20 19:52:05 PDT
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.
Comment 17 David Baron :dbaron: ⌚️UTC-7 (review requests must explain patch) 2002-05-20 20:10:08 PDT
The CSS2 specification doesn't explain how to handle this.  CSS3 should address
these problems.
Comment 18 Warren Turkal 2003-03-11 11:58:13 PST
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.
Comment 19 Warren Turkal 2003-03-11 12:00:59 PST
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.
Comment 20 Eric A. Meyer (dead account) 2003-03-14 14:57:35 PST
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.
Comment 21 Antti Näyhä 2003-04-15 03:44:23 PDT
Created attachment 120563 [details]
The same thing done with a CSS float
Comment 22 Antti Näyhä 2003-04-15 03:46:06 PDT
Created attachment 120564 [details]
The same thing done as a CSS float
Comment 23 Antti Näyhä 2003-04-15 03:52:17 PDT
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.
Comment 24 David Baron :dbaron: ⌚️UTC-7 (review requests must explain patch) 2003-04-15 07:01:21 PDT
.
Comment 25 Antti Näyhä 2003-05-02 06:23:10 PDT
Floating elements and tables overlapping each other will often cause data loss
-> raising severity to major.
Comment 26 David Baron :dbaron: ⌚️UTC-7 (review requests must explain patch) 2003-05-13 17:16:24 PDT
*** Bug 203825 has been marked as a duplicate of this bug. ***
Comment 27 Hixie (not reading bugmail) 2003-05-13 18:15:37 PDT
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.
Comment 28 Alexander Trauzzi 2003-05-13 21:03:11 PDT
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!

";^)
Comment 29 David Baron :dbaron: ⌚️UTC-7 (review requests must explain patch) 2003-10-19 11:12:50 PDT
*** Bug 181963 has been marked as a duplicate of this bug. ***
Comment 30 Boris Zbarsky [:bz] 2003-11-14 10:47:30 PST
*** Bug 105377 has been marked as a duplicate of this bug. ***
Comment 31 Boris Zbarsky [:bz] 2003-11-15 11:56:42 PST
*** Bug 118318 has been marked as a duplicate of this bug. ***
Comment 32 Boris Zbarsky [:bz] 2004-02-28 10:49:13 PST
*** Bug 72979 has been marked as a duplicate of this bug. ***
Comment 33 Boris Zbarsky [:bz] 2004-03-13 18:39:43 PST
*** Bug 237397 has been marked as a duplicate of this bug. ***
Comment 34 Harald Kampen 2004-04-16 14:33:21 PDT
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"> ...
Comment 35 Boris Zbarsky [:bz] 2004-05-18 09:45:05 PDT
*** Bug 243899 has been marked as a duplicate of this bug. ***
Comment 36 Mats Palmgren (:mats) 2004-08-02 13:09:09 PDT
*** Bug 191941 has been marked as a duplicate of this bug. ***
Comment 37 Andrew Schultz 2004-09-18 17:43:37 PDT
*** Bug 209129 has been marked as a duplicate of this bug. ***
Comment 38 Biju 2004-09-28 21:03:20 PDT
Created attachment 160442 [details]
Spread Fox Site
Comment 39 Biju 2004-09-28 21:04:59 PDT
Created attachment 160443 [details]
A9.com
Comment 40 Biju 2004-09-28 21:06:26 PDT
Created attachment 160444 [details]
Texturizer.net
Comment 41 Mats Palmgren (:mats) 2005-02-02 16:56:08 PST
*** Bug 280751 has been marked as a duplicate of this bug. ***
Comment 42 Mats Palmgren (:mats) 2007-11-21 07:44:01 PST
*** Bug 404760 has been marked as a duplicate of this bug. ***
Comment 43 Ryan VanderMeulen [:RyanVM] 2007-12-04 18:20:27 PST
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?
Comment 44 David Baron :dbaron: ⌚️UTC-7 (review requests must explain patch) 2007-12-04 18:31:38 PST
Maybe related to bug 349255 as well.
Comment 45 philippe (part-time) 2007-12-27 16:59:37 PST
*** Bug 409978 has been marked as a duplicate of this bug. ***
Comment 46 Mats Palmgren (:mats) 2009-09-15 07:29:42 PDT
*** Bug 516683 has been marked as a duplicate of this bug. ***
Comment 47 Mats Palmgren (:mats) 2009-09-15 07:31:01 PDT
Created attachment 400758 [details]
Testcase from bug 516683
Comment 48 Tim 2009-11-20 01:09:26 PST
This also applies to contentEditable regions.

WebKit has the same issue: https://bugs.webkit.org/show_bug.cgi?id=3564
Comment 49 David Baron :dbaron: ⌚️UTC-7 (review requests must explain patch) 2010-01-29 14:00:32 PST
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 50 gilma gamez lopez 2011-05-17 20:17:08 PDT
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>
Comment 51 gilma gamez lopez 2011-05-17 20:19:20 PDT Comment hidden (spam)
Comment 52 Leonardo 2013-01-16 04:48:51 PST Comment hidden (spam)
Comment 53 Mats Palmgren (:mats) 2013-01-23 07:23:58 PST
*** Bug 833788 has been marked as a duplicate of this bug. ***
Comment 54 David Baron :dbaron: ⌚️UTC-7 (review requests must explain patch) 2015-08-06 14:19:04 PDT
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).

*** This bug has been marked as a duplicate of bug 478834 ***
Comment 55 Randell Jesup [:jesup] 2015-08-06 17:53:52 PDT
\o/  Been waiting ~15 years for this one.....

Note You need to log in before you can comment on or make changes to this bug.