View Full Version : How can I suppress a page break between body & footer?

03-09-2005, 06:34 PM

I've set up a print style sheet that successfully suppresses images and navbar content that I don't want, while printing the body content and footer that I DO want, butttt, a page break occurs before the footer prints. There's lots of room on the print page, so naturally I would like to see this footer appear on the same page as the body. I'm sure this has to do with my use of tables (standard header, side bar, body to the right, footer format), but I haven't tweaked on a solution. I've experimented with page-break-after: avoid on the body, and page-break-before: avoid on the footer, with no success.

Here is a simplified version of my HTML:
<td class="noprint"> /* Logo & stuff I don't want to print */ </td>
<td> /* Company stuff I DO want to print */ </td>
<td class="noprint"> /* Nav Bar stuff */ </td>

<td id="content"> /* Prints wonderfully, with no left margin
taken up by the side bar that I didn't want printed. */ </td>
<td id="footer" height="61" align="center">
/* Prints, but spits out a page break first */

All suggestions much appreciated!


03-09-2005, 08:06 PM
<tr> tags are table rows, and I don't think they can be styled to display inline. Because they're rows, (obviously) the cells they contain will appear on different lines. If one of your rows extends beyond the page, the browser will probably cut it off rather than cutting the text in it off. You will probably have to change your markup to modify this behaviour; I'd recommend making it semantic, but that's up to you.

03-10-2005, 09:50 PM
Thanks CF, but I don't understand what you mean. I am new to style sheets, so I was pretty impressed just being able to suppress the printing of certain cells! Do you mean that I should look for a problem within the row that represents the "body" of the page? If this makes any difference, the <td> representing the body was previously hard-coded at a particular height, and I changed it to 100% to see if this would eliminate the page-break, but it didn't make a difference.

Can you please clarify what you meant by "change your markup"?

03-10-2005, 10:34 PM
Simply put, you're a victim of table semantics (http://www.codingforums.com/showthread.php?t=53165).

When tables print, any row that extends below the page will be moved to the following page. It makes sense for tabular data because you would probably want all of the data in a row to be on one page. For an exaple of this behaviour, type this into your address bar and print preview it:

javascript:document.write("<table><tr><td>Row 1</td></tr><tr><td height=\"2000px\" style=\"vertical-align: top;\">Row 2</td><tr></table>")

I don't know how to get around this behaviour with CSS, but converting to semantic markup (not using tables for layout) should solve it.

With page divisions (<div>s):

javascript:document.write("<div>Line 1</div><div style=\"height: 2000px;\">Line 2</div>");

Note that the page doesn't break before the second div. While I'm speaking about semantics I should note that using the style attribute is deprecated and does nothing for seperating content and style, I was just providing a quick example :) .

There has to be another way around this, there are lots of table layouts out there and it doesn't make sense that none of them would print :confused: . Then again, there are a lot of sites that offer printable versions of their pages.

03-10-2005, 11:17 PM
Thanks CFC!

OK - you've definitely clarified things for me! Naturally I would just love to leave the table in place and have everything print hunky-dory, but you've given me enough information that I can test with. It amazes me how many sites don't even have provisions for printing (correctly).

Thanks again!