Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Page break before - Page Break After - Pulls the page down when printing - Why?

Posted on 2004-09-03
10
Medium Priority
?
5,192 Views
Last Modified: 2007-12-19
I'm trying to format ASP files for optimum print output. I want my pages to be seperated in specific areas upon print. I've tried applying CSS 2 print attributes such as "page-break-before", "page-break-after" and "page-break-inside", but they don't give me the output I'm looking for.

For example, I have an ASP file which spans over two pages when printed. In these two pages, a table is split in half, where we have half the table on one page and the other half on the second page. I'd like to force the table to print only on the second page, without getting split.

I've applied the attributes, and tried numerous variations, to no avail.

I CAN bring the table to a new printed page, but the previous page's content is PULLED DOWN as if I had aligned it to the bottom of the printed document.

Please help!!! I seem to be doing something wrong, but don't know where and why.
0
Comment
Question by:vanauden
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
10 Comments
 
LVL 31

Expert Comment

by:seanpowell
ID: 11975190
You may be doing nothing wrong, CSS Print and HTML tables are about as compatible as oil and water.

It would help greatly if I could see your source code.

Thanks,
Sean
0
 
LVL 1

Author Comment

by:vanauden
ID: 11976502
Thanks for the reply Sean! Greatly appreciated!

Here are the CSS classes I've created and tried testing with:

   div.overhead   {
                         page-break-before: auto;
                         page-break-after: auto;
                         }

   pre.pagebreak {
                         page-break-inside: avoid;
                         }

I've tried all permutations of these classes within an ASP file, especially around a simple HTML table as shown below, (not built using CSS) to make sure it didn't break over 2 pages because of the content.

Here's an example of the type of simple table I'm talking about. I didn't insert my full page code content as it's quite lengthy. Keep in mind that the ASP code you see within the brackets are calling content from a database. If you want to test at your end, you'll have to replace the ASP code with plain text. The table example:

<table width="80%" class="tableborder" cellpadding="5" align="center">
   <tr>
      <td><%XLAT "f20_16_a_044"%>
      <ol>
         <li><%XLAT "f20_16_a_045"%><br><span class="en"><%XLAT "f20_16_a_046"%></span><br><br>
            <ul>
               <li><%XLAT "f20_16_a_047"%><br><%XLAT "f20_16_a_048"%>&nbsp;<%XLAT "f20_16_a_049"%><br><br></li>
               <li><%XLAT "f20_16_a_050"%><br><%XLAT "f20_16_a_048"%>&nbsp;<%XLAT "f20_16_a_051"%><br><br></li>
               <li><%XLAT "f20_16_a_052"%><br><%XLAT "f20_16_a_048"%>&nbsp;<%XLAT "f20_16_a_053"%><br><br></li>
               <li><%XLAT "f20_16_a_054"%><br><%XLAT "f20_16_a_048"%>&nbsp;<%XLAT "f20_16_a_055"%><br><br></li>
              </ul>
           </li>
           <li><%XLAT "f20_16_a_056"%><br><%XLAT "f20_16_a_057"%><br><br><%XLAT "f20_16_a_048"%>&nbsp;<%XLAT "f20_16_a_058"%></li>
        </ol></td>
   </tr>
</table>

It's as simple as that, and when I insert my CSS attributes either using the div tag or the pre tag for print formatting purposes, it results in what I explained in my original post.

Thanks again for your help!
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 2000 total points
ID: 11976605
Well - the CSS that you've shown doesn't correspond to any of the code as you don't have any div's - although I'm sure you do in the full page.

So - with that in mind, I can't give you an example specific to your content - but I can show you what a basic page should look like that has content on Page 1, and automatically prints the table on Page 2.

Please let me know if we're getting closer :-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title></title>
<style type="text/css" media="print">

.tableborder
{
      page-break-before: always;
}

</style>

</head>
<body>

<p>This is the content on page one</p>

<table width="80%" class="tableborder" cellpadding="5" align="center">
      <tr>
            <td>Text</td>
      </tr>
</table>

</body>
</html>
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 4

Expert Comment

by:PeterCN
ID: 11977420
Just a minor note, but as far as I know, there isn't a single browser that supports the page-break-inside property yet.
0
 
LVL 1

Author Comment

by:vanauden
ID: 11977642
Hi seanpowell

Thank you for your help so far. I will have to pick this up on Tuesday next week.

So I will get back to this thread then.

I hope you don't mind.

Thank you!

0
 
LVL 1

Author Comment

by:vanauden
ID: 11997867
seanpowell

In the print output of what you are explaining the content of the first page still gets pulled down to the bottom of the page when the table is moved to the second page.

Is there a setting to keep the content of the first page aligned to the top of the page?

PS: please keep in mind that we are using PDFs as our print output.

thanks!
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11997997
>>Is there a setting to keep the content of the first page aligned to the top of the page?
No - but it depends on your layout. As noted, the code you posted is not enough for me to tell where you're going wrong, so I can't really be of much help unless I see it all. If you try the example I posted, the behaviour you're noticing should not be evident...

Sean
0
 
LVL 1

Author Comment

by:vanauden
ID: 11998514
Thank you seanpowell

You were correct. I made a mistake when trying your example.
0
 

Expert Comment

by:sburns875
ID: 13432749
vanauden,

Did you ever find a fix for the page one problem - not aligning at the top of the page?  I am having the same problem and it doesn't seem as though you received an answer or fix?

Shannon
0
 
LVL 1

Author Comment

by:vanauden
ID: 13433068
Well, my team finally figured it out to our satisfaction. Here is what we did:

One thing you should know before you do this: it is impossible to break a table between two printed pages. You either put the table on one page or the other OR you build two tables, one on each page, and the second table would be made to look like the end part of the first table.

The following code will allow you to break your page wherever you want and will produce printed pages aligned to the top of the page.

In your CSS file add this:

.pagebreak      { page-break-after: always; }

In your Web page you must decide what page element (table, paragraph, image) you consider to be the last thing on the page after which you want the page break.

Let's say, for instance, that you have a small table at the bottom of your page. You want the PRINTED page to BREAK after this table. Put the following code around the table: <div class="pagebreak"></div>

EXAMPLE:

<div class="pagebreak">
    <table>
      <tr>
         <td></td>
      </tr>
    </table>
</div>

That will make the printed page break right after the table, and the next page will be aligned to the top of the page.

Does this answer your question?

0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Suggested Courses

722 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question