Printing Forms

I’m seeking some help here. I’m not a coder, and taught myself CSS and HTML from a variety of sources on the Internet, so please know up front that I’m fully aware of my n00b status.

Having said that, I’m working on a project with a friend of mine who is a great programmer, and we’re doing a ticketing site for a small theater. The specific problem I’m having is when we try to have the tickets for a show print from the browser. The theater is using pre-perforated pages that contain 8 tickets, each with a stub.

His outstanding work produces individual ticket information including the patrons name, seat location, etc. and feeds it into HTML that I designed. The HTML output looks great!, but when we go to print, there is a lot of overlap, I’ve had issues with page breaks and printing and print-preview crashes Firefox. I don’t need to worry about browser compatibility for this one, as I’ve got the theater all on Firefox 1.5+.

The HTML for each generated ticket is:

[CODE]<div id=”whole”>
<div id=”ticket”>
Show Date &amp; Time<br />
<span id=”show”>Show Name</span><br />
Seat no.<br />
<span id=”customer”>Customer Name</span><br />
<span class=”small”>
Price – Order No.<br />
www.illusiontheater.org<br />
528 Hennepin, 8th Floor<br />
Minneapolis, MN 55403<br />
612-339-4944</span>
</div>

<div id=”stub”>
Show Date<br />
Time<br />
Show Name<br />
Seat No.<br />
Customer Name<br />
Price<br />
Order No.<br />
Payment Type<br />
</div>
</div>[/CODE]

The CSS for the print page is:

[CODE]@page {
size: landscape;
}

body {
margin: 0;
padding: 0;
font-size: 10pt;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color: #000000;
background: none;
text-align: center;
vertical-align: middle;
}

#whole {
display: inline;
width: 50%;
border: solid 1pt #fff;
}

#ticket {
float: left;
width: 2.8in;
height: 1.720in;
margin: 0.2in 0.15in 0.1in 0.35in;
}

#stub {
float: left;
width: 1.5in;
height: 1.720in;
margin: 0.2in 0.25in 0.1in 0.15in;
font-size: 7pt;
page-break-before: avoid;
}

#show {
font-size: 11pt;
font-family: Broadway, Arial, SunSans-Regular, Sans-Serif;
font-weight: bold;
}

#customer {
font-size: 12pt;
font-family: Broadway, Arial, SunSans-Regular, Sans-Serif;
font-weight: bold;
}

.small {
font-size: 9pt;
}[/CODE]

I had what I thought was a very simple, elegant solution, but I just can’t make it print properly! Any suggestions? (Besides reading another ALA article or using a server-side PDF generator.)

Also in #CSS _↴