Closed
Bug 27997
Opened 25 years ago
Closed 24 years ago
[FLOAT] DIVs containg tables with align positioned incorrectly
Categories
(Core :: Layout, defect, P4)
Tracking
()
RESOLVED
INVALID
People
(Reporter: notardis, Assigned: ian)
References
Details
(Keywords: css1, html4, Whiteboard: [nsbeta3-])
Attachments
(2 files)
For floating DIVs whose size is determined by their content, contained tables
with align cause the table to extend beyond the DIV. The DIV's size is reduced
to that of other content than the table. The DIV shrinks and is improperly
positioned. A div with only a table for content shrinks to zero size and the
table is completely beyond the outer bounding box.
Also, float is overriding justification of cotained text.
Related bugs: 2119 4831 18803 21570 22327 26856 22431
I am using mozilla-win32-M13-fullcircwin32-M13le.zip on 486-80 clone, Windows
NT Workstation 4.0 Service Pak 6.
Below is HTML code that works fine with IE 5.0 and 90% on Nav 4.7
================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "hmpro6.dtd">
<HTML>
<HEAD>
<META CONTENT="text/html; charset=windows-1252" HTTP-EQUIV="Content-Type">
<TITLE>Test of Left/Right Float</TITLE> <STYLE TYPE="text/css"><!--//
BODY, DIV, TABLE, TR, TD {
border:0em;
text-align:center;
}
BODY, {
vertical-align:top;
}
DIV, TABLE, TR, TD{
vertical-align:middle;
}
TABLE {
border:solid 1px blue;
}
div.clsTwoBoxContainer {
width:15em;
height:13em;
text-align:center;
border:solid 1px green;
}
div.clsFourBoxContainer {
width:12em;
height:17em;
border:solid 1px green;
}
div.clsFloatLeft {
float:left;
border:solid 2px red;
}
div.clsFloatRight {
float:right;
border:solid 2px red;
}
#idBox1 {
width:7em;
height:10em;
}
#idBox2 {
width:7em;
height:10em;
}
div.clsTitleAndNotes {
text-align:left;
vertical-align:top;
}
//--></STYLE>
</HEAD>
<BODY TEXT="black" BGCOLOR="#FFFFCC" ALINK="red" LINK="Purple" VLINK="Navy">
<DIV CLASS="clsTitleAndNotes">
<H2>M13-fullcircle CSS Bugs with Floating DIVs - Tests</H2>
<UL>
<LI>Floating DIV with unspecified size loses its size when contained
table uses ALIGN</LI>
<LI>DIV float inherited and overriding text-align value</LI>
<LI>Possible bug or illusion: table ALIGN overrides float direction of
containing DIV</LI>
</UL>
<P>Software/System<BR>PC browser mozilla-win32-M13-fullcircwin32-
M13le.zip, 486-80
clone, Windows NT Workstation 4.0 Service Pak 6 </P>
<H2>Expected Result</H2>
<P>Tables are horizontally centered in containing DIVs. Div 1 is floated
left with its left border against the containing DIV. Div 2 is floated
right
with its right border against the containing DIV.</P>
<P>For Internet Explorer 5.0 and Netscape Communicator 4.7, Tests 1
through 3 looked identical in each browser.</P> <HR><!--
_______________________________________________________________________ -->
<BR><BR>
<H3>Test 1</H3>
<H4>No ALIGN in Tables</H4>
<P>Desired result, <EM>nearly</EM> correct, except for left justification
of text (from inherited float), both DIVs are flush with left and right
margins. Border and contents are nested.</P> </DIV>
<!--
_______________________________________________________________________ -->
<!-- Inner DIVs with floats, TABLE no ALIGN -->
<!-- _______________________________________________________________________ -->
<DIV CLASS="clsTwoBoxContainer"> Outer Div
<!-- Box 1 -->
<DIV CLASS="clsFloatLeft"> Div 1<BR>Float Left
<TABLE BORDER="1" WIDTH="110" HEIGHT="160">
<TR>
<TD> Table 1<BR>no ALIGN</TD>
</TR>
</TABLE> </DIV>
<!-- Box 2 -->
<DIV CLASS="clsFloatRight"> Div 2<BR>Float Right
<TABLE BORDER="1" WIDTH="110" HEIGHT="160">
<TR>
<TD> Table 2<BR>no ALIGN</TD>
</TR>
</TABLE> </DIV> </DIV> <HR><!--
_______________________________________________________________________ -->
<BR><BR>
<DIV CLASS="clsTitleAndNotes">
<H3>Test 2</H3>
<H4>ALIGN=LEFT in one Table</H4>
<P>Observed bug: table 2 has shifted outside DIV 2 and DIV 2 is
narrower.</P> </DIV>
<!--
_______________________________________________________________________ -->
<!-- Inner DIVs with floats, 2nd TABLE has ALIGN -->
<!-- _______________________________________________________________________ -->
<DIV CLASS="clsTwoBoxContainer"> Outer Div
<!-- Box 1 -->
<DIV CLASS="clsFloatLeft"> Div 1<BR>Float Left
<TABLE BORDER="1" WIDTH="110" HEIGHT="160">
<TR>
<TD> Table 1<BR>no ALIGN</TD>
</TR>
</TABLE> </DIV>
<!-- Box 2 -->
<DIV CLASS="clsFloatRight"> Div 2<BR>Float Right
<TABLE ALIGN="left" BORDER="1" WIDTH="110" HEIGHT="160">
<TR>
<TD> Table 2<BR>left ALIGN</TD>
</TR>
</TABLE> </DIV> </DIV> <HR><!--
_______________________________________________________________________ -->
<BR><BR>
<DIV CLASS="clsTitleAndNotes">
<H3>Test 3</H3>
<H4>ALIGN=LEFT in Table 2, DIVs with no content</H4>
<P>Table 2 has shifted completely outside of DIV 2 and DIV 2 has no/zero
dimensions</P> </DIV>
<!--
_______________________________________________________________________ -->
<!-- Inner DIVs with floats, 2nd TABLE has ALIGN -->
<!-- _______________________________________________________________________ -->
<DIV CLASS="clsTwoBoxContainer"> Outer Div
<!-- Box 1 -->
<DIV CLASS="clsFloatLeft">
<TABLE BORDER="1" WIDTH="110" HEIGHT="160">
<TR>
<TD> Table 1<BR>no ALIGN</TD>
</TR>
</TABLE> </DIV>
<!-- Box 2 -->
<DIV CLASS="clsFloatRight">
<TABLE ALIGN="left" BORDER="1" WIDTH="110" HEIGHT="160">
<TR>
<TD> Table 2<BR>left ALIGN</TD>
</TR>
</TABLE> </DIV> </DIV> <HR><!--
_______________________________________________________________________ -->
<BR><BR>
<DIV CLASS="clsTitleAndNotes">
<H3>Test 4</H3>
<H4>ALIGN=LEFT in Table 2, DIVs have width and height specified</H4>
<P>Desired result, presentation about the same as Example 1 except div
boxes are different sizes. (In Example 1 sizes are derived from
contents, while
here they are specified in ems. )</P> </DIV> <!--
_______________________________________________________________________ -->
<!-- Divs with specified sizes, inner DIVs with floats, 2nd TABLE has ALIGN -->
<!-- _______________________________________________________________________ -->
<DIV CLASS="clsTwoBoxContainer"> Outer Div
<!-- Box 1 -->
<DIV ID="idBox1" CLASS="clsFloatLeft">
<TABLE BORDER="1" WIDTH="110" HEIGHT="160">
<TR>
<TD> Table 1<BR>no ALIGN</TD>
</TR>
</TABLE> </DIV>
<!-- Box 2 -->
<DIV ID="idBox2" CLASS="clsFloatRight">
<TABLE ALIGN="left" BORDER="1" WIDTH="110" HEIGHT="160">
<TR>
<TD> Table 2<BR>left ALIGN</TD>
</TR>
</TABLE> </DIV> </DIV>
<HR><!--
_______________________________________________________________________ -->
<BR><BR>
<DIV CLASS="clsTitleAndNotes">
<H3>Test 5</H3>
<H4>Two dimensions - 4 DIV/Tables</H4>
<P>Tables 1 and 3 have ALIGNS. </P><P>Expect to see two rows.</P>
<PRE>First row: Table 1 Table 2<br>Second row: Table 3 Table 4</PRE>
<P>Internet Explorer 5.0 gives expected result. Netscape Communiator 4.7
overlays the second row on the first.</P> </DIV>
<!--
_______________________________________________________________________ -->
<!-- Four DIVS containg tables. Tables 1 and 3 have
ALIGNS. -->
<!--
_______________________________________________________________________ -->
<DIV class="clsFourBoxContainer">
<DIV CLASS="clsFloatLeft">
<TABLE align="left" border="1" WIDTH="100" HEIGHT="150">
<TR>
<TD>Table 1</TD>
</TR>
</TABLE> </DIV>
<DIV CLASS="clsFloatRight">
<TABLE border="1" WIDTH="100" HEIGHT="150">
<TR>
<TD>Table 2</TD>
</TR>
</TABLE> </DIV>
<DIV CLASS="clsFloatLeft">
<TABLE align="left" border="1" WIDTH="100" HEIGHT="150">
<TR>
<TD>Table 3</TD>
</TR>
</TABLE> </DIV>
<DIV CLASS="clsFloatRight">
<TABLE border="1" WIDTH="100" HEIGHT="150">
<TR>
<TD>Table 4</TD>
</TR>
</TABLE> </DIV>
</DIV>
<HR><!--
_______________________________________________________________________ -->
<BR><BR>
<P>This text shoud be center, but win32-M13-fullcircwin32 showes it left
justified.</P>
<!-- _______________________________________________________________________ -->
</BODY>
</HTML>
=========================================================
K. Hunt
notardis@ca.freei.net
awesome test case. thanks! setting to M16, at which time we hope to address a
whole bunch of floater problems.
Summary: DIVs containg tables with align positioned incorrectly → [FLOAT] DIVs containg tables with align positioned incorrectly
Target Milestone: M16
|
||
Comment 4•25 years ago
|
||
This is also rearing its head on http://mlive.com. I'm attaching a small testcase.
|
|
||
Comment 5•25 years ago
|
||
mass-moving all remaining M16 bugs to M17
Status: ASSIGNED → NEW
Target Milestone: M16 → M17
|
||
Comment 7•24 years ago
|
||
Nom. nsbeta3. html4 layout bug that actually affects known sites on the web.
Recc. nsbeta3+.
|
Assignee | |
Updated•24 years ago
|
|
|
||
Comment 8•24 years ago
|
||
correctness and backward compatibility with existing content. PDT please approve.
Keywords: correctness
I think this is basically the same as bug 23322. There, I wrote:
The CSS spec says that floats without a 'auto' width should have (or tend
toward, due to min-width rules) a width of 0. So I think the issue here is
basically the same as the one for which bug 12272 was reopened -- whether an
inner float that overfloats an outer float should affect the flow outside the
outer float. I tend to think it should, but it needs to be discussed in the CSS
WG or on www-style. (I've been thinking about that CSS needs a better way of
describing its formatting model by more clearly defining block formatting
context and inline formatting context, and perhaps float formatting context too...)
|
||
Comment 10•24 years ago
|
||
Denying approval for beta3: this is a symptom of a general probem with floats
inside of floats (see bug bug 23322) which we do not have time to address for
beta3 - sorry.
Whiteboard: [nsbeta3-]
Target Milestone: M17 → Future
|
|
Assignee | |
Comment 11•24 years ago
|
||
Taking bug to examine it.
If it really is an issue of nested floats not affecting outer floats, then the
WG has decided that nested floats should have no effect on the floated
ancestor's ancestors, so this is INVALID.
Assignee: buster → py8ieh=bugzilla
Severity: normal → minor
Priority: P1 → P4
QA Contact: petersen → chrisd
Whiteboard: [nsbeta3-] → [nsbeta3-] INVALID? (py8ieh:reexamine)
Target Milestone: Future → M19
|
|
Assignee | |
Comment 12•24 years ago
|
||
Upon managerial request, adding the "testcase" keyword to 84 open layout bugs that
do not have the "testcase" keyword and yet have an attachement with the word
"test" in the description field. Apologies for any mistakes.
Keywords: testcase
|
||
Comment 13•24 years ago
|
||
Bug 23322 has been marked invalid. What about this one?
|
|
Assignee | |
Comment 14•24 years ago
|
||
Netscape's standard compliance QA team reorganised itself once again, so taking
remaining non-tables style bugs. Sorry about the spam. I tried to get this done
directly at the database level, but apparently that is "not easy because of the
shadow db", "plus it screws up the audit trail", so no can do...
QA Contact: chrisd → ian
|
|
Assignee | |
Comment 15•24 years ago
|
||
|
|
Assignee | |
Comment 16•24 years ago
|
||
That test case has a lot of incorrect assertions in its expected results.
The only issue I see is that we are sizing a float without content to fit around
any floats inside it, but if we give it contents we (correctly) don't.
See tests 001-003 in:
http://www.hixie.ch/tests/adhoc/css/box/float/
I'm marking this INVALID and filing bug 69745 for the remaining issue, so that
it is easier to track (this bug has lots of confusing stuff in it...).
You need to log in
before you can comment on or make changes to this bug.
Description
•