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

RESOLVED DUPLICATE of bug 478834

Status

()

Core
Layout: Floats
P1
major
RESOLVED DUPLICATE of bug 478834
18 years ago
2 years ago

People

(Reporter: Chris LaRosa, Unassigned)

Tracking

(Blocks: 1 bug, {css1, testcase})

Trunk
Future
css1, testcase
Points:
---
Dependency tree / graph
Bug Flags:
blocking1.9 -

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [Hixie-P4], URL)

Attachments

(6 attachments, 1 obsolete attachment)

(Reporter)

Description

18 years ago
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.
(Reporter)

Comment 1

18 years ago
Created attachment 1880 [details]
Demonstration of table and right-aligned image overlap

Updated

18 years ago
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?
(Reporter)

Comment 3

18 years ago
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.

Updated

18 years ago
Status: NEW → ASSIGNED
Target Milestone: M17

Updated

18 years ago
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.

Comment 7

18 years ago
Updating to default Layout Assignee...kipp no longer with us :-(

Comment 8

18 years ago
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.

Updated

18 years ago
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

Updated

18 years ago
Whiteboard: [TESTCASE]

Comment 10

18 years ago
mine! mine mine mine!  all mine!  whoo-hoo!
Assignee: kipp → buster

Comment 11

18 years ago
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
Last Resolved: 18 years ago
Resolution: --- → LATER
Target Milestone: M17 → M20

Comment 12

17 years ago
reopening and marking Future
Status: RESOLVED → REOPENED
Resolution: LATER → ---
Target Milestone: M20 → Future
Blocks: 78094
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. ***

Comment 16

15 years ago
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.

Comment 18

15 years ago
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

15 years ago
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.

Comment 21

14 years ago
Created attachment 120563 [details]
The same thing done with a CSS float

Comment 22

14 years ago
Created attachment 120564 [details]
The same thing done as a CSS float
Attachment #120563 - Attachment is obsolete: true

Comment 23

14 years ago
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

Comment 25

14 years ago
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.

Comment 28

14 years ago
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!

";^)
Priority: P3 → P1
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. ***

Comment 34

13 years ago
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. ***

Comment 37

13 years ago
*** Bug 209129 has been marked as a duplicate of this bug. ***

Comment 38

13 years ago
Created attachment 160442 [details]
Spread Fox Site

Comment 39

13 years ago
Created attachment 160443 [details]
A9.com

Comment 40

13 years ago
Created attachment 160444 [details]
Texturizer.net
*** Bug 280751 has been marked as a duplicate of this bug. ***

Updated

11 years ago
Blocks: 134706

Updated

10 years ago
Duplicate of this bug: 404760
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?
Maybe related to bug 349255 as well.
Flags: blocking1.9? → blocking1.9-

Updated

10 years ago
Duplicate of this bug: 409978
Assignee: layout.floats → nobody
QA Contact: ian → layout.floats

Updated

8 years ago
Duplicate of this bug: 516683
Created attachment 400758 [details]
Testcase from bug 516683

Comment 48

8 years ago
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 50

6 years ago
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 hidden (spam)
Comment hidden (spam)

Updated

5 years ago
Duplicate of this bug: 833788
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
Last Resolved: 18 years ago2 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 478834
\o/  Been waiting ~15 years for this one.....
You need to log in before you can comment on or make changes to this bug.