Menu
I am trying to print bunch of data here is my css for Avery 5160 labels
body {
width: 8.27in;
margin: 0in .2in;
}
.label {
/* Avery 5160 labels */
width: 3.24016in; /* plus .6 inches from padding */
height: 1.381in; /* plus .125 inches from padding */
padding: .125in 0 .05in .3in;
margin-right: .515in; /* the gutter */
float: left;
/* text-align: center; */
overflow: hidden;
outline: 1px dotted; /*outline doesn't occupy space like border does */
}
The problem is if i print 16 labels i.e 1 page it comes out nicely. But if it goes to page 2 bottom labels kind of crops and messes page 2.
my test code in php
$max = 15; // if max then 15 :/ i cri
$str1 = "<b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958";
for ($i=0; $i <= 16; $i++) {
echo'<div class="label">'. $str1.'</div>';
}
script for printing
var t;
function prt()
{
clearTimeout(t);
window.print();
}
t=setTimeout("prt()",1000);
Attaching SS 
Attaching full source Source
421
On my preview it looks difference if I print. I think this has to do with the margin of the printer.
Anyway, I change your float:left; to display:inline-block and add a page break after 14 elements. Does this work for you?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Artpro</title>
<style>
body {
width: 8.27in;
margin: 0in .2in;
}
.label {
/* Avery 5160 labels */
width: 3.24016in; /* plus .6 inches from padding */
height: 1.381in; /* plus .125 inches from padding */
padding: .125in 0 .05in .3in;
margin-right: .515in; /* the gutter */
display: inline-block;
/*text-align: center;*/
overflow: hidden;
outline: 1px dotted; /*outline doesn't occupy space like border does */
}
@media all {
.page-break { display: none; }
}
@media print {
.page-break { display: block; page-break-before: always; }
}
</style>
<script>
var t;
function prt()
{
clearTimeout(t);
window.print();
}
t=setTimeout("prt()",1000);
</script>
</head>
<body>
<div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
<div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
<div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
<div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
<div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
<div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
<div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
<div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
<div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
<div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
<div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
<div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
<div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
<div class="label"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
<div class="label page-break"><b>Title </b></br>Fname Lname</br>Media Type</br>200x500 cm</br>1958</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
