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)
Core
Layout: Floats
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.
Reporter | ||
Comment 1•25 years ago
|
||
Comment 2•25 years ago
|
||
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•25 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.
Comment 4•25 years ago
|
||
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•25 years ago
|
||
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•25 years ago
|
||
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.
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
Comment 9•25 years ago
|
||
Bulk moving [testcase] code to new testcase keyword. Sorry for the spam!
Keywords: testcase
Updated•25 years ago
|
Whiteboard: [TESTCASE]
Comment 11•25 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
Closed: 25 years ago
Resolution: --- → LATER
Target Milestone: M17 → M20
Comment 12•24 years ago
|
||
reopening and marking Future
Status: RESOLVED → REOPENED
Resolution: LATER → ---
Target Milestone: M20 → Future
Updated•24 years ago
|
Keywords: css1,
mozilla1.0
Whiteboard: [Hixie-P4]
Comment 13•23 years ago
|
||
*** Bug 99408 has been marked as a duplicate of this bug. ***
Comment 14•23 years ago
|
||
Build reassigning Buster's bugs to Marc.
Assignee: buster → attinasi
Status: REOPENED → NEW
Comment 15•23 years ago
|
||
*** Bug 110253 has been marked as a duplicate of this bug. ***
Comment 16•23 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
Comment 17•23 years ago
|
||
The CSS2 specification doesn't explain how to handle this. CSS3 should address
these problems.
Comment 18•22 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•22 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.
Comment 20•22 years ago
|
||
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•22 years ago
|
||
Comment 22•22 years ago
|
||
Attachment #120563 -
Attachment is obsolete: true
Comment 23•22 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.
Comment 24•22 years ago
|
||
.
Assignee: attinasi → float
Component: Layout → Layout: Floats
QA Contact: petersen → ian
Comment 25•22 years ago
|
||
Floating elements and tables overlapping each other will often cause data loss
-> raising severity to major.
Severity: minor → major
Comment 26•22 years ago
|
||
*** Bug 203825 has been marked as a duplicate of this bug. ***
Comment 27•22 years ago
|
||
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•22 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!
";^)
Updated•21 years ago
|
Priority: P3 → P1
Updated•21 years ago
|
Summary: [FLOAT] Table overlaps right-aligned image → [FLOAT] Tables overlap right floats (e.g., right-aligned images or tables)
Comment 29•21 years ago
|
||
*** Bug 181963 has been marked as a duplicate of this bug. ***
Comment 30•21 years ago
|
||
*** Bug 105377 has been marked as a duplicate of this bug. ***
Comment 31•21 years ago
|
||
*** Bug 118318 has been marked as a duplicate of this bug. ***
Comment 32•21 years ago
|
||
*** Bug 72979 has been marked as a duplicate of this bug. ***
Comment 33•21 years ago
|
||
*** Bug 237397 has been marked as a duplicate of this bug. ***
Comment 34•21 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"> ...
Comment 35•21 years ago
|
||
*** Bug 243899 has been marked as a duplicate of this bug. ***
Comment 36•20 years ago
|
||
*** Bug 191941 has been marked as a duplicate of this bug. ***
Comment 37•20 years ago
|
||
*** Bug 209129 has been marked as a duplicate of this bug. ***
Comment 38•20 years ago
|
||
Comment 39•20 years ago
|
||
Comment 40•20 years ago
|
||
Comment 41•20 years ago
|
||
*** Bug 280751 has been marked as a duplicate of this bug. ***
Comment 43•17 years ago
|
||
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?
Comment 44•17 years ago
|
||
Maybe related to bug 349255 as well.
Flags: blocking1.9? → blocking1.9-
Updated•15 years ago
|
Assignee: layout.floats → nobody
QA Contact: ian → layout.floats
Comment 47•15 years ago
|
||
Comment 48•15 years ago
|
||
This also applies to contentEditable regions.
WebKit has the same issue: https://bugs.webkit.org/show_bug.cgi?id=3564
Comment 49•15 years ago
|
||
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•14 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 54•9 years ago
|
||
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
Comment 55•9 years ago
|
||
\o/ Been waiting ~15 years for this one.....
You need to log in
before you can comment on or make changes to this bug.
Description
•