Forum Moderators: not2easy

Message Too Old, No Replies

Page Break Before Table "Stretches" Table Across 2 Pages

         

samtediou

3:49 pm on Aug 14, 2008 (gmt 0)

10+ Year Member



I'm trying to print tables of cards (images and labels), one table per page, but using the page break stretches end the table on a 2nd page for each table. I've simplified the HTML to two one-celled tables for debugging, but I'm stuck. Can anybody see what the problem is?

You can view the test page at < sorry, no test pages - see Charter [webmasterworld.com] >

Below is the source code:

<html>
<head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<style type="text/css">
.own-page { page-break-before: always; }
</style>
</head>
<body>

These 2 cards should each print on their own page, but the
table cell extends to the following page as well so that
I print out an extra page for each card.
What am I doing wrong?

<hr>
<center>
<table class='own-page' cellpadding='0' border=1>
<tr>
<td valign='center' align='center' width='150' height='125'>
<img src='nothing.jpg' width=135 height=45>Card 1
</td>
</tr>
</table>
</center>

<center>
<table class='own-page' cellpadding='0' border=1>
<tr>
<td valign='center' align='center' width='150' height='125'>
<img src='nothing.jpg' width=135 height=45>Card 2
</td>
</tr>
</table>
</center>

</body>
</html>

[edited by: tedster at 7:05 pm (utc) on Aug. 16, 2008]

csuguy

11:25 am on Aug 16, 2008 (gmt 0)

10+ Year Member



I found the root of the problem. It seems that if you remove the image that it works perfectly. For whatever reason - putting the image (with a valid or invalid src) causes that extra space... I'm gonna mess with it a little more and get back to you.

csuguy

11:35 am on Aug 16, 2008 (gmt 0)

10+ Year Member



You maybe interested to know that the problem does not appear in IE6. It maybe a FF issue.

csuguy

12:14 pm on Aug 16, 2008 (gmt 0)

10+ Year Member



It seems that anything that causes a line break within the td causes the gap in FF. This could be an img, a div, or even a <br>.

csuguy

12:21 pm on Aug 16, 2008 (gmt 0)

10+ Year Member



I was able to solve the issue by using divs instead of tables to contain the cards.

csuguy

6:04 pm on Aug 16, 2008 (gmt 0)

10+ Year Member



If you need tables - you might be able to embed the table within the div tag! Tell me how this solution works out for u!