I'll give two free items[1] of LiveJournal clothing to the first person that can fix my CSS:
http://www.livejournal.com/dev/label-challenge.html
What needs to happen is the 3 absolutely positioned elements per page (the order number label, the return address, and the to address) to be position absolutely relative to each page, not the first page.
Do a print preview in mozilla (or IE, or Opera) to see what I'm talking about.
I found some other software package (commercial) which generates labels using CSS media=print, but I don't want to buy it to figure out where I'm messing up my CSS.
[1]
whitaker told me to make that ugly like that. :)Update: There seems to be a lot of confusion.... we have a very specific type of mailing label with two stickers at the bottom. One little one, and one big one right below it. The little one gets one big number on it (the order number) and the big one gets both the return address and to address.
It should not look anything like the @media screen version you see in your browser. Do a print preview... the first page is how it should look on every page. The challenge is making the text not all overlap on that first page.
The CSS specs say position: absolute makes the box relative to its parent containing block? How do I make a parent containing block? The paged media section of the CSS2 spec seems to indicate each page is its own containing block, and we're doing page breaks on every order.
Update 2: Props to
pinterface for the solution, who's now been seen two clothing coupons.Update 3: It's working perfect now. Yeah, the numbers and borders are trivial changes... you can check out the final result in CVS.