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)

Product:
Core
Component:
Layout: Floats
Type:
defect

Tracking

()

Status:
RESOLVED DUPLICATE of bug 478834
Milestone:
Future

People

(Reporter: cplarosa, Unassigned)

References

(Blocks 1 open bug,
URL
)

Details

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

Attachments

(6 files, 1 obsolete file)

Demonstration of table and right-aligned image overlap
447 bytes, text/html
Details
The same thing done as a CSS float
300 bytes, text/html
Details
Spread Fox Site
112.64 KB, image/png
Details
A9.com
96.25 KB, image/png
Details
Texturizer.net
113.25 KB, image/png
Details
Testcase from bug 516683
3.09 KB, text/html
Details
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: 25 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: 25 years ago → 9 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: