203825 - Content of table doesn't abide to rules of floats above it.

Status: RESOLVED DUPLICATE of bug 14984

(Core :: Layout: Tables, defect, P3)

Description

[Alexander Trauzzi]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.4a) Gecko/20030401
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.4a) Gecko/20030401

Visit the example page, and note the date and time stamp (example) in the top
right of a "post".  It's overlapping on top of a float defined before the table.

Unless it's again, due to my bad HTML & CSS, I don't think this should be happening.
I couldn't quite find any problems like this one...It's a bit tough to search for.

Overflow, div, table, CSS...Are all parts of this problem.  But at the heart,
the probelm shows only when I try to use a table with a a width of 100% in a div
with a width of 100%.

Reproducible: Always

Steps to Reproduce:
1. Visit page.
2. Take a look at post content and how it overlaps over the random rotating image.
3. Grrr.

Actual Results:  
Page renders a little shabby.

Expected Results:  
The width of the table's parent div should restrict it to the left padded edge
of the float in the top right of the page, making it take up just a fair bit
less than full width.

My HTML coding is of course, inherantly flawed.  I've validated past documents,
but I'm currently reworking a bit of code to include some tables again, for
compatibility's sake.  I apologize for wasting your time if I have.

Comment 1

[Madhur Bhatia]

Attachment: reduced testcase

In Mozilla -- 
the div with width 100% containing a table with width 100% ...	overlaps
another DIV floating to the right 

In IE --
There is no overlap

Comment 2

[Madhur Bhatia]

could not locate a duplicate for this bug.
-- > confirming

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

*** This bug has been marked as a duplicate of 14984 ***

Comment 4

[Madhur Bhatia]

I did check Bug 14984 before i confirmed this bug.

The testcase mentioned in bug 14984 -
http://bugzilla.mozilla.org/attachment.cgi?id=1880&action=view displays
incorrectly on IE as well as Mozilla.

The testcase I have attached to this bug only fails on Mozilla ... IE displays
it fine.

attachment 1880 [details] has the following code :-
===========================================
<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>
===========================================

attachment 123206 [details] :-
===========================================
there is a DIV floating to right which is overlapped by another DIV with width
set to 100%
===========================================


will this bug still be considered as dup of bug 14984

Comment 5

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

We need to decide how to solve the issue of tables "wrapping" around floats.  IE
displays the two testcases on bug 14984 in different ways, but it's still the
same issue.

Comment 6

[Alexander Trauzzi]

Would it not be as simple as noting that the table is contained within a DIV?

The table should be bound to the behaviour (width-wise) of the DIV, meaning 
that it's edges should stay clear of the float (as per margins).

???

Comment 7

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Blocks don't flow around floats.  Only inlines do.