2

I'm trying to add some custom formatting to an e-commerce receipt for printing, with a fixed header and footer to appear on every page printed. The problem is, it seems to intermittently work. Sometimes it loads fine, others, the header appears near the middle of the page rather than at the top. Sometimes just canceling the print dialog box and reopening it has changed how it loads.

Examples:

Correct: Correct display

Incorrect: Incorrect display (pg1)

Incorrect: Incorrect display (pg2)

Is this some kind of chrome rendering issue?

Full code below:

body{
    background: #FFFFFF;
    font-size: 12pt;
}
.bold {
    font-weight:bold;
}
.clr {
    clear: both;
}
.invoice-title {
    font-size: 14pt;
    color:#734B3A;
    margin:25px 0 15px 0;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}
table {
    width: 100%;
}
th {
    text-align: left;
    border-bottom:1px solid #EEE;
}
.variation {
    font-size: 11px;
}
#main_container {
    width:100%;
    margin:0 0 30px 0;
}
#main {
    width:720px;
    margin:auto;
}
#main .header_logo {
    text-align: right;
    margin:15px 0 15px 0;
    font-size: 24px;
    font-weight: bold;
    color:#000000;
    font-family: Arial, Helvetica, sans-serif;
}
#main .wrapper {
    border:1px solid #EFECDC;
    background-color:#FFFFFF;
}
#main .wrapper-table {
    margin:0 0 0 0;
    padding:25px 25px 25px 25px;
    font-family:Arial, Helvetica, sans-serif;
}
.short_cell {
    width: 90px;
}

@media all {
    .page-break  { display:none; }
}

@media print {
    .page-break  { display:block; page-break-before:always; }
    .noprint { display: none; }
}
body{
    margin-top: 145px;
}

#main .header_logo{
    font-family: 'Sacramento', cursive;
    color: #D79E32;
    font-size: 3.5em;
    font-weight: normal;
    margin-bottom: 20px;
    margin-top: 0px;
    padding-top: 90px;
    line-height: 0.6em;
    padding-bottom: 10px;
    border-bottom: #ade6df solid 10px;
    position: fixed;
    top: 0;
    width: 715px;
    background-color: #fff

}
#main .header_logo img{
    max-height: 120px;
    max-width: 120px;
    float: left;
    margin-top: -85px;
}
#main .wrapper{
    border:none;
}
.footer {
  background: #ade6df;
  color: #fff;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  padding: 5px 0;
  font-weight: 300;
  position: fixed;
  bottom: 0;
  width: 715px;
}
.footer a{
    color: #fff;
    text-decoration: none;
}
.footer .spacer {
  font-size: 0.5em;
  padding: 0 10px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}
.page-break{
    height: 215px;
    width: 100%;
}
.page-break:last-child{
    display: none;
}

@media screen {
    .footer {
        bottom: 20px;
    }

    body{
        margin-bottom: 30px;
    }
}
<div style="main_container">
<div id="main">

    <div class="header_logo">
        <img src="/receipt_logo.jpg" alt="" />
        My Company
    </div>

    <div class="clr"></div>

    <div class="wrapper">
    <div class="wrapper-table">
        <table cellpadding="0" cellspacing="5" border="0" style="margin-left:5px;">
            <tr>
                <td class="invoice-title">Receipt</td>
            </tr>

            <tr>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td><strong>Date:</strong> 9/13/2016</td>
            </tr>
            <tr>
                <td><strong>Order Number:</strong> 123456789</td>
            </tr>
            <tr><td><strong>Email:</strong> email@email.com</td></tr><tr><td><strong>Phone:</strong> 585-123-4567</td></tr><tr><td><strong>newsletter subscribe:</strong> 0</td></tr>          <tr>
                <td>

                <table cellpadding="0" cellspacing="0" border="0"><tr>

                <td valign="top" style="padding-right: 20px;"><strong>Invoice Address:</strong><br />
                Jane J. Doe<br />123 Main Street<br />ANYTOWN, CA 12345<br />US<br />&nbsp;</td>

