I'm attempting to produce mailing list labels from a database connected to a website (yes, I could grab the list in some text format and import to something like Word... but ultimately I'm not going to be preparing the mailing so I want as few steps as possible in the process!). I've managed to get it working except for one part: the labels are not positioned correctly vertically.
I've looked at a number of questions on SO over the last few hours but none of the questions (or solutions) quite match what I've got.
I've defined 3 different paragraph classes for the 3 labels across the page (there's wierd gaps in the labels we've got for printing), with dimensions based on the label positions and size. Each label is a single paragraph with one of the 3 classes, and banks of labels sit inside a div representing the pages (these take into account the top and bottom margins of the pages).
Horizontally, it's working fine; vertically is another matter. Firebug is showing the paragraphs overlapping. I'm stumped as to what's going on.
Here's the CSS:
body
{
color: Black;
background-color: White;
font-family: "Times New Roman", Times, serif;
height: 100%;
margin: 0;
padding: 0;
font-size: 11pt;
}
p.print_label_left, p.print_label_right, p.print_label_middle
{
background: white;
position: absolute;
width: 5.4cm;
height: 1.43cm;
max-height: 1.43cm;
min-height: 1.43cm;
margin-left: 0.5cm;
margin-top: 1.48cm;
margin-right: 0.5cm;
margin-bottom: 0.5cm;
padding: 0.5cm;
top: 0;
border: none;
outline: solid 1px black;
}
p.print_label_left
{
left: 0.65cm;
}
p.print_label_middle
{
left: 7.3cm;
}
p.print_label_right
{
left: 13.95cm;
}
div.print_page
{
background: white;
position: relative;
padding: 0;
margin: 0;
left: 0;
top: 0;
width: 21cm;
height: 29.7cm;
border: none;
}
And here's a representative HTML sample (I can't give the real stuff due to privacy):
<body>
<div class="print_page" style="top:-1.33333333333cm;">
<p class="print_label_left" style="top:0cm;">A<br />
B<br />
C<br />
<br />
<br />
<br />
</p>
<p class="print_label_middle" style="top:0cm;">D<br />
E<br />
F<br />
<br />
<br />
<br />
</p>
<p class="print_label_right" style="top:0cm;">G<br />
H<br />
I<br />
<br />
<br />
<br />
</p>
<p class="print_label_left" style="top:2.43cm;">J<br />
K<br />
L<br />
<br />
<br />
<br />
</p>
<p class="print_label_middle" style="top:2.43cm;">M<br />
N<br />
O<br />
<br />
<br />
<br />
</p>
<p class="print_label_right" style="top:2.43cm;">P<br />
Q<br />
R<br />
<br />
<br />
<br />
</p>
</div>
</body>
The header defines a doctype (xhtml transitional 1.0) and I've played around with the max-height and min-height and putting extra lines in each paragraph to try to force it to have sufficient content to fill out the text, but no such luck.
When I print out the list, the outlines indicate the boxes are spaced at 2cm intervals not the required 2.43cm. And I'm fresh out of ideas of things to search for!
If it helps, I'm using Firefox 36 on a Windows 7 x64 machine but the server I'm running this on is a typical LAMP setup.
It's should work if i understand your question?