Why does printing in Firefox/IE lose info at end of 1st page?

Hi,

When I view my page in the browser, firefox/IE6 displays fine. When I select print preview I lose:
In Firefox - some details as it falls off the page (half way through a DIV).
In IE6 - all detais after the end of the page

Why doesn't it continue onto the top of the next page?

Here's some of the code, a lot of it isn't relevent. Try it in your browser...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Order Processing</title>
<style type="text/css">
* {padding: 0; margin: 0}

body,h1,h2,h3,h4,normal{
font-size: 0.90em;
font-family: Arial, Helvetica, sans-serif;
color:#041496;
}
h1,h2,h3,h4,h5,h6 {margin: 0.5em 0 0.5em 0; padding-left:0.2em;}
h1{font-size: 1.4em}
h1.small{font-size: 0.7em; font-weight:bold}
h1.medium{font-size: 0.9em; font-weight:normal}
h1.page {line-height:450%}
h1.half_page {line-height:250%}
h2{font-size: 1.22em}
h3{font-size: 1.2em}
h4{font-size: 1.0em}
p,ul{margin:0.5em; margin-bottom: 1em;}
/* p {padding: 0 0.5em 0 0.5em;} */
td {margin: 0}
option {padding: 0px 5px 0px 5px}
input[type="radio"] {
color:red;
}
textarea {margin:0.4em}
input,textarea,select {margin:0 0.3em 0.0em 0.3em;}
input {padding:2px}
.input_label {
margin: 0.3em 0.3em 0 0.3em;
text-align: left;
font-size: 0.8em;
}
.normal {font-weight: normal; color:#041496;}
.theme{color:#9900cc}
.large{font-size:1.2em}
.huge{font-size:1.6em}
.medium{font-size: 0.9em}
.small {font-size: 0.83em}
.tiny {font-size: 0.7em}
.warning {color: #FF0000}
.ok {color: #00CC00}
.input_warning {background-color: #FFD7D7}
.legal{font:Arial, Helvetica, sans-serif}
.menu_items {
color: #990099;
border-bottom-width: 1px;
}
.highlight {
color: #009933;
font-weight: bold;
}
.grayed {
color:#939DFD;
}

.space {padding-left:1em}

div.col1 {
float:left;
width:40%;
text-align: left;
}

div.col2 {
float:left;
width:60%;
text-align: left;
}

input.button{
padding:1px;
font-weight:bold;
font-family: Arial, Helvetica, sans-serif;
color:#041496;
}
input.input_small {width: 3em}
input.input_medium,input.input_date {width: 10em}
input.input_long {width: 20em}
input.input_extra_long {width: 35em}
input.number {text-align:right}

a:link,a:visited { color:#9900cc;text-decoration: underline; }
a:hover {text-decoration: underline; color: #00CC00}

a.plain_link:link,a.plain_link:visited { text-decoration: none; color:#041496;}
a.plain_link:hover {text-decoration: underline; color: #00CC00}

/* a.hide_link:link,a.hide_link:visited,a.hide_link:hover { text-decoration: none; color:#041496; border:0} */

/* Backgrounds + borders */
.background {background-color: #F8F0FF}
.light_backing {background-color: #B9FFB9}
.black_text {
color: black;
font-weight: normal;
}
.underline {text-decoration: underline}
.border {border-color: #E4C4FF}

/* Special */
.nowrap{white-space:nowrap}
.center{text-align:center}
.line{
height:1px;
border-bottom-style: dashed;
border-bottom-width: 1px;
}
.faint_line{
height:1px;
border-bottom: 1px dashed #BBC1FD;
}
img.plain{text-decoration: none; border:0}
img.no_border { border:0}

/* Layout */
#header {
/* float:left; */
width:100%;
height: 5.5em;/*70px*/
}

#header_left {
position:absolute;
left:0.5em;
background-color: #fff;
z-index: 2;
font-style: italic;
color:#9900cc;
}

#header_right {
position:absolute;
right:0;
margin-right:0.5em;
top:1.5em;
z-index: 1;
font-style: italic;
color:#9900cc;
background-color: #fff;
}
#header_right a {text-decoration:none}

#header_title {
font-size: 3em;
font-weight: bold;
font-family: Georgia, "Times New Roman", Times, serif;
}

#header_special {
font-size: 1.3em;
font-weight: bold;
}

#navbar {
float:left;
/*position : absolute;
top : 70px; */
width : 10.5em;
background-color: white;
padding-left:0.5em;
}

#search{
padding-top:0.2em;
padding-bottom: 0.2em;
margin-bottom: 0.2em;
background-color: #F3E8F7;
}

#content {
padding: 0.5em;
margin-left: 11em;
}

/* #xxrightbar{
z-index:1;
position: absolute;
top: 70px;
right: 0;
width: 150px;
background-color: white;
}*/

#rightbar{
float:right;
width: 150px;
background-color: white;
}

#footer {
left: 5px;
padding:5px;
background-color: #F3E8F7;
/* clear:both; nb: cleared in sperate div - IE bug*/
}

.special_offer {
font-size: 1.05em;
font-weight: bold;
color: red;
}

.original_price {
font-size: 0.9em;
color: blue;
/* text-decoration: line-through; */
}

.mini {
font-size: 0.85em;
}

.min_width {
width: 200px;
height:1px;
padding:0; margin:0;
}

/* Boxes */

.clear {clear:both}

.box_right { /* For images */
float:right;
width:150px;
margin:0.5em;
}

.box_main {
float: left;
width: 14em;
margin: 2px;
background-color: #E9D6EF;
}

.box_span {
margin: 3px;
float: left;
width:100%;
background-color: #F7F0F9;
}

.box_span_plain {
float: left;
width:100%;
}

div.box_seperator {
border-bottom: 1px dashed #BBC1FD;
padding-bottom:0.5em;
margin-bottom:0.5em;
}

div.nice_border {
border: 1px dashed #cccccc;
}

.box_inner {
width:90%;
margin: 3px;
padding: 0.5em;
margin-left: auto;
margin-right: auto;
}

.#*$!box_inner_half {
width:50%;
margin: 3px;
padding: 0.5em;
margin-left: auto;
margin-right: auto;
}

.border{
border: 1px solid #cccccc;
}

div.box_grid {
float: left;
width: 13em;
height:18em;
padding:0.3em;
margin:0.2em;
border-left: 1px dashed #cccccc;
border-bottom: 1px dashed #cccccc;
font-size:0.9em;
text-align:center;
}

div.product_info {
float: left;
width: 13em;
padding:0.3em;
margin:0.2em;
margin-top:3em;
width:18em;
border:1px solid gray;
font-weight:bold;
background-color: #F8F0FF;
text-align:center;
font-size:0.9em;
line-height:200%;
}

div.box_grid_250 {
width: 20em;
height:25em;
}

.box_grid li{
list-style: none;
margin: 7px 0 7px 0;
padding-left: 20px;
background-image: url(../images/tickbox.gif);
background-repeat: no-repeat;
text-align:left;
}
.box_grid a:link,.box_grid a:visited,.box_grid a:active{text-decoration: none; color:#041496}
.box_grid a:hover{text-decoration:none; color:#00CC00}

div.image {
width:150px;
height:150px;
overflow:hidden;
margin: 0 auto;
}

div.image_250 {
width:250px;
height:250px;
}

div.left50 {
text-align:left;
float:left;
width:50%;
}
div.left250 {
text-align:left;
float:left;
width:260px;
}

img.product, a img.product:link, a img.product:visited, a img.product:active {
border:2px solid #FFFFFF;
}
a img.product:hover {border:2px solid #00CC00}

a.info{
font-weight: bold;
border: 1px;
background-color: #00CC33;
font-size: 1.1em;
position:relative;
z-index:5;
}
a.info, a.info:link, a.info:visited, a.info:active{
color: #FFFFFF; text-decoration:none;
}

a.info:hover {z-index:6; background-color:#0000FF}
a.info span {display: none}
a.info:hover span {
display:block;
position:absolute;
top:2em;
left:-4em;
width:14em;
border:1px solid #000;
background-color:#CCCFE6;
padding:0.5em;
color:#000;
font-weight: normal;
text-decoration:none;
font-size:0.9em;
}

a.warn {background-color: #FF0000}
a.no_stock,a.in_stock,a.link {background-color: #FFFFFF}
a.no_stock, a.no_stock:link, a.no_stock:visited, a.no_stock:active {color: #FF0000}
a.in_stock, a.in_stock:link, a.in_stock:visited, a.in_stock:active {color: #00CC33}
a.no_stock:hover,a.in_stock:hover,a.link:hover {z-index:6; color:#FFFFFF;}
/* admin */

/* Fonts */

#header_admin {
width:100%;
top:0;
height:3em;
padding-top:0.2em;
white-space:nowrap;
background-color: #E9D6EF;
border-bottom: 1px solid #041496;
}
#header_left,#header_right { /* override master */
background-color: #E9D6EF;
color:#041496;
}
#header_right{top:0.1em; right:2em;}
.header_right_heading{top:0.1em; right:2em; font-size:2.2em}

#menu_admin {
position: absolute; top: 3em; left: 0em; width:51.0em;
/* float:left;
width:100%;
margin-bottom:5px;*/
/* */
}
#menu_admin_underlay {
background-color:#E2E2E2;
height:2em;
border-bottom: 1px solid #041496;
} /* width of menu bar */

#content_admin {
margin-top:1em;
margin-bottom:0.5em;
margin-left:0.5em;
}

.form_box {
border: 1px solid #cccccc;
background: #E9ECEF;
padding: 10px;
}

/*
div.desc {
clear:both;
float:left;
margin: 0.3em 0.3em 0 0.3em;
width:15em;
text-align: left;
}

div.field {
float:left;
margin: 0.3em 0.3em 0 0.3em;
width:28em;
text-align: left;
}
*/
div.desc {
clear:both;
float:left;
margin: 0.3em 0.3em 0 0.3em;
width:19%;
min-width:5em;
text-align: left;
}

div.field {
float:left;
margin: 0.3em 0.3em 0 0.3em;
width:78%;
min-width:5em;
text-align: left;
}

.input_box {
width: 10em;
margin: 0 0 1em 0;
border: 1px solid #cccccc;
}

.buttons {
float :right;
width :18em;
margin:0.3em;
}

.html_button{
margin: 2px;
border: 1px solid blue;
padding: 1px;
font-weight: bold;
color:#041496;
background-color: white;
}

.space {padding-left:1em}
.order{
text-align: right;
font-weight:bold;
font-size:1.2em;
}

.box {
border: 1px solid #041496;
padding: 0.5em;}

.float {
float:left;
padding:0.5em;
width:12em;
border: 1px solid #cccccc;
margin:0.2em;
}

.float_thumbnail,.float_small,.float_medium,.float_large {float:left; padding:0em; margin:0.3em; overflow:hidden;}
.float_thumbnail {width:4em; height:7em;}
.float_small {width:11em; height:13em;}
.float_medium {width:18em; height:20em;}
.float_large {width:32em; height:34em;}

.float_span {
float:left;
padding:0.5em;
width:100%
}

.selection_box_span,.details_box {
border: 1px solid #041496;
float:left;
width:99%;
background-color: #F5F5F5;
margin-bottom:1em;
padding-bottom:0.5em;
}

.left {
text-align: left;
}

/* Tables */
/* List table */

@media print {
#header_admin,#header_left,#header_right,#menu_admin_underlay,#menu_admin,#footer,.selection_box_span,.no_print {display:none}
#content_admin {margin:0}
}

</style>
</head>
<body>
<div id="content_admin">

<form method="post" name="system" action="#">
<div class="details_box">
<h1>Order 999 - Awaiting Despatch (2 days)</h1>
<div class="desc">Email address</div>

<div class="field">test@btinternet.com <a href="#" class="no_print">send email</a></div>
<div class="desc">Account no.</div>
<div class="field">123231231232 (name)</div>
<div class="desc">IP Address</div>
<div class="field">10.10.10.10 (country) <a href="#" class="no_print">track session</a></div>

<div class="desc">Notes</div>
<div class="field">special notes entered by user if available</div>
</div>
<div class="details_box">
<h1>Contact Details</h1>
<div class="desc">Telephone:</div>
<div class="field"><strong>home</strong> 123123123123 <strong>work</strong> 123123123123 <strong>mobile</strong> 123123123123</div>

<div class="desc">Bill to:</div>
<div class="field">Mrs Yvonne </div>
<div class="desc">Deliver to:</div>
<div class="field">Mrs Yvonne</div>
<div class="desc no_print"> </div>
<div class="field no_print"><a href="#">change contact details</a></div>

</div>
<div class="selection_box_span">
<h1>Actions</h1>
<p><a href="#">Add current shopping cart</a></p>
<p><a href="#">Create new order with same contact details (not-currently available)</a></p>
<p><a href="#">Cancel Order (if no invoice/refund issued)</a></p>
</div>

<div class="details_box">
<h1>Payment/Refund Summary</h1>
<table class="list medium"><tr><th>Date</th><th>Payment Method</th><th>Payment</th><th>Credit</th><th>Bank Charge</th><th>User</th><th>Notes<th></tr>
<tr><td>10 June 2005 10:45:20</td><td>Nochex</td><td>40.00</td><td> </td><td>0.50</td><td>automatic</td><td>initial order</td></tr>

<tr><td>12 June 2005 10:45:20</td><td>Cheque</td><td> </td><td> 5.00</td><td>0.00</td><td>Jez</td><td>Refund</td></tr>
<tr class="summary"><td> </td><td>Invoices</td><td>40.00</td><td colspan="4"></td></tr>
<tr class="summary"><td> </td><td>Credit Notes</td><td></td><td>-5.00</td><td colspan="3"></td></tr>

<tr class="summary"><td> </td><td>Balance</td><td>35.00</td><td colspan="4"></td></tr>
<tr class="summary"><td> </td><td>less received</td><td>-34.00</td><td colspan="4"></td></tr>
<tr class="summary"><td> </td><td><strong>Due</strong></td><td><strong>1.00</strong></td><td colspan="4"></td></tr>
</table>

<p class="no_print"><a href="#">Request payment from customer</a></p>
<p class="no_print"><a href="#">Add new entry</a></p>
</div>
<div class="details_box">
<h1>Invoices / Credit Notes</h1>
<p>Pro-forma Invoice <strong>300/1</strong> 10-June-2005 <em>automatic invoice</em> <a href="#" class="no_print">view</a> <a href="#" class="no_print">send to customer</a></p>

<p>Estimated weight: 1.4kg, Despatched 10-jun-2005</p>
<table class="list"><tr><th width="50%">Description</th><th>Price</th></th><th>Qty Required</th><th>Total</th><th>VAT Rate</th><th>Availability</th></tr>
<tr><td>(PIC) code - Big Frog</td><td>14.99 (10.99)</td><td>2</td><td>29.98 (25.00)</td><td>17.5%</td><td>reserved</td></tr>

<tr><td>(PIC) code - Big Frog</td><td>14.99 (10.99)</td><td>2</td><td>29.98 (25.00)</td><td>17.5%</td><td>on order</td></tr>
<tr><td>(PIC) code - Big Frog</td><td>14.99 (10.99)</td><td>2</td><td>29.98 (25.00)</td><td>Zero</td><td>on order</td></tr>

<tr><td>Special 10% Discount </td><td></td><td></td><td>-5.00</td><td>17.5%</td><td> </td></tr>
<tr class="summary"><td><strong>Total</strong></td><td></td><td></td><td><strong>45.00 (35.00)</strong></td><td></td><td> </td></tr>
<tr><td>VAT Breakdown</td><td></td><td></td><td>0</td><td>Zero</td><td> </td></tr>
<tr><td>VAT Breakdown</td><td></td><td></td><td>0</td><td>17.5%</td><td> </td></tr>

</table>
</div>
<div class="details_box">
<h1>Order Information</h1>
<div class="desc">Mailing List</div>
<div class="field">Accepted <a href="#" class="no_print">remove</a></div>
<div class="desc">How did you find us?</div>

<div class="field">I - Internet <em>google</em></div>
<div class="desc">Refering website</div>
<div class="field">www.testing.co.uk</div>
<div class="desc">Order Statistics</div>
<div class="field">pages viewed: 4, items:10, categories:5</div>
</div>

<div class="details_box">
<h1>History</h1>
<table class="list"><tr><th>Date</th><th>User</th><th width="70%">Details</th></tr>
<tr><td>10-jan-2005</td><td>jez</td><td>emailed customer (test@btinternet.com) <a href="#" class="no_print">view</a></td></tr>
<tr><td>10-jan-2005</td><td>jez</td><td>called to report faulty part, offered refund</td></tr>

<tr><td>10-jan-2005</td><td>jez</td><td>offered refund</td></tr>
</table>
<p class="no_print"><a href="#">Add new entry</a></p>
</div>
</form>

</div>

Why does printing in Firefox/IE lose info at end of 1st page?

css firefox ie print preview

jez300zx

directrix

doodlebee

YamaDharma

SuzyUK

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week