Print Page Break - HTML Page Break

Is there a way to put a character within HTML so when someone prints the HTML form/screen I can force a page break. I want to develop a new HTML form/screen for an employee to fill out, and when they print it the screen/form prints two separate pages. I want to be able to control where the 2nd page starts.
tomhoranAsked:
Who is Participating?
 
RichieHindleConnect With a Mentor Commented:
You need to use the CSS "page-break-before" or "page-break-after" properties.  Here's a working example:

<html>
<head>
<style type='text/css'>
@media print
{
    .pagestart
    {
        page-break-before: always;
    }
}
</style>
</head>
<body>
<p>This is on page 1.</p>
<p class='pagestart'>This is on page 2.</p>
</body>
</html>
0
 
tomhoranAuthor Commented:
That's eay .. will that work in both IE and netscape .. anothers all browsers ?
0
 
RichieHindleCommented:
I tested it in IE6 and Firefox 1.0PR on XP.  I don't have older versions to try it with, but I'd be very surprised if it didn't work in IE5+ and Netscape 6+.
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
nan1217Commented:
I had a hard time getting those CSS properties to work and ended up using a PDF component to have ultimate control.  ABCPDF (abcpdf.com) can be used free if you link back to their site.  If you pay for a component, I like ASPPDF (asppdf.com).
0
 
RichieHindleCommented:
nan1217: Can you elaborate on 'a hard time'? Did you find that older browsers didn't support them, or were buggy, or that the properties didn't work with your content...?
0
 
nan1217Commented:
The properties didn't work for me.

Here's an example of someone else using these properties in a PAQ.  http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_21118256.html
0
 
Gary_EisertCommented:
What I do is pick a tag where you want the page to break. In this example I used the  H3 tag

In the header add this line

<STYLE>H3 { PAGE-BREAK-BEFORE: always }</STYLE>

Wherever the <H3> is in the body of your page it will produce a page break.

In order to test it, use IE 5+ and try the Print Preview. You should be able to see if it works on screen.
0
All Courses

From novice to tech pro — start learning today.