page breaks...making attractive, printabl pages

sneakyimp

hi all:

i'm trying to make a printable version of my client's catalog. we are generating this from a complicated database...

i went to CSS first to see if i could get any help. sure enough, DOM or CSS or whatever specifies some print friendly style stuff like 'page-break-inside:avoid;' and so on, but i don't think any browsers out there actually support this stuff.

more info here:
http://www.w3.org/TR/2002/WD-CSS21-20020802/page.html

basically, i've tried that stuff and it does nothing for me. the problem i'm having is that i have a 2 column table. product photos on the left, text in the right. i have this problem frequently where the text on the right hand side prints a few lines but the product image isn't visible until the next page....it happens most often when a product image is just a wee bit too large to fit on the current page but there's a few lines of text in column 2 that will display just fine. it looks really awkward.

can anyone suggest an approach to prevent those lines of text from printing unless there's enough room for the product photo too?

Shrike

Internet Explorer supports CSS printer page breaks. Pretty sure that the Gecko engine will too, but I haven't tested that.

sneakyimp

maybe i'm confused about how it works then. i have a really simple page. a two-column table with occasional divider rows that span both columns. it's for a catalog..

Here's a sample page:
http://dweavers.com/dev/page_break.htm

the text near "angel hair cube" appears on the first page but the image associated with it appears on the next page despite the 'page-break-after' value being set in my table.

the source for this page looks like this:

<BODY>
<HTML>
<DIV STYLE="font-family:arial,helvetica,sans-serif;font-size:xx-large;">Dreamweavers Catalog</DIV>
<br><br><DIV STYLE="font-family:arial,helvetica,sans-serif;font-size:x-large;">Rugs</DIV>
XX item(s).<BR>

<TABLE CELLSPACING=0 CELLPADDING=0 BGCOLOR="#CCCCCC">
<tr>
  <TD HEIGHT=10 colspan=2></TD>
</tr>
<tr>
  <TD HEIGHT=10 STYLE="background-color:#ffffff;page-break-after:avoid;" colspan=2></TD>
</tr>

<TR STYLE="background-color:#FFFFFF; spacing:20px;">
  <TD VALIGN=TOP STYLE="page-break-inside:avoid;"><IMG HEIGHT=240 SRC="uploads/confetti_taupe.jpg"></p></TD>
  <TD VALIGN=TOP WIDTH=300 style="font-size:11px;font-family: arial,helvetica,sans-serif;page-break-inside:avoid;"><SPAN STYLE="font-size:16px;">Angel Hair Confetti</SPAN></p>34-6002 - Brown - 5'x7'<BR>34-6012 - Taupe - 5'x7'<BR>34-6102 - Brown - 6'x9'<BR>34-6112 - Taupe - 6'x9'<BR></p><BR></TD>
</tr>

<tr>
  <TD HEIGHT=10 colspan=2></TD>
</tr>

<tr>
  <TD HEIGHT=10 STYLE="background-color:#ffffff;page-break-after:avoid;" colspan=2></TD>
</tr>

<TR STYLE="background-color:#FFFFFF; spacing:20px;">
  <TD VALIGN=TOP STYLE="page-break-inside:avoid;"><IMG HEIGHT=240 SRC="uploads/angelcoraldesign.jpg"></p></TD>
  <TD VALIGN=TOP WIDTH=300 style="font-size:11px;font-family: arial,helvetica,sans-serif;page-break-inside:avoid;"><SPAN STYLE="font-size:16px;">Angel Hair Coral Design</SPAN></p>04-6006 - Natural - 5'X7'<BR>04-6106 - Natural - 6'x9'<BR>04-6406 - Natural - 8'x10'<BR></p><BR></TD>
</tr>

<tr>
  <TD HEIGHT=10 colspan=2></TD>
</tr>

<tr>
  <TD HEIGHT=10 STYLE="background-color:#ffffff;page-break-after:avoid;" colspan=2></TD>
</tr>

<TR STYLE="background-color:#FFFFFF; spacing:20px;">
  <TD VALIGN=TOP STYLE="page-break-inside:avoid;"><IMG HEIGHT=240 SRC="uploads/ah_cube.jpg"></p>

<TABLE>
<TR>
  <TD align=center style="font-family:arial,helvetica,sans-serif;font-size:10px;"><IMG SRC="uploads/ah_cube_black.jpg" WIDTH=60><BR>Black</TD>
  <TD align=center style="font-family:arial,helvetica,sans-serif;font-size:10px;"><IMG SRC="uploads/ah_cube_cream.jpg" WIDTH=60><BR>Cream</TD>
  <TD align=center style="font-family:arial,helvetica,sans-serif;font-size:10px;"><IMG SRC="uploads/ah_cube_red.jpg" WIDTH=60><BR>Red</TD>
  <TD align=center style="font-family:arial,helvetica,sans-serif;font-size:10px;"><IMG SRC="uploads/ah_cube_sage.jpg" WIDTH=60><BR>Sage</TD>
</TR>
</TABLE></TD>

  <TD VALIGN=TOP WIDTH=300 style="font-size:11px;font-family: arial,helvetica,sans-serif;page-break-inside:avoid;"><SPAN STYLE="font-size:16px;">Angel Hair Cube</SPAN></p>04-8701 - Black - 18"x18"x18"<BR>04-8724 - Cream - 18"x18"x18"<BR>04-8715 - Red - 18"x18"x18"<BR>04-8718 - Sage - 18"x18"x18"<BR></p><BR></TD>
</tr>
</TABLE>


</BODY>
</HTML>

sneakyimp

well, i've been testing this backwards and forwards...i tried the page-break-inside:avoid in the TR tag and in each TD tag and nothing seems to help. perhaps in the image tag?

OR does someone have any experience with PHP logic to make printable pages?