INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Can't get page-break-after to work

Can't get page-break-after to work

(OP)
I'm trying to design output for a badge card printer. I'm stuck trying to get a page break so I can design the back of the card. I've tried several ways to start page two but no luck. It always pushes the page two div to the top of page one and renders it behind that content. I've validated the code.

Any help appreciated.

CODE

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Camera Output</title>
</head>
<body>
		<div style="page-break-after: always;">
			
				<div style="
					position: absolute;
					top: 0;
					left: 0;
					padding:0; 
					width: 408px;
					height: 87px;
					text-align: center;
					margin: 0px;
					Border: 1px solid;
					color:Black;
					font-size: 20px;
					font-family: Calibri; 
					font-weight: bold;">
					<div style="position: absolute; width: 406px; bottom: 0; padding-bottom: 6px;">OKLAHOMA<br />HORSE RACING COMMISSION</div>
				</div>
			
			<div style="position: absolute;
						top:87px; 
						left: 0px;">
				<img src="44108-7895.jpg" width="180" height="225" alt="Badge Photo" style="border: 0px;">
			</div>
			<div style="position: absolute;
						top: 87px;
						left: 182px;
						width: 218px;
						font-family: Calibri; 
						font-weight: bold; 
						font-size: 12px; 
						text-align: center; 
						margin-right: 0px; 
						padding-top: 4px;
						text-align: center;">
				Expires 31 December
			</div>
			<div style="position: absolute;
						top: 93px;
						left: 182px;
						width: 218px;
						font-family: Calibri; 
						font-weight: bold; 
						padding-top: 8px; 
						text-align: center; 
						font-size: 48px;">
				2015
			</div>
			<div style="position: absolute;
						top: 133px;
						left: 182;
						width: 218;
						text-align: center; 
	 					padding-top: 12px;">
				<img style="border: 0px" src="okseal3b.gif" alt="State Seal" >
			</div>
	    	<div style="position: absolute;
						top: 312px;
						left: 0;
						width: 408px;
						font-family: Calibri; 
						font-weight: bold; 
						font-size: 24px;">
	    		Smith, Bob A<br />
				Administration
	    	</div>
		</div>	
<--- begin First div of page two --->
		<div style="width: 408px;
					font-family: Calibri; 
					font-weight: bold; 
					font-size: 24px; float:left">
		</div>
    </body>
</html> 

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

RE: Can't get page-break-after to work

(OP)
OK, I kept at it and answered my own question! I did not understand position and float. I changed all the {position} styling to the default value, {:static;}, and used {float: left;} to make the two-column second row. Then the {page-break-after: always;} style started working. bigsmile This will work for this requirement as all the divisions on the badge card printing documents are static in size/position. I'll be getting rid of the <br /> tags and putting all content in <div>'s now that the page break issue is solved; this example should get someone started if they have this issue.

BTW, I'm not using a style sheet or tag because my server side is Coldfusion, its <cfdocument format="PDF"> tag doesn't seem to work unless you use the <div style=""> attribute.

Hope this helps someone.

HTML that works:

CODE

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Camera Output</title>
</head>

<body>

	
		<div style="page-break-after: always;">
			
				<div style="
					top: 0;
					left: 0;
					padding:0; 
					width: 408px;
					height: 87px;
					text-align: center;
					margin: 0px;
					Border: 1px solid;
					color:Black;
					font-size: 20px;
					font-family: Calibri; 
					font-weight: bold;">
					<div style="width: 406px; bottom: 0; padding-bottom: 6px;">OKLAHOMA<br />HORSE RACING COMMISSION</div>
				</div>
			
			<div style="
					float:left;
					top:87px; 
					left: 0px;">
				<img src="test_my64.jpg" width="180" height="225" alt="Badge Photo" style="border: 0px;">
			</div>
			<div style="
					float:left;
					top: 87px;
					left: 182px;
					width: 218px;
					font-family: Calibri; 
					font-weight: bold; 
					font-size: 12px; 
					text-align: center; 
					margin-right: 0px; 
					padding-top: 4px;
					text-align: center;">
				Expires 31 December
			</div>
			<div style="
					float:left;
					top: 93px;
					left: 182px;
					width: 218px;
					font-family: Calibri; 
					font-weight: bold; 
					padding-top: 8px; 
					text-align: center; 
					font-size: 48px;">
				2015
			</div>
			<div style="
					float: left;
					top: 133px;
					left: 182;
					width: 218;
					text-align: center; 
					padding-top: 12px;">
				<img style="border: 0px" src="okseal3b.gif" alt="State Seal" >
			</div>
	    	<div style="
					top: 312px;
					left: 0px;
					width: 408px;
					font-family: Calibri; 
					font-weight: bold; 
					font-size: 24px;">
	    		Smith, Bob A<br />
				Administration
	    	</div>
		</div>
		<div style="
				width: 408px;
				font-family: Calibri; 
				font-weight: bold; 
				font-size: 24px;">
			Property of
		</div>
	



    </body>
</html> 

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close