Question

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

Asked by: vanauden

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.

This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

  • Plus...
  • 30 Day FREE access, no risk, no obligation
  • Collaborate with the world's top tech experts
  • Unlimited access to our exclusive solution database
  • Never be left without tech help again

Subscribe Now

Asked On
2004-09-03 at 08:18:06ID21118256
Tags

page

,

break

,

table

Topic

Cascading Style Sheets (CSS)

Participating Experts
3
Points
500
Comments
10

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

  • "The time we save is the biggest benefit of Experts Exchange to Warner Bros. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange." Mike Kapnisakis, Warner Bros.
  • "Our team likes having a resource that is more secure than just using Google and most experts using this service really know their stuff. It's nice to look here first versus using Google." Dayna Sellner, Lockheed Martin
  • "Anytime that I've been stumped with a problem, 9 out of 10 times Experts Exchange has either the accepted solution or an open discussion of the potential solution to the problem." Kenny Red, eBay Inc.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.

Screenshot of Experts Exchange Knowledgebase

Need individual assistance?

Our experts are ready to help.

If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.

Screenshot of Experts Exchange Knowledgebase

Want to learn from the best?

Read articles from industry experts.

Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.

Screenshot of an Article

Working on a long term project?

Store your work and research.

Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.

Screenshot of Experts Exchange Knowledgebase

Access the answers to your technology questions today.

Subscribe Now

30-day free trial. Register in 60 seconds.

What Makes Experts Exchange Unique?

Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.

Trusted by the world's most respected brands.

image of each brand's logo

Faithfully serving IT professionals since 1996.

Experts Exchange Logo

Try it out and discover for yourself.

Subscribe Now

30-day free trial. Register in 60 seconds.

Related Solutions

  1. span formating?
    <div align="center" style="margin:7px 0px 5px 0px;border: solid 1px #bbbbbb; padding: 7px; font-size: 11px;white-space:nowwrap; text-align: center; > <span style="padding: 4px 0px 0px 0px; font-size: 12px; font-weight: bold; background: ...
  2. span alignment in IE
    on the top right of my page there is a div with a background image. inside the div is a span, an input and an ASP:image button. in firefox i have gotten all of the elements to align vertically center. in IE all of the elements except the <span> align vertically cente...
  3. Div Alignment (HTML & CSS)
    Hi, I'm trying to create the layout for a webpage using div's and CSS. I want to use a fixed width and have the page in the center of the browser. (Just like the Premium skin of this website). So far Ive created, sized and positioned all of the div's. However I cant align t...

Free Tech Articles

  1. WARNING: 5 Reasons why you should NEVER fix a computer for free.
    It is in our nature to love the puzzle. We are obsessed. The lot of us. We love puzzles. We love the challenge. We thrive on finding the answer. We hate disarray. It bothers us deep in our soul. W...
  2. SCCM OSD Basic troubleshooting
    SCCM 2007 OSD is a fantastic way to deploy operating systems, however, like most things SCCM issues can sometimes be difficult to resolve due to the sheer volume of logs to sift through and the dispe...
  3. Migrate Small Business Server 2003 to Exchange 2010 and Windows 2008 R2
    This guide is intended to provide step by step instructions on how to migrate from Small Business Server 2003 to Windows 2008 R2 with Exchange 2010. For this migration to work you will need the fo...
  4. Create a Win7 Gadget
    This article shows you how to create a simple "Gadget" -- a sort of mini-application supported by Windows 7 and Vista. Gadgets can be dropped anywhere on the desktop to provide instant information, ...
  5. Outlook continually prompting for username and password
    There have been a lot of questions recently regarding Outlook prompting for a username and password whilst using Exchange 2007. There are a few reasons why this would happen and I will try to cover t...
  6. Backup Exchange 2010 Information Store using Windows Backup
    There seems to be quite a lot of confusion around the ability to backup Exchange 2010 using the built in Windows Backup feature. This stems from the omission of this feature prior to Exchange 2007 s...

