Closed
Bug 342198
Opened 19 years ago
Closed 19 years ago
Firefox does not seem to interpret the CSS 2.0 float property correctly.
Categories
(Core :: Layout: Floats, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: rfrey74, Unassigned)
Details
(Keywords: testcase)
Attachments
(1 file)
|
1.17 KB,
text/html
|
Details |
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4
I am trying to emulate a table by using div tags only in xhtml 1.0 strict. I have defined a css 2.0 file to handle special formatting for the div tags. The entire table is is enclosed in a div with the following formatting.
div.table {
background-color: red;
border-bottom: solid 1px black;
border-right: solid 1px black;
width: 793px;
}
Each row of the table is in a div with the following formatting.
div.row {
clear: left;
width: 793px;
}
And each cell of the table is in a div with the following formatting.
div.cell {
border-top: solid 1px black;
border-left: solid 1px black;
float: left;
text-align: center;
width: 60px;
}
The cells are nested in the rows, and the rows are nexted in a table. The problem accurs at the last row. All the rows are within the table div, but Firefox is rendering the last row outside of the table div. Below is the complete source for the page in question.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html>
<head>
<title>Notes</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
<!--
body {
font-family: verdana, sans, sans-serif;
font-size: 12px;
line-height: 18px;
}
div.cell {
border-top: solid 1px black;
border-left: solid 1px black;
float: left;
text-align: center;
width: 60px;
}
div.row {
clear: left;
width: 793px;
}
div.table {
/* background-color: red; */
border-bottom: solid 1px black;
border-right: solid 1px black;
width: 793px;
}
-->
</style>
</head>
<body>
<div class="table">
<div class="row">
<div class="cell">note\Hz</div>
<div class="cell">440.00</div>
<div class="cell">466.16</div>
<div class="cell">493.88</div>
<div class="cell">523.25</div>
<div class="cell">554.37</div>
<div class="cell">587.32</div>
<div class="cell">622.25</div>
<div class="cell">659.26</div>
<div class="cell">698.46</div>
<div class="cell">739.99</div>
<div class="cell">783.99</div>
<div class="cell">830.61</div>
</div>
<div class="row">
<div class="cell">A</div>
<div class="cell">♮</div>
<div class="cell">♯</div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell">♭</div>
</div>
<div class="row">
<div class="cell">B</div>
<div class="cell"> </div>
<div class="cell">♭</div>
<div class="cell">♮</div>
<div class="cell">♯</div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
</div>
<div class="row">
<div class="cell">C</div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell">♭</div>
<div class="cell">♮</div>
<div class="cell">♯</div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
</div>
<div class="row">
<div class="cell">D</div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell">♭</div>
<div class="cell">♮</div>
<div class="cell">♯</div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
</div>
<div class="row">
<div class="cell">E</div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell">♭</div>
<div class="cell">♮</div>
<div class="cell">♯</div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
</div>
<div class="row">
<div class="cell">F</div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell">♭</div>
<div class="cell">♮</div>
<div class="cell">♯</div>
<div class="cell"> </div>
<div class="cell"> </div>
</div>
<div class="row">
<div class="cell">G</div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell">♭</div>
<div class="cell">♮</div>
<div class="cell">♯</div>
</div>
</div>
<div>Text</div>
</body>
</html>
Reproducible: Always
Steps to Reproduce:
1. Copy the soure from the bug report to a new, local, html file
2. View html file with Firefox.
3.
Actual Results:
Last div.row nested in the div.table is being rendered outside of the div.table.
Expected Results:
Last div.row nested in the div.table should be rendered inside the div.table
When viewed in IE, the page is rendered properly. I'm not sure if this is a "feature" of either browser, but in any case, it seems odd to have an element nested in another element to be displayed outside the encompassing element.
|
||
Updated•19 years ago
|
Component: General → Layout
Product: Firefox → Core
QA Contact: general → layout
Version: unspecified → Trunk
|
||
Comment 1•19 years ago
|
||
|
|
||
Comment 2•19 years ago
|
||
The "rows" are all floats and does not add to the parent "table"
height, but since they clear the previous row there is "clearance"
introduced but only to the top of the last row.
See http://www.w3.org/TR/CSS21/visuren.html#flow-control
I think we render this correctly according to CSS 2.1.
Component: Layout → Layout: Floats
Keywords: testcase
OS: Windows XP → All
QA Contact: layout → layout.floats
Yes. IE expands the "table" container height to include all the floats starting in it, which is incorrect.
Status: UNCONFIRMED → RESOLVED
Closed: 19 years ago
Resolution: --- → INVALID
You need to log in
before you can comment on or make changes to this bug.
Description
•