Layout: Page Break

started by Jglenn123 on Jan 14, 2004 — RSS Feed

Jglenn123 Jglenn123
Posts: 4

We use CSS for all our designs.  When I design a "printable" page - without any fancy colors, etc., I want to force a page break at different points.

I add }
.PageBrk
{
   PAGE-BREAK-BEFORE: always
}
to my style sheet.  Then when I want to force the page break I add <tr class="PageBrk"> at the beginning of the row where I want the page break to occur.  This cause the page to break properly - when you view it in Explorer or Netscape.  However, there are extra blank spaces at the top of each printed page and I can't figure out how to eliminate them.  (Eliminating the forced page breaks eliminates the blank lines, but I need the page breaks).  Thus my problem.  Any help would be appreciated.

Joe Gillespie Joe Gillespie
Posts: 528

Have you tried setting a negative top margin?

Using media="print" is a black art at the best of times, don't expect too much. I gave up on it some time ago!

Joe

Jglenn123 Jglenn123
Posts: 4

I'll give that a try.  Thanks for the quick response.

Vladimir Vladimir
Posts: 53

Joe, what made you give up on that idea?

I have been trying this but I have a problem, similar to that of jglenn123. My pages are separated into different DIVs that define the header, footer, leftbar, rightbar, and centercontent. When people print my page, I would like them to print only the centercontent region. So, for my "print" style sheet, I specify all the other regions with "visibility:hidden". When I 'print previewed' my page, those regions were indeed hidden but occupied a large blank area, thus forcing the centercontent region to be at the bottom of the page.  >

Are there any ways to fix it? Thanks.

Joe Gillespie Joe Gillespie
Posts: 528

Vladimir said:
Joe, what made you give up on that idea?

Print stylesheets for simple layouts are okay but more complex ones cause problems. The ways different browsers render on screen seems to be increased by several magnitudes with their printing abilities. The whole thing is too flaky to contemplate. If it is important to print a page, ie for an invoice, I think it's better to produce a 'printer friendly' page that is custom designed for the purpose rather than a 'compromised' screen layout.
I have been trying this but I have a problem, similar to that of jglenn123. My pages are separated into different DIVs that define the header, footer, leftbar, rightbar, and centercontent. When people print my page, I would like them to print only the centercontent region. So, for my "print" style sheet, I specify all the other regions with "visibility:hidden". When I 'print previewed' my page, those regions were indeed hidden but occupied a large blank area, thus forcing the centercontent region to be at the bottom of the page.  >

Are there any ways to fix it? Thanks.

Instead of making the regions invisible, try changing their widths to zero. You will also need to set [red]overflow: hidden[/red]. You can test this by setting the print stylesheet to [red]media='screen'[/red] and commenting the original media='screen' out temporarily.

Note, this will not work if you have absolutely positioned the boxes.

Bpu_webguy Bpu_webguy
Posts: 2

The other problem I've had with print stylesheets (and yes, my print and close this page buttons don't show up) is that on most printers, I get an extra blank page.....

Jdenny Jdenny
Posts: 65

[hr]the origional post: use an @media or @import rule to specify style sheets that are only used for printing.
http://www.w3.org/TR/REC-CSS2/media.html
@import url("myprintstyle.css" print;
@media print {
 /* inline style-sheet for print goes here */
}

[hr]
alternative to invisible:

dont use visibility: hidden; unless you want the element to take up space.
instead, use display: none;
[hr]

Mountie Mountie
Posts: 11

JDenny said:
[hr]the origional post: use an @media or @import rule to specify style sheets that are only used for printing.
http://www.w3.org/TR/REC-CSS2/media.html
@import url("myprintstyle.css" print;
@media print {
 /* inline style-sheet for print goes here */
}

[hr]
alternative to invisible:

dont use visibility: hidden; unless you want the element to take up space.
instead, use display: none;
[hr]


I've also found visibility: collapse; useful.

See http://ess.case.edu for what I mean.  The media="print" directive works OK in IE 6 and Mozilla, though I haven't tried printing with other browsers.

Jdenny Jdenny
Posts: 65

mountie said:

I've also found visibility: collapse; useful.


Interesting, do you know how it compares to display: none; for example do text-readers still read the content out?

Mountie Mountie
Posts: 11

JDenny said:


Interesting, do you know how it compares to display: none; for example do text-readers still read the content out?


'Fraid not, I don't have any text-readers to try it out in.

You must login to reply