Open
Bug 621163
Opened 14 years ago
Updated 2 years ago
Printing/Print Preview w/thead and multiple thead rows causes second thead row on second page to render incorrectly
Categories
(Core :: Printing: Output, defect)
Tracking
()
UNCONFIRMED
People
(Reporter: clintp, Unassigned)
Details
Attachments
(1 file)
|
3.58 KB,
text/html
|
Details |
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13 ( .NET CLR 3.5.30729; .NET4.0E)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13 ( .NET CLR 3.5.30729; .NET4.0E)
The attached page has a <thead> element that has two rows. Styling applied to the second row in the <thead> renders perfectly onscreen and on the *first* printed page. On subsequent pages, the styling isn't applied to the row correctly.
In the example shown below, note the red border and the blue border onscreen. Those are correct. If you look at them in a print-preview mode (or print them) on the first page, everything renders correctly as it did onscreen.
The second (and subsequent printed pages) the red border vanishes and the blue border continues down the page -- this behavior is incorrect. (For comparison, IE 7 and 8 render this correctly).
HTML to reproduce the problem (pardon the length, but it has to span 2 printed pages):
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'
'http://www.w3.org/TR/html4/loose.dtd'>
<html>
<head>
<title>Test Report</title>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
<style type="text/css">
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
tbody {display: table-row-group; }
table { border-collapse: collapse; }
td.titlebox { border-bottom: 3px solid black; }
td.footer {
border-top: 3px solid black;
border-bottom: 3px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td class='titlebox' colspan='2'>
<table>
<tr>
<td>
This is the title of my report
</td>
</tr>
</table>
</td>
</tr>
<tr class='headerrow' style="border-bottom: 5px red solid; border-right: 2px blue solid;">
<td class="header">Header1</td>
<td class="header">Header2</td>
</tr>
</thead>
<tfoot>
<tr>
<td class="footer" colspan='2'>
<table>
<tr>
<td>
This is my footer
</td>
</tr>
</table>
</td>
</tr>
</tfoot>
<tbody>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
<tr><td>Detail 1</td><td>Detail 2</td></tr>
</tbody>
</table>
</body>
</html>
Reproducible: Always
Steps to Reproduce:
1. Load the HTML into a Firefox browser.
2. Note the placement of the red/blue borders in the <thead>.
3. Go into "Print Preview" or print the document.
Actual Results:
Note that the red border has vanished, and the blue border has "leaked" into the <tbody>.
But only on the *second* (and subsequent) pages!
Expected Results:
The second page header should appear exactly like the first page header.
|
Reporter | |
Comment 1•14 years ago
|
||
Same as the inlined HTML noted in the bug.
|
||
Comment 2•14 years ago
|
||
Confirmed on
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b9pre) Gecko/20101222 Firefox/4.0b9pre ID:20101222030351
and
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.14pre) Gecko/20101215 Firefox/3.6.14pre ID:20101215033249
|
|
||
Updated•14 years ago
|
Component: General → Printing: Output
Product: Firefox → Core
QA Contact: general → printing
|
||
Updated•2 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•