homepage Welcome to WebmasterWorld Guest from 54.226.93.128
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Main text runs into footer with print css
reitking




msg:3807185
 3:08 pm on Dec 14, 2008 (gmt 0)

I am trying to put a footer at the bottom of every printed page, and it is successful. However, the main text runs into the footer on some pages.

I have tried a bunch of things with the main text and the footer to try to prevent this, but I haven't been successful (margins, bottom, etc.).

This is a test page I put together that shows the text running into the footer on print preview.

Any suggestions would be very helpful. I'm sorry this isn't displaying correctly, I'm new to this forum and can't seem to figure out how to format this correctly.


<style type="text/css" media="screen">
div#main{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #006910;
text-decoration: none;
text-align: center;
}
div#footer {display: none;}
</style>

<style type="text/css" media="print">

div#main{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #006910;
text-decoration: none;
text-align: center;
}

div#footer {display: block; position: fixed; bottom: 0;
}
</style>
<body>
<div id="main"><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p><p>Lorum Ipsum Test Print</p></div>
<div id="footer">Test Footer - Please don't cover me with other text or I'm going to cry! WAAAAAA!</div>
</body>

 

lavazza




msg:3807383
 8:37 pm on Dec 14, 2008 (gmt 0)

Try adding clear:both; to your footer style

e.g.
div#footer {display: block; position: fixed; bottom: 0; clear:both;
}

tr8er8




msg:3807403
 9:16 pm on Dec 14, 2008 (gmt 0)

in your footer try this:


div#footer {display: block; position: relative; bottom: 0; }

reitking




msg:3807596
 3:59 am on Dec 15, 2008 (gmt 0)

Thank you for the suggestions. The second one puts the footer at the bottom of the last printed page, but not on the other pages. The clear:both didn't solve the problem.

If anyone has any other suggestions, they would be appreciated.

alt131




msg:3807682
 8:25 am on Dec 15, 2008 (gmt 0)

Hi reitking, and welcome to webmaster world ;)

Something to think about when approaching this:

position:relative locates div#footer in the flow so it prints after div#main(expected). position:absolute takes the element out of the document flow and positions it relative to the containing box, Browser interpretations vary and it prints at either the end of the first or last page.

position:fixed is calculated according to the absolute model, so conforming browsers fix div#footer relative to the viewport bottom and longer content scrolls "underneath". So too in print - hence div#footer appears to "overlay" the text in div#main. That is, display:fixed is behaving as expected - just not producing the outcome desired. Marign and padding and clear (although the document structure means there is nothing to clear) won't work to "push" the elements apart because div#footer has been removed from the flow and positioned according to the containing box, not the other elements.

However, unless in a controlled environment my concerns are that div#footer does not print at all in winSafari, OP9 flavours print it fixed at the original viewport height with the footer text positioned (and overlaid) about 1/2 way down a printed page. Only FF2&3 places it the printed page bottom - but with the undesired overlay. ie6 (I'm unable to text printing in ie7 right now) doesn't understand fixed, so prints it after div#main.

My hunch is that display:fixed isn't the right tool, but my printing is super-simple so work arounds might exist that I'm not aware of.

However, there might be other ways - what is in the footer that you are trying to print?

reitking




msg:3807924
 4:39 pm on Dec 15, 2008 (gmt 0)

I'm just trying to put a typical copyright type notice on each printed page:

Powered by example.com technology

Thanks for all the suggestions. For now, I just have it printing on the last page, but if anyone has a better solution to make it print on each page, that would be fantastic.

torpQc




msg:3813959
 2:44 pm on Dec 24, 2008 (gmt 0)

hi everybody,

I searched this for a while but with reitking's post I got the biggest part of the solution. Thanks to you reitking !

Here is my solution. I add a main table with thead and tfoot section to my html code. The tfoot section of the table is only used as a "spacer". Because the real footer is fixed it may overwrites other contents. the tfoot then leaves a blank section at the bottom of every pages.

Here is my code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>Service request</title>

<style type="text/css">
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
html, body{height: 100%; width: 100%; margin: 0; padding: 0; border: 0;}
#footer {display: none;}
</style>

<style type="text/css" media="print">

#footer {display: block; position: fixed; bottom: 0;

}
#mainDiv{
margin-left:15px;
}
</style>

</head>
<body>
<form id="form1" >
<div id="mainDiv">


<table border="0" width="100%">
<!--define a table header so the header will be repeated on every pages-->
<thead>
<tr>
<th style="width:100%">
page header content
</th>
</tr>
<tr>
<th><hr style="color:#000080"/></th>
</tr>
</thead>

<!--Define a tfoot just as a bottom page padding. leave it blank so the main page content will not writes over the page footer (define at the bottom of the page)-->
<tfoot>
<tr>
<td width="100%">
<table width="100%" border="0">
<tr>
<td colspan="4"><br />&nbsp;</td>
</tr>
</table>
</tfoot>

<tbody>
<tr>
<td width="100%">
put your large html code here to generate a multipage printout
</td>
</tr>

</tbody>

</table>
<!--define a fixed table which contains the real footer. Only displayed on print media...see style section-->
<table id="footer" width="100%">
<tr>
<td width="100%">
put footer text here
</table>

</div>
</form>
</body>
</html>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved