Print/Merge document printed on top of each other

Question

I am trying to create a template for a Donation-Thank-You letter for one of our clients. So far so good and it works and looks fine if you print one letter at a time. Of course, to be efficient, our client would like to be able to print multiple letters at the same time addressed to multiple different contacts. This is where I ran into a road block which I have not been able to find a solution for anywhere: If I select multiple contacts for which I would like to generate a pdf from my template, they get printed on top of each other, I can tell from the names being written over each other.

I discovered that when I remove the rel="stylesheet" attribute from my <link/> tag it will print the individual documents but the css is obviously missing since I removed the rel="stylesheet". I have a strong suspicion it has something to do with wkhtmltopdf which renders the template but, like I said, I have not been able to find a solution.

My goal is to be able to print multiple, individual documents for multiple contacts at once and have my css work. Has anyone run in a similar issue and solved it? Or does anyone know what else I could look for?

Edit to add CSS:

<style>

{literal}

   @font-face {
     font-family: 'Montserrat';
     src: url('https://test.site.org/Montserrat-Regular.otf') format('opentype');
     font-weight: regular;
   }

   @font-face {
     font-family: 'pt-serif';
     src: url('https://test.site.org/fonts/pt-serif/PTF55F.ttf') format('truetype');
     font-weight: regular;
   }

   * {
     font-size: .97em;
     font-family: pt-serif;
   }

   th {
       font-weight: bold;
   }

   .logo {
       position: absolute;
       right: 100px;
       top:20px;
   }

   .Impressum {
       vertical-align: top;
       position: absolute;
       left: 385px;
       font-family: Montserrat;
       font-size: 0.75em;
       padding-top:120px;
   }

   .invisible {
       display: none;
   }

   .Absender {
         position: absolute;
         top:125px;
         left: 20px;
         font-size: 0.65em;
         font-family: Montserrat;
   }

   .Empfaenger {
       position: absolute;
       top:145px;
       left: 20px;
       vertical-align: top;
       font-size:0.9em;
       width:350px;
       font-family: Montserrat;
   }

   .intro {
       font-size: .97em;
       font-family: pt-serif;
       padding-bottom:12px;
   }

   .Rechnungsdatum {
       position: absolute;
       top:300px;
       right:95px;
       font-size: 0.9em;
       text-align: right;
       width:150px;
       font-family: pt-serif;
   }

   .Rechnungszweck {
       position: absolute;
       top:370px;
       left: 15px;
       font-size: 1.2em;
       width:100%;
       font-family: Montserrat;
   }

   .Content {
       position: absolute;
       top: 390px;
       left: 19px;
       font-size: 0.9em;
       font-family: pt-serif;
   }

   .footer {
       position: fixed;
       left: 0;
       bottom: -50px;
       width: 100%;
       font-family: Montserrat;
       font-size: 0.8em;
   }

   {
       /literal
   }
</style>

<link/> tag to include the file in my template: <link rel="stylesheet" href="/contacts.site.org/css/pdf.css" type="text/css" />

Answer 1

You're correct that it's wkhtmltopdf although I don't necessarily think it's a bug. The position: absolute is causing wkthmltopdf to position everything relative to (0,0) on the first page, whereas with dompdf it inserts a new page regardless.

If you use relative it works, but depending on what your body content looks like you may have to adjust.