Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

page-break-after:always

Status
Not open for further replies.
beckyh

beckyh

Programmer
Apr 27, 2001
126
US
I am using the following code

<style type="text/css">
BR.pageEnd {page-break-after:always}
</style>

to force a page break on my printable CF form. I use

<br class="pageend">

to call the break. My problem is it's creating at least 2"'s of white space at the top of the paper I am printing. Any ideas what I need to change?
 
Sort by date Sort by votes
could be a lot of things...

a design like:
Code: 
<p>here's the last paragraph I want on page one</p>

<br.pageEnd />

<p>here's paragraph one for page two</p>
Will put the second paragraph's top-margin AFTER the top the page... which will move it down a ways.

I'm not absolutely clear, but you might try setting the top margin for content falling on the second-page to "0en;"

In which case you may want to end up like:
Code: 
<style type="text/css">
[COLOR=red]p.newPage[/color] {
  margin-top: 0en;
  page-break-[COLOR=red]before[/color]: always;
}
</style>
<p class="newPage">top of page one</p>
<p>second paragraph of page one</p>

<p class="newPage">top of page two</p>
<p>etc etc etc</p>

Then, of course, there are always the page-setup options for printing.. which you're not going to be able to control. Set your top/bottom margins to .25" or 0" in page-setup and try printing again. Microsoft likes to set default page margins to a whopping 1".

Hopefully this has not been completely irrelevant. Good luck with your project.

[red]Note:[/red] [gray]The above comments are the opinionated ravings of Mr3Putt. As such, Mr3Putt accepts no responsibility for damages, real or contrived, resulting from acceptance of his opinions as fact.[/gray]
 
Upvote 0 Downvote
I tried adding the margin-top and using page-break-before (instead of page-break-after.) Unfortunately, this did not have the desired effect. In fact, nothing changed. I am still getting the extra space at the top of the pages following page number one. Please help.
 
Upvote 0 Downvote
I've never heard of "en", but I have heard of "em".

Also, <br.pageEnd /> is not correct. It should be <br class="pageEnd" />

*cLFlaVA
----------------------------
"Holy crip he's a crapple!
 
Upvote 0 Downvote
I didn't use either en or the <br.pageend /> thing. I knew what the programmer was saying. So I used the correct syntax. I am still not getting anywhere with this code.

This is what I have now....

<style type="text/css">
BR.pageEnd
{
margin-top: 0em;
page-break-before:always;
}
</style>
<br class="pageEnd">
 
Upvote 0 Downvote
It might very well be the top-padding of the following <p> tag.

Did you try setting the margin-top and padding-top of the <p> tag to 0?

Something like this?

Code: 
<p> first page stuff </p>
<br class="pageEnd" />
<p style="margin-top: 0; padding-top: 0;"> second page stuff </p>

*cLFlaVA
----------------------------
"Holy crip he's a crapple!
 
Upvote 0 Downvote
I noticed your putting the margin and padding styles in a <p style> tag. I do not have any <p> tags on my page. I am using tables. Must you put margin and padding styles in a certain type of style tag? Mine is currently being used by a <br> tag.

How do you insert your code in the nice "Code" box?
 
Upvote 0 Downvote
Sorry, I got the <p> tags from the other poster.

This really would be easier with a better code sample.

To make code appear in the code box, surround the text with [ignore]
Code:
[/ignore] tags.

*cLFlaVA
----------------------------
"Holy crip he's a crapple!
 
Upvote 0 Downvote
This is basically the layout of my page. Is this anymore helpful?
Code: 
 <cfif> 
<script 
</script>

<table>
						
<style type="text/css">
BR.pageEnd {margin-top: 0;padding-top: 0;page-break-after:always;}
</style>
<br class="pageend">

</table>
					
<cfelse>			
<script type="text/javascript"></script>

<table border="0">

<style type="text/css">
BR.pageEnd {margin-top: 0;padding-top: 0;page-break-after:always;}
</style>

<br class="pageEnd">

</table>
</cfif>
 
Upvote 0 Downvote
This is basically the layout of my page. Is this anymore helpful?
Code: 
 <cfif> 
<script 
</script>

<table>
						
<style type="text/css">
BR.pageEnd {margin-top: 0;padding-top: 0;page-break-after:always;}
</style>
<br class="pageend">

</table>
					
<cfelse>			
<script type="text/javascript"></script>

<table border="0">

<style type="text/css">
BR.pageEnd {margin-top: 0;padding-top: 0;page-break-after:always;}
</style>

<br class="pageEnd">

</table>
</cfif>
 
Upvote 0 Downvote
whoa.

styles should be defined in the <head></head> of the html.

can't you run the page, then do a view source and paste what you see here?

According to your pseudo-code above, there could be a miriad of invalid markup, which could very well be the reason you're seeing what you're seeing.

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
 
Upvote 0 Downvote
First.. sorry 'bout the "en" thing. My bad. "em" is, of course the correct unit of measure.