<td valign="top"><strong>Shipping Address (Me):</strong><br />Jane J. Doe<br />123 Main Street<br />ANYTOWN, CA 12345<br />US<br />Method: Standard Shipping<br />Shipping: $6.99<br />&nbsp;</td>             </tr></table>

                </td>
            </tr>
        </table>

        <table cellpadding="5" cellspacing="5" border="0" style="margin-top:30px;">
            <tr>
                <th>Product</td>
                <th class="short_cell">Price</td>
                <th class="short_cell">Qty</td>
                <th class="short_cell">Subtotal</td>
            </tr>

            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$24.99</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$24.99</td>
            </tr>

            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$7.99</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$7.99</td>
            </tr>

            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$25.00</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$25.00</td>
            </tr>
            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$24.99</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$24.99</td>
            </tr>

            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$7.99</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$7.99</td>
            </tr>

            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$25.00</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$25.00</td>
            </tr>
            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$24.99</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$24.99</td>
            </tr>

            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$7.99</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$7.99</td>
            </tr>

            <tr class="page-break"></tr>

            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$25.00</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$25.00</td>
            </tr>

            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$24.99</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$24.99</td>
            </tr>

            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$7.99</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$7.99</td>
            </tr>

            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$25.00</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$25.00</td>
            </tr>
            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$24.99</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$24.99</td>
            </tr>

            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$7.99</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$7.99</td>
            </tr>

            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$25.00</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$25.00</td>
            </tr>

            <tr style="margin-top:30px;">
                <td>&nbsp;</td>
                <td colspan="2" align="right">Shipping:</td>
                <td class="short_cell bold">$6.99</td>

            </tr>

            <tr>
                <td>&nbsp;</td>
                <td colspan="2" align="right">LAWN:</td>
                <td class="short_cell bold">-$8.70</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td colspan="2" align="right">Total:</td>
                <td class="short_cell bold">$56.27</td>
            </tr>
        </table>


    </div>
    </div>
        <div class="footer">
            My company<span class="spacer">&#9679;</span><a href="#" target="_blank">mycompany.com</a><span class="spacer">&#9679;</span>888-111-1234<span class="spacer">&#9679;</span><a href="mailto:info@mycompany.com">info@mycompany.com</a>
        </div>

</div>
</div>
<div class="page-break"></div>
TH1981
  • 3,105
  • 7
  • 42
  • 78
  • 1
    its not possible https://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page-of-a-document gingers are the best – Tristanisginger Jan 11 '19 at 11:36

1 Answers1

0

There is .footer { position: fixed; } directive. I made it a HTML file with your CSS. I checked with Safari print, now that info is coming. But you need adjustment of padding, margin etc. Also footer div class is does not sound good near navigation. Also add that color on print CSS part, else it will be on white background. Here is the raw gist with what probably you wanted -- https://gist.githubusercontent.com/AbhishekGhosh/ddb08179d238ec36f48ee467e4916d42/raw/16e761809f357ba0d2ac085bc6746487451db3d4/stack0410.html . Save it as HTML file and open on your browser.

Note : Edited.

<!DOCTYPE html>
<html>
  <head>
    <title>This is a title</title>
    <style>body{
    background: #FFFFFF;
    font-size: 12pt;
}
.bold {
    font-weight:bold;
}
.clr {
    clear: both;
}
.invoice-title {
    font-size: 14pt;
    color:#734B3A;
    margin:25px 0 15px 0;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}
table {
    width: 100%;
}
th {
    text-align: left;
    border-bottom:1px solid #EEE;
}
.variation {
    font-size: 11px;
}
#main_container {
    width:100%;
    margin:0 0 30px 0;
}
#main {
    width:720px;
    margin:auto;
}
#main .header_logo {
    text-align: right;
    margin:15px 0 15px 0;
    font-size: 24px;
    font-weight: bold;
    color:#000000;
    font-family: Arial, Helvetica, sans-serif;
}
#main .wrapper {
    border:1px solid #EFECDC;
    background-color:#FFFFFF;
}
#main .wrapper-table {
    margin:0 0 0 0;
    padding:25px 25px 25px 25px;
    font-family:Arial, Helvetica, sans-serif;
}
.short_cell {
    width: 90px;
}

@media all {
    .page-break  { display:none; }
}

@media print {
    .page-break  { display:block; page-break-before:always; }
    .noprint { display: none; }
}
body{
    margin-top: 145px;
}

#main .header_logo{
    font-family: 'Sacramento', cursive;
    color: #D79E32;
    font-size: 3.5em;
    font-weight: normal;
    margin-bottom: 20px;
    margin-top: 0px;
    padding-top: 90px;
    line-height: 0.6em;
    padding-bottom: 10px;
    border-bottom: #ade6df solid 10px;
    position: fixed;
    top: 0;
    width: 715px;
    background-color: #fff

}
#main .header_logo img{
    max-height: 120px;
    max-width: 120px;
    float: left;
    margin-top: -85px;
}
#main .wrapper{
    border:none;
}
.footer {
  background: #ade6df;
  color: #fff;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  padding: 5px 0;
  font-weight: 300;
  #position: fixed;
  bottom: 0;
  width: 715px;
}
.footer a{
    color: #fff;
    text-decoration: none;
}
.footer .spacer {
  font-size: 0.5em;
  padding: 0 10px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}
.page-break{
    height: 215px;
    width: 100%;
}
.page-break:last-child{
    display: none;
}

