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 gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

IE7 will not print properly beyond page 1 1

Status
Not open for further replies.
999Dom999

999Dom999

Technical User
Apr 25, 2002
266
GB
Please view this in IE7

My internal product database fills these boxes on a search results page. I have been trying to make them print out properly. I changed the float:left for:

float:none ! important;
display:inline ! important;

This made them print almost pefectly apart from page 2 misses the top of a box on the 2nd row, and this repeats on subsequent pages, I have played around loads even put them in tables but always part of box does not display when you print.

Any ideas much appreciated!
 
Sort by date Sort by votes
Totally ignoring the page margins your user has set up, use CSS to insert a page break after every 8 divs, hide it for media all, and set it for media print.

Code: 
<style type="text/css" media="print">
.pb {
page-break-before: always;
}
</style>

<style type="text/css" media="all">
.pb {
display:none;
}
</style>

 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 [b]<div class="pb"></div>[/b]
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 [b]<div class="pb"></div>[/b]

TIP: trying googling the answer before posting, you'll find that more times than not someone else somewhere has had the same request and posted an answer online.
----
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javascript enabled browsers
 
Upvote 0 Downvote
Many many thanks for that its taken me hours of head scratching, I made a few changes I did the break after every 12 boxes as its 12 to a page, I had to remove the media print section, and change the media all to page-break-before: always; if you hide it in 'all' it does the same thing as before.

So I ended up with:


Thanks again!!!!!!!!!!!!!!! [2thumbsup]

Code: 
	<style type="text/css" media="all">
	
	#content {
		width:700px;
		margin: 5px;
	}
	
	.Product {

		background: none;
		height: 330px;
		width: 160px;
		float:none ! important;
		display:inline ! important;
		overflow:visible;
		margin: 5px 5px 5px 2px;
		border: 1px solid #000000;

	}
	.pb {
	page-break-before: always;
	}
	</style>
	

<body>

<div id="content">

<br>
			
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="pb"></div>

<br>
 
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="pb"></div>
 
<br>

 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="Product"></div>
 <div class="pb"></div>
  
 
 		</div>
	</body>
 
Upvote 0 Downvote
no problem, glad I could help...

You do, however still have the issue with the user's margins - mine are set to .25" all around and it still won't print properly. If I use the default margins it will work...

as far as I know, you can't change the user's margins using javascript, it's a security issue.



TIP: trying googling the answer before posting, you'll find that more times than not someone else somewhere has had the same request and posted an answer online.
----
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javascript enabled browsers
 
Upvote 0 Downvote
Ahh I had already changed my margins and removed headers so that 12 fitted a page, I see from a fresh IE7 that you only get 8 on a page hence your code. Do you know if you can suppress sending the headers when you print?

For the margins I will see if I can adjust my box sizes to fit better.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
757
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
201
lmcate
lmcate
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
168
pendle666
pendle666
PeDa
  • Locked
  • Question
Table not formatted correctly in all browsers 1
Replies
2
Views
165
PeDa
PeDa
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
214
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top