Printing Page Footers

From:	Peter (BOUGHTONP)	9 Feb 2007 13:39
To:	ALL	1 of 2

31842.1

I'm doing some stuff that involves printing pages of HTML letters.

It all works wonderfully, except for the footers, which are all being lumped onto the bottom of the first page only.

There's probably a really simple way to fix this, but I think I'm falling asleep now because I can't figure it out, so I figured I'll ask here and hope someone else might be willing to have a go at fixing it.

Here's some sample code:

HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<style type="text/css">
 
html, body {width: 100%; height: 100%; margin: 0px; font-size: 11pt;}
 
*
{font-family: Helvetica;}
 
#page
{
 display: block;
 
 width: 205mm;
 height: 292mm;
 
 position: relative;
}
 
</style>
</head>
<body>
<div id="page18">
[content 18]
<div style="position: absolute; left: 13mm; bottom: 0mm; width: 55mm; font-size: 5pt; font-family: Helvetica;">[company info]</div>
<div style="position: absolute; right: 6mm; bottom: 0mm; width: 75mm; font-size: 5pt; font-family: Helvetica;">[fsa info]</div>
</div>
<br style="height: 1px; line-height: 1px; float: none; clear: both; page-break-after: always;"/>
<div id="page19">
[content 19]
<div style="position: absolute; left: 13mm; bottom: 0mm; width: 55mm; font-size: 5pt; font-family: Helvetica;">[company info]</div>
<div style="position: absolute; right: 6mm; bottom: 0mm; width: 75mm; font-size: 5pt; font-family: Helvetica;">[fsa info]</div>
</div>
<br style="height: 1px; line-height: 1px; float: none; clear: both; page-break-after: always;"/>
<div id="page20">
[content 20]
<div style="position: absolute; left: 13mm; bottom: 0mm; width: 55mm; font-size: 5pt; font-family: Helvetica;">[company info]</div>
<div style="position: absolute; right: 6mm; bottom: 0mm; width: 75mm; font-size: 5pt; font-family: Helvetica;">[fsa info]</div>
</div>
<br style="height: 1px; line-height: 1px; float: none; clear: both; page-break-after: always;"/>

Needs to work on IE's print preview, without any ActiveX shite.
(bonus points for getting it working with FF, but that isn't required)

Feel free to suggest new markup for the footers, so long as it looks identical and is in identical positions.

Thanks for any help.

3.1415P265E589T932E846R64338

0/0

Reply Quote

From:	Peter (BOUGHTONP)	9 Feb 2007 16:48
To:	ALL	2 of 2

31842.2 In reply to 31842.1

Okay, it was simple and I've fixed it.

Fortunately, we /will/ be able to dictate the browser to the person(s) that'll be using this bit, and so I can simply use position: fixed; and it all works good.

Here's the updated script for anyone interested:

HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<style type="text/css">
 
html, body {width: 100%; height: 100%; margin: 0px; font-size: 11pt;}
 
*
{font-family: Helvetica;}
 
#page
{
 display: block;
 
 width: 205mm;
 height: 292mm;
 
 position: relative;
}
 
.company_info
{
 position: fixed;
 left: 13mm;
 bottom: 0mm;
 width: 55mm;
 font-size: 5pt;
 font-family: Helvetica;
}
 
.fsa_info
{
 position: fixed;
 right: 6mm;
 bottom: 0mm;
 width: 75mm;
 font-size: 5pt;
 font-family: Helvetica;
}
 
.pageBreak
{
 height: 1px; line-height: 1px;
 float: none; clear: both;
 page-break-after: always;
}
 
</style>
</head>
<body>
<div id="page1">
[content 1]
<div class="company_info">[company info]</div>
<div class="fsa_info">[fsa info]</div>
</div>
<br class="pageBreak"/>
 
 
 
<div id="page2">
[content 2]
<div class="company_info">[company info]</div>
<div class="fsa_info">[fsa info]</div>
</div>
<br class="pageBreak"/>
 
 
 
<div id="page3">
[content 3]
<div class="company_info">[company info]</div>
<div class="fsa_info">[fsa info]</div>
</div>
<br class="pageBreak"/>
 
 
<div id="page4">
[content 4]
<div class="company_info">[company info]</div>
<div class="fsa_info">[fsa info]</div>
</div>
<br class="pageBreak"/>

3.1415P265E589T932E846R64338

0/0

Reply Quote