I am attempting to customize the format of an e-commerce receipt for printing, including a fixed header and footer that will appear on every printed page. However, I am encountering intermittent issues. Sometimes, the layout works correctly, while other times the header appears in the middle of the page instead of the top. Occasionally, simply closing and reopening the print dialog box changes how the receipt loads.
Examples:
Correct: https://i.sstatic.net/vVGdf.jpg
Incorrect: https://i.sstatic.net/KJMLl.jpg
Incorrect: https://i.sstatic.net/YmYgM.jpg
Could this be related to a rendering issue in Chrome?
Full code provided 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;
}
var...
<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="wrapp...