Cloud Class Webinars

  1. Avoiding Bugs in Microsoft Access
    Alison Balter takes and in-depth look at avoiding bugs in Access. In this webinar you will learn about using the immediate window to debug your applications, invoking the debugger, using breakpoints to troubleshoot, stepping through code, setting the next statement to execute, ...
  2. Top 10 Best New Features in Visio 2010
    Scott Helmers gives live demonstrations of the top 10 new features in Visio 2010. This webinar will teach you how to create compelling diagrams by adding shapes to the page with a single click, linking the shapes in a diagram to data in Excel (or SQL Server, or SharePoint), ...
  3. IT Consultant Business Secrets Revealed
    Michael Munger, Experts Exchange tech pro and IT consultant, pulls back the curtain on his very successful businesses and answers question on every IT consultant and business owner should know about. He shares secrets on what he did to solve the 5 most common problems in IT, ...
  4. Disaster Recovery and Business Continuity
    Quest CTO, Mike Billon, gives an overview of the steps involved in building a dunamic disaster recovery plan. Through case studies and an examination of software/hardware tooles for monitoring and testing, you'll gain a better understandin of where you are, where you want ...
  5. Organize Your Visio Diagrams with Containers and Lists
    Scott Helmers uses cross functional flowcharts, wireframe diagrams, data graphic legends and seating charts to teach you: how to ustilize all three new structured diagram components in Visio 2010, the best practices for organizeing shapes in previous version of Visio, how to organize ...
  6. How to Us Objects, Properties, Events and Methods in Microsoft Access
    Alison Dalter gives an in-depbth look at objects, properties, events and methods in Microsoft Access. In this webinar you will learn about using the object browser, referring to objects, working with properties and methods, working with object variables, understanding the ...

Join the Community

Give a Little. Get a Lot.

Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.

Join the Community

Answers

 

by: seanpowellPosted on 2004-09-03 at 10:31:44ID: 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

 

by: vanaudenPosted on 2004-09-03 at 12:17:48ID: 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!

 

by: seanpowellPosted on 2004-09-03 at 12:29:42ID: 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>

 

by: PeterCNPosted on 2004-09-03 at 14:08:20ID: 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.

 

by: vanaudenPosted on 2004-09-03 at 14:40:31ID: 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!

 

by: vanaudenPosted on 2004-09-07 at 08:33:13ID: 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!

 

by: seanpowellPosted on 2004-09-07 at 08:43:58ID: 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

 

by: vanaudenPosted on 2004-09-07 at 09:35:40ID: 11998514

Thank you seanpowell

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

 

by: sburns875Posted on 2005-03-01 at 11:43:55ID: 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

 

by: vanaudenPosted on 2005-03-01 at 12:10:21ID: 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?

20120131-EE-VQP-002

3 Ways to Join

30-Day Free Trial

The Experts

98% positive feedback on 31,087 answers since March 2000. angeliii is a Microsoft Most Valuable Professional for his work with MS SQL Server & Develoment.

He has also proven his knowledge of Visual Basic Programming, PHP Scripting and Oracle Databases.

The Experts

97% positive feedback on 10,752 answers since July 2000. lrmoore has more than 18 years experience in the networking industry.

The six-time Mircosoft MVPs specialties include firewalls, virtual private networking, and network management.

Testimonials

"...and excellent source for support... Kind of like having your very own IT dept." Electriciansnet

Testimonials

"I was apprehensive at signing up at first. However... it has already made my life as an IT administrator much easier." JaCrews

Testimonials

"WOW! You guys have great, active, and knowledgeable people on here." moore50

Business Clients

Business Clients

In the Press

"If you’ve got a question... Experts Exchange can supply an answer.”

In the Press

"...an invaluable aid for both IT professionals and those who require tech support."

In the Press

"where IT professionals provide quick answers on just about any topic"

Business Account Plans

Loading Advertisement...