Next: If you're separating TABLES with a "<br />" tag, you should remember that tables are, by default displayed as "block" elements.. which carry their own spacing at the top and bottom.

If you're trying to control the breaking of a single TABLE across multiple pages... you're probably going to have a hard time (which, apparently, you are.)

I notice that, in your pseudo-code, you've got a
<br class="pageEnd" />
listed inside a table...

Where exactly is it? The only valid spot for a "<br />" tag within a table is INSIDE a <td> or <tr> cell, within the content of the cell.

If you're page-breaking between two tables, you should be able to just "inline" style it on the second table, like:

<table style="page-break-before:always;margin-top:0px;">

Also, cLFlaVA is correct: it would be helpful to see the "results" of your ColdFusion page, so we can see what actually gets sent to the browser.

I hope that helps at leas a little. Good luck on your project.

[red]Note:[/red] [gray]The above comments are the opinionated ravings of Mr3Putt. As such, Mr3Putt accepts no responsibility for damages, real or contrived, resulting from acceptance of his opinions as fact.[/gray]
 
Upvote 0 Downvote
Mr3Putt...I was hoping that moving the <br> inside of the <tr> or <td> would do the trick. Unfortunately, this had no effect on the layout of the printout. I am considering pasting the html code, however, there is a ton!! And i would have to delete a lot of sensitive information. However, this layout thing is really bugging me, let me try pasting it in my next post....unless someone else has any ideas....
 
Upvote 0 Downvote
Yes, before you paste thousands of lines of code, I suggest you place a COMPLETE DOCTYPE* in your html and then VERIFY your page, make any changes that it tells you to.

If it's still not working properly after that, then you can paste your code.



* - COMPLETE DOCTYPE - one with a full url after the initial statement.

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
 
Upvote 0 Downvote
As promised. Sorry, there is a LOT of blank tables, but you get the picture...
Code: 
<html>
<head>
<title></title>
<style type="text/css">
			BR.pageEnd 
			{
			margin-top: 0;
			padding-top: 0;
			page-break-after:always;							
			}
</style>
<script type="text/javascript">
					if(document.images) {
					          PrintGone = new Image(1,1);
					          PrintGone.src = "..////.gif";
					          PrintBack = new Image(1,1);
					          PrintBack.src = "..////.gif";								  
					}
					
					function printPage()
					{
						if(document.images) {
						     document.Print.src=PrintGone.src;
						}
						
						window.print();
					
						if(document.images) {
						     document.Print.src=PrintBack.src;
						}						
					}
