Hii All, i have a custom print format with letter head, i have a issue with content overlapped with letter head, please find my code below, thanks in advance for the solutions.
<!-- Main wrapper table for repeating header -->
<table class="print-format-wrapper">
<!-- HEADER SECTION - THIS WILL REPEAT ON ALL PAGES -->
<thead class="letter-head-repeat">
<tr>
<td> {% if doc.letter_head %} {{ frappe.get_doc("Letter Head", doc.letter_head).content }} {% endif %} </td>
</tr>
<tr>
<td style="height: 30px; padding: 0;"></td>
</tr>
</thead>
<!-- BODY SECTION - YOUR CONTENT -->
<tbody class="content-wrapper">
<tr>
<td>
<div>
<table style="width: 100%; border-bottom: 1px solid #000;" >
<tr>
<td style="width:55%; text-align: center"><h5 style="font-weight: bold;
font-size: 16pt;
text-decoration: underline; margin: 0px; color: black;">QUOTATION</h5></td>
<td style="width: 45%; margin: 0px; font-size: 10pt;">
<p>Reference No. : {{ doc.name }}</p>
<p style="margin-bottom: 0px;">Revision : A</p>
</td>
</tr>
</table>
<div style="border-bottom: 1px solid #000; padding: 5px 0px;">
<table style="width: 100%;">
<tr>
<td style="width: 55%;">
<div>
<p>To<span style="margin-left: 34px;">:</span> {{doc.customer_name}}</p>
<p>For<span style="margin-left: 28px;">:</span> {{doc.company}}</p>
<p>E-mail<span style="margin-left: 6px;">:</span> {{doc.contact_email}}</p>
<p>No. of pages: 4(Including this page)</p>
</div>
</td>
<td>
<div>
<p>Date : 29 August 2025</p>
<p>From : Norman Yaw</p>
</div>
</td>
</tr>
</table>
</div>
<div style="border-bottom: 1px solid #000;
padding: 5px 0px;">
<p style="font-family: Arial, sans-serif;
font-weight: bold;
font-size: 10.5pt;
text-decoration: underline;"><span style="margin-right: 52px;">Subject</span> {{ doc.custom_subject }}</p>
<p style="font-family: Arial, sans-serif;
font-weight: bold;
font-size: 10.5pt;"><span style="margin-right: 10px; text-decoration: underline;">Project Name</span> {{ doc.custom_project_name }}</p>
</div>
<div>
<div class="General-tab-heading">
<h5>(I) <span>General</span></h5>
</div>
<p>{{ doc.custom_general_terms }}</p>
<div class="General-tab-heading">
<h5>(II) <span>Workscope & Supply</span></h5>
</div>
<p>{{ doc.custom_workscope__supply }}</p>
<div class="General-tab-heading">
<h5>(II) <span>Excluded From Our Workscope & Supply</span></h5>
</div>
<p>{{ doc.custom_excluded_from_our_workscope__supply }}</p>
<div class="General-tab-heading">
<h5>(IV) <span>Delivery Schedule</span></h5>
</div>
<p>{{ doc.custom_subject }}</p>
<p>{{ doc.custom_delivery_schedule }}</p>
<div class="General-tab-heading">
<h5>(IV) <span>Schedule of Prices</span></h5>
</div>
<div class="General-tab-heading">
<h5>(VI) <span>Payment Terms</span></h5>
</div>
<p>{{ doc.custom__payment_terms }}</p>
<div class="General-tab-heading">
<h5>(VII) <span>Validity</span></h5>
</div>
<p>{{ doc.valid_till }}</p>
<p>{{ doc.custom_validity }}</p>
<div class="General-tab-heading">
<h5>(VIII) <span>Certificates</span></h5>
</div>
<p>{{ doc.custom_certificates }}</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
/* Print format table structure for repeating header */
table.print-format-wrapper {
width: 100%;
border-collapse: collapse;
}
thead.letter-head-repeat {
display: table-header-group;
}
tbody.content-wrapper {
display: table-row-group;
}
.print-format td{
padding: 0 !important;
}
body {
margin: 0px 0px;
padding: 0;
font-family: Arial, sans-serif;
color: #000000;
}
td, div{
font-family: Arial, sans-serif;
font-size: 10pt;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: Arial, sans-serif;
}
.General-tab-heading{
background: #d8d8d8;
padding: 2px 2px;
margin-top: 10px;
border: 1px solid black;
}
.General-tab-heading h5{
margin: 0px;
font-size: 16px;
font-weight: bold;
}
.General-tab-heading h5>span{
text-decoration: underline;
margin-left: 10px;
}
.ql-editor {
font-family: Arial, sans-serif !important;
}
.ql-editor p, .ql-editor span, .ql-editor ol, .ql-editor ul{
font-size: 10pt;
}
body:last-child .print-format td img {
width: auto !important;
}
@page {
size: A4;
margin-top: 180px; /* Space for letterhead */
margin-bottom: 60px;
margin-left: 40px;
margin-right: 40px;
}
Letter Head:
---------------------------
<div style="width: 100%; border-bottom: 1px solid #000; padding-bottom: 0px; padding-top: 15px;" id="page-header">
<table style="width: 100%; border-collapse: collapse;">
<tbody><tr>
<!-- LEFT SECTION -->
<td style="width: 55%; vertical-align: top;">
<table style="border-collapse: collapse;">
<tbody><tr>
<td style="vertical-align: top; padding-right: 10px;">
<img src="/files/RMES7ee3a5.png" style="width: 120px !important; height: 100px;">
</td>
<td style="vertical-align: top;">
<div style="font-family: Arial, sans-serif; line-height: 1.4;">
<div style="font-size: 14pt; font-weight: bold; color: black; margin-left: -80px; margin-right: -150px;
text-align: center; font-family: Arial, sans-serif; margin-top: -10px;">
<p style="white-space: nowrap; margin-bottom: 0px;">REGIONAL MARINE & ENGINEERING</p><span>SERVICES PTE LTD</span>
</div>
<div style="font-size: 7.5pt; color: #000000;">
GST No. xx-xxxxxx-R<br>
No. 16, abc, Singapore xxxxx<br>
Tel: (65) 6xxx 3781 Fax: (65) xxxxxx<br>
www.abc.com.sg
</div>
</div>
</td>
</tr>
</tbody></table>
</td>
<!-- RIGHT SECTION -->
<td style="width: 45%; vertical-align: top; text-align: right;">
<table style="border-collapse: collapse; margin-left: -3px;">
<tbody><tr>
<td style="text-align: center;" colspan="2">
<img src="/files/IADCb5ea41.png" style="width: 100px !important;margin-left: 55px;">
</td>
</tr>
<tr>
<td style="padding: 4px !important;">
<div style="font-size: 6pt; text-align: center;">
API Q1-1982, API 6A-1360, API 16A-0315<br>
API 16C-0393, API 16RCD-0018, API 4F-0512
</div>
</td>
<td style="padding: 4px !important;">
<div style="font-size: 6pt; text-align: center;">
ASME ^*)*)^%, ^&%()*#<br>
ASME NVKNLN, NB KBVNKNL
</div>
</td>
</tr>
<tr>
<td style="text-align: center; padding: 0px !important;" colspan="2">
<img src="/files/RMES_CERTf114b5.png">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>