@media screen {
    .footer {
        bottom: 20px;
    }

    body{
        margin-bottom: 30px;
    }
}</style>
  </head>
  <body>

<div style="main_container">
<div id="main">

    <div class="header_logo">
        <img src="/receipt_logo.jpg" alt="" />
        My Company
    </div>
    <div class="clr"></div>

    <div class="wrapper">
    <div class="wrapper-table">
        <table cellpadding="0" cellspacing="5" border="0" style="margin-left:5px;">
            <tr>
                <td class="invoice-title">Receipt</td>
            </tr>

            <tr>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td><strong>Date:</strong> 9/13/2016</td>
            </tr>
            <tr>
                <td><strong>Order Number:</strong> 123456789</td>
            </tr>
            <tr><td><strong>Email:</strong> email@email.com</td></tr><tr><td><strong>Phone:</strong> 585-123-4567</td></tr><tr><td><strong>newsletter subscribe:</strong> 0</td></tr>          <tr>
                <td>

                <table cellpadding="0" cellspacing="0" border="0"><tr>

                <td valign="top" style="padding-right: 20px;"><strong>Invoice Address:</strong><br />
                Jane J. Doe<br />123 Main Street<br />ANYTOWN, CA 12345<br />US<br />&nbsp;</td>

<td valign="top"><strong>Shipping Address (Me):</strong><br />Jane J. Doe<br />123 Main Street<br />ANYTOWN, CA 12345<br />US<br />Method: Standard Shipping<br />Shipping: $6.99<br />&nbsp;</td>             </tr></table>

                </td>
            </tr>
        </table>

        <table cellpadding="5" cellspacing="5" border="0" style="margin-top:30px;">
            <tr>
                <th>Product</td>
                <th class="short_cell">Price</td>
                <th class="short_cell">Qty</td>
                <th class="short_cell">Subtotal</td>
            </tr>

            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$24.99</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$24.99</td>
            </tr>

            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$7.99</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$7.99</td>
            </tr>

            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$25.00</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$25.00</td>
            </tr>
            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$24.99</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$24.99</td>
            </tr>

            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$7.99</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$7.99</td>
            </tr>

            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$25.00</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$25.00</td>
            </tr>
            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$24.99</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$24.99</td>
            </tr>

            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$7.99</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$7.99</td>
            </tr>

            <tr class="page-break"></tr>

            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$25.00</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$25.00</td>
            </tr>

            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$24.99</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$24.99</td>
            </tr>

            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$7.99</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$7.99</td>
            </tr>

            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$25.00</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$25.00</td>
            </tr>
            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$24.99</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$24.99</td>
            </tr>

            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$7.99</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$7.99</td>
            </tr>

            <tr>
                <td><div>Product goes here</div><div class="variation">Ship To: Me</div></td>
                <td class="short_cell">$25.00</td>
                <td class="short_cell">1</td>
                <td class="short_cell">$25.00</td>
            </tr>

            <tr style="margin-top:30px;">
                <td>&nbsp;</td>
                <td colspan="2" align="right">Shipping:</td>
                <td class="short_cell bold">$6.99</td>

            </tr>

            <tr>
                <td>&nbsp;</td>
                <td colspan="2" align="right">LAWN:</td>
                <td class="short_cell bold">-$8.70</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td colspan="2" align="right">Total:</td>
                <td class="short_cell bold">$56.27</td>
            </tr>
        </table>


    </div>
    </div>

            <div class="footer">
            My company<span class="spacer">&#9679;</span><a href="#" target="_blank">mycompany.com</a><span class="spacer">&#9679;</span>888-111-1234<span class="spacer">&#9679;</span><a href="mailto:info@mycompany.com">info@mycompany.com</a>
        </div>

</div>
</div>
<div class="page-break"></div>

  </body>
</html>
Abhishek Ghosh
  • 1,161
  • 9
  • 19
  • sorry, you've lost the plot a bit. The footer should be at the bottom and the header at the top. Not sure why you moved the footer. The first example screenshot is correct; the second and third are not, but were produced with the same code on page reload. – TH1981 Oct 04 '16 at 16:19
  • Thanks @Abhishek - almost, but not quite. I need both header and footer to be fixed, on every page. As soon as I re-add the `position:fixed` to the footer I get my intermittent issue again where they aren't loading at top and bottom correctly. Does that make sense? Sorry if I wasn't clear :) – TH1981 Oct 05 '16 at 14:03
  • You are welcome! CSS `position:fixed` has problems with some browsers and devices. That was a bug for FF (which is recently patched). You may read this one to fix - http://stackoverflow.com/questions/36330637/div-position-fixed-behaves-different-on-firefox – Abhishek Ghosh Oct 05 '16 at 16:03
  • This doesn't work in Chrome, the header always overflows the content of the subsequent pages – Mark May 14 '19 at 08:07