</script>
</head>
<body>




		
	
	
		
		 
					
			
			
	
	<table border="0">
		<tr>
			<td colspan="2"></td>
			<td>
			<table width="670" border="1" cellspacing="0" cellpadding="2">
					<tr>
						
						<td align="right">
								<a href="javascript:printPage()">
								<img name="Print" src="..////.gif" border="0">
								</a>
						</td>
					</tr>
						
									
		
			
				
						<tr>
							<td colspan="8" align="center" bgcolor="#00BFBF"><b>
 </b></td>
						</tr>				
				
					
					
						<table width="100%" border="0" cellspacing="0" cellpadding="0">
					<tr>
							<td colspan="6" align="center">
							<h2><strong></strong></h2>
							</td>
					</tr>
					<tr>
						<td align="right" width="145" valign="top"><strong></strong>&nbsp;&nbsp;</td>
						<td width="185" valign="top"></td>
						<td align="right" width="125" valign="top"><strong></strong>&nbsp;&nbsp;</td>
						<td width="205" valign="top"></td>
					</tr>
					<tr>
						<td align="right"><strong></strong>&nbsp;&nbsp;</td>
						<td></td>
						<td align="right"><strong></strong>&nbsp;&nbsp;</td>
						<td></td>
					</tr>					
					<tr>
						<td align="right"><strong></strong>&nbsp;&nbsp;</td>
						<td></td>
						<td align="right"><strong></strong>&nbsp;&nbsp;</td>
						<td></td>
					</tr>		
					<tr>
						<td align="right"><strong></strong>&nbsp;&nbsp;</td>
						<td></td>
						<td align="right"><strong></strong>&nbsp;&nbsp;</td>
						<td></td>
					</tr>	
					<tr>
						<td align="right"><strong></strong>&nbsp;&nbsp;</td>
						<td></td>
						<td align="right"><strong></strong>&nbsp;&nbsp;</td>
						<td></td>
					</tr>					
					<tr>
						<td align="right"><strong></strong>&nbsp;&nbsp;</td>
						<td></td>
						<td align="right"><strong></strong>&nbsp;&nbsp;</td>
						<td></td>
					</tr>	
					<tr>
						<td align="right"><strong></strong>&nbsp;&nbsp;</td>
						<td>
													</td>
						<td align="right"><strong></strong>&nbsp;&nbsp;</td>
						<td></td>
					</tr>								
					<tr>
						<td align="right"><strong></strong>&nbsp;&nbsp;</td>
						<td colspan="3"></td>
					</tr>												
					<tr>
						<td colspan="4">&nbsp;</td>
					</tr>							
				</table>
										
				<hr>

				<table width="100%" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td colspan="2"><strong>&nbsp;</strong></td>
					</tr>
				</table>	
				
				<script SRC=".js"></script>
				
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td width="175">&nbsp;&nbsp;<strong></strong></td>
						<td width="175"><strong></strong></td>
						<td width="105"><strong></strong></td>
						<td width="205"><strong></strong></td>
					</tr>
					
						<tr>
							<td>&nbsp;&nbsp;</td>
							<td></td>
							<td></td>
							<td></td>
						</tr>	
						<tr>
							<td colspan="4">&nbsp;</td>
						</tr>
						
				</table>		
												
				<hr>

				<table width="100%" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td colspan="2"><strong>&nbsp;</strong></td>
					</tr>
				</table>	
				
				
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
					
						<tr>
							<td align="right" width="145" valign="top"><strong></strong>&nbsp;&nbsp;</td>
							<td width="165" valign="top">&nbsp;</td>
							<td align="right" width="125" valign="top"><strong></strong>&nbsp;&nbsp;</td>
							<td width="225" valign="top">&nbsp;</td>
						</tr>	
						<tr>
							<td align="right"><strong></strong>&nbsp;&nbsp;</td>
							<td>&nbsp;</td>							
							<td align="right"><strong></strong>&nbsp;&nbsp;</td>
							<td>&nbsp;</td>
						</tr>	
					
					<tr>
						<td colspan="4">&nbsp;</td>
					</tr>
				</table>
										
				<hr>

				<table width="100%" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td colspan="2"><strong>&nbsp;</strong></td>
					</tr>
				</table>
				<table width="100%" border="0" cellspacing="0" cellpadding="0">					
					<tr>
						<td align="right" width="145"><strong></strong>&nbsp;&nbsp;</td>
						<td width="185"></td>
						<td align="right" width="125"><strong></strong>&nbsp;&nbsp;</td>
						<td width="205"></td>
					</tr>		
					<tr>
						<td align="right" width="145"><strong></strong>&nbsp;&nbsp;</td>
						<td width="185"></td>
						<td align="right" width="125"><strong></strong>&nbsp;&nbsp;</td>
						<td width="205"></td>
					</tr>																							
					<tr>
						<td colspan="4">&nbsp;</td>
					</tr>
				</table>	
										
				<hr>

				<table width="100%" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td><strong>&nbsp;</strong></td>
					</tr>
				</table>
										
				
				<table width="100%" border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td width="5">&nbsp;</td>								
						<td width="125"><strong></strong></td>
						<td width="125"><strong></strong></td>
						<td width="100"><strong></strong></td>
						<td width="100"><strong></strong></td>
						<td width="100"><strong></strong></td>
						<td><strong></strong></td>
						<td>&nbsp;</td>
					</tr>
				
				
					
				</table>
				<table width="100%" border="0">
					<tr>
						<td colspan="4">&nbsp;</td>
					</tr>							
				</table>	
										
				<hr>

				<table width="100%" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td><strong>&nbsp;</strong></td>
					</tr>
				</table>
				
				
				
				
				
				
					<table width="100%" border="0" cellpadding="0" cellspacing="0">
						<tr>
							<td width="5">&nbsp;</td>									
							<td width="75"><strong><BR></strong></td>
							<td width="100"><strong><BR></strong></td>
							<td width="75"><strong><BR>&nbsp;</strong></td>
							<td width="125"><strong><BR></strong></td>
							<td width="125"><strong><BR></strong></td>
							<td><strong><BR></strong></td>
						</tr>
						
						
							
							<tr>
								<td>&nbsp;</td>										
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
							</tr>
							
							
						
							
					</table>
										
				<table width="100%" border="0">
					<tr>
						<td>&nbsp;</td>
					</tr>
				</table>		
																				
				<hr>

				<table width="100%" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td><strong>&nbsp;</strong></td>
					</tr>
				</table>
				
				
					<table>
						<tr>
							<td>&nbsp;&nbsp;&nbsp;<br class="pageEnd"></td>
						</tr>
					</table>
So then this just repeats for each record....
 
Upvote 0 Downvote
Since you decided to ignore my previous advice, I will say only this. Read this, the part where it says to avoid using page breaks within tables. Notice also that it will only work in IE.

You need to break out of the mindset of using tables for layout. It's a terrible mess, as you've proven here, and is cause for a lot of unnecessary code, where <div>s and CSS would treat you much better.

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
225
lmcate
lmcate
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
251
ChrisHirst
ChrisHirst
craigward
  • Locked
  • Question
Change IIS7 Default landing page
Replies
1
Views
142
feherke
feherke
tyutghf
  • Locked
  • Question
Slight page curl effect
Replies
3
Views
241
ChrisHirst
ChrisHirst
LyndonOHRC
  • Locked
  • Question
Can't get page-break-after to work
Replies
1
Views
146
LyndonOHRC
LyndonOHRC

Part and Inventory Search

Sponsor

Back
Top