Log in / Register

Forum › How do I...?

Hi my issue is page footer of first page is convert to new page at second but always at top why you can check my css and

lkkumar
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Visible Graphics Contract</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lexend:wght@100..900&display=swap"
rel="stylesheet">
<style>
/* ===== PAGE SETUP ===== */
@page {
size: 612px 792px;
margin: 2.2cm 0 0cm 0;
counter-increment: page;

@top-left {
content: element(header);
}

@bottom-center {
content: element(footer-page0);
}
}

/* Fixed pages after the table */
@page page3 {
size: 612px 792px;
margin: 2.2cm 0 5.4cm 0;
counter-increment: page;

@top-left {
content: element(header);
}

@bottom-center {
content: element(footer-page3);
}
}

@page page4 {
size: 612px 792px;
margin: 2.2cm 0 0 0;
counter-increment: page;

@top-left {
content: element(header);
}

@bottom-center {
content: element(footer-page4);
}
}

/* ===== Running elements (header + different footers) ===== */
#header {
position: running(header);
}

#footer-page0 {
position: running(footer-page0);
}

#footer-page3 {
position: running(footer-page3);
}

#footer-page4 {
position: running(footer-page4);
}

.footer-summary {
page-break-inside: avoid;
display: block;
/* position: absolute !important;
bottom: 0; */
}

table {
page-break-inside: auto;
break-inside: auto;
}

tr {
page-break-inside: avoid;
break-inside: avoid;
page-break-after: auto;
}

/* Override for page3 and page4 if needed */
@page page3 {
size: 612px 792px;
margin: 2.2cm 0 5.2cm 0;
counter-increment: page;

@top-left {
content: element(header);
}

@bottom-center {
content: element(footer-page3);
}
}

@page page4 {
size: 612px 792px;
margin: 2.2cm 0 0 0;
counter-increment: page;

@top-left {
content: element(header);
}

@bottom-center {
content: element(footer-page4);
}
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}

#header {
position: running(header);
display: flex;
justify-content: space-between;
align-items: center;
background-color: #15191E;
padding-left: 15px;
font-family: 'Arial', sans-serif;
color: white;
height: 83px;
overflow: hidden;
}

/* #footer-page1 is now a normal content block, not a running element or absolutely positioned */
.footer-summary {
width: 100%;
font-size: 8pt;
text-align: center;
box-sizing: border-box;
}

#footer-page3 {
position: running(footer-page3);
width: 100%;
font-size: 8pt;
text-align: center;
box-sizing: border-box;
}

#footer-page0 {
position: running(footer-page0);
width: 100%;
font-size: 8pt;
text-align: center;
box-sizing: border-box;
}

#footer-page4 {
position: running(footer-page4);
width: 100%;
font-size: 8pt;
text-align: center;
box-sizing: border-box;
}

.footer-summary,
#footer-page0,
#footer-page3,
#footer-page4 {
height: auto;
padding-bottom: 0;
}

.left {
display: flex;
align-items: center;
}

.visible-logo {
height: 54px;
width: 134px;
object-fit: contain;
margin-right: 12px;
}

.left-text .title {
font-size: 16px;
letter-spacing: 1.5px;
font-weight: bold;
}

.left-text .subtitle {
font-size: 11px;
color: #ccc;
margin-top: 2px;
}

.right {
background-color: #D40129;
padding: 0 33px;
display: flex;
align-items: center;
height: 200px;
/* clip-path: circle(100% at 76% 50%); */
border-radius: 110px 0 0 110px;
}

.right-content {
display: flex;
align-items: center;
gap: 8px;
overflow: hidden;
}

.daves-logo {
width: 55px;
height: 55px;
object-fit: contain;
}

.proposal-text {
font-size: 22px;
font-weight: bold;
font-family: Inter, sans-serif;
color: white;
}

h1 {
font-size: 13pt;
font-weight: bold;
padding: 0;
}

h2 {
font-size: 11pt;
font-weight: bold;
padding: 0;
}

.page-counter {
color: #000;
text-align: center;
font-family: Inter;
font-size: 10px;
font-style: normal;
font-weight: 600;
line-height: normal;
}

.page-counter::before {
content: counter(page) " / " counter(pages);
}

.info {
display: flex;
gap: 32px;
background: #F2F4F7;
padding: 16px 0;
font-family: 'Inter', Arial, sans-serif;
font-size: 14px;
color: #23272f;
}

.info>div {
flex: 1;
padding: 0 16px;
}

.info>div:not(:first-child) {
border-left: .75px solid #D0D5DD;
}

.info strong {
display: block;
font-size: 16px;
font-weight: 600;
margin-bottom: 4px;
color: #23272f;
}

.info div>div {
margin-bottom: 2px;
}

.client-info {
margin-bottom: 12px;
}

.client-info div {
margin-bottom: 3px;
}

table {
width: 100%;
border-collapse: collapse;
margin: 12px 0;
font-size: 10.5pt;
}

th {
text-align: left;
padding: 3px 5px;
font-weight: bold;
}

td {
padding: 1px 5px;
vertical-align: top;
}

.text-right {
text-align: right;
}

hr {
border: 0;
border-top: 1px solid #000;
margin: 15px 0;
}

.signature-section {
margin-top: 10px;
display: flex;
gap: 0px 20px;
}

.signature-line {
display: inline-block;
width: 50%;
border-bottom: 1px solid #15191E;
margin-right: 0px;
padding-top: 0px;
color: #15191E;
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: normal;
padding-bottom: 19.5px;
}

.page-number {
text-align: center;
font-size: 9pt;
margin-top: 0px;
}

.no-break {
page-break-inside: avoid;
}

.terms-list {
list-style-type: upper-alpha;
padding-left: 0;
margin-left: 0;
}

ul.terms-list.number {
list-style-type: decimal;
}

.terms-list li {
padding-left: 0px;
margin-left: 16px;
margin-bottom: 8px;
color: #475467;
font-family: Inter;
font-size: 7px;
font-style: normal;
font-weight: 400;
line-height: 9.3px;
letter-spacing: -0.14px;
}

.custom-table {
width: 100%;
border-collapse: collapse;
font-family: 'Inter', Arial, sans-serif;
font-size: 14px;
margin: 0;
/* margin-bottom: 120px; */
}

.custom-table thead th {
background: #15191E;
color: #fff;
font-weight: 600;
padding: 12px 8px;
text-align: center;
border: none;
font-size: 8px;
font-weight: 500;
border-left: 1px solid #15191E !important;
border-right: 1px solid #15191E !important;
}

.custom-table tbody tr {
background: #fff;
border-bottom: 0.6px solid #D0D5DD;
}

.custom-table tbody tr:last-child {
border-bottom: none;
}

.custom-table td {
padding: 0px 8px;
vertical-align: middle;
color: #475467;
font-family: Inter;
font-size: 8px;
font-style: normal;
font-weight: 400;
line-height: 12px;
border-bottom: 1px solid #D0D5DD;
text-align: center;
}

.custom-table tbody tr:last-child td {
border-bottom: none;
}

.custom-table thead th:nth-child(3) {
text-align: left;
}

.custom-table td:nth-child(3) {
text-align: left;
}

.custom-table .sign-label {
display: inline-block;
background: #D40129;
color: #fff;
font-weight: 700;
padding: 2px 8px;
border-radius: 3px;
font-size: 13px;
margin-bottom: 4px;
}

.custom-table .sign-img {
width: 40px;
height: 40px;
object-fit: contain;
background: #fff;
}

.custom-table .text-right {
text-align: right;
}

.page-container {
display: table;
height: 100%;
width: 100%;
}

.page-body {
display: table-row;
height: 100%;
}

table.summary-table tr td:first-child {
text-align: left;
padding-left: 0;
}

#header .left img {
width: 134px;
height: 54px;
object-fit: contain;
}

@media print {
.footer-summary {
display: none;
}

.custom-table:last-of-type+.footer-summary {
display: block;
}
}

/* --- end preserved original styles --- */
</style>
</head>

<body>
<!-- Header -->
<div id="header">
<div class="left">
<img
src="https://lxzgmqlajxubgmysyyiv.supabase.co/storage/v1/object/sign/demo/logo.png?token=eyJraWQiOiJzdG9yYWdlLXVybC1zaWduaW5nLWtleV8xZTk3ZTZhNy1iNjc2LTRjMjAtYjVhYS1jYmE4YTg5NjAwOTEiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJkZW1vL2xvZ28ucG5nIiwiaWF0IjoxNzU0OTA1OTIxLCJleHAiOjE3NTc0OTc5MjF9.GkI3Mw6EXY55FnKvl8CJ0EcuOpIl6mqH8jo-ejgKZWo" />
</div>
<div class="right">
<div class="right-content">
<img
src="https://bqobctrcfgearocxjhxr.supabase.co/storage/v1/object/public/images//Round%20Channel%20Logo%20(1).svg"
alt="Daves Hot Chicken Logo" class="daves-logo" style="margin-right:10px;" />
<span class="proposal-text">Proposal</span>
</div>
</div>
</div>
<div id="footer-page0"
style="background-color: #F2F4F7; padding: 10px 0; margin: 0; display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0;">
<div
style="width: fit-content; border: none; background: #EAECF0; border-radius: 3px; padding: 2px 12px; margin: 0; max-height: 20px;"
class="page-counter"></div>
</div>
<!-- Page 1 Content - Can auto-create new pages based on data -->
<div class="content">
<div class="info" style="display: flex; gap: 32px;">
<div style="flex: 1;">
<strong
style=" color:#15191E;font-family: Inter;font-size: 12px;font-style: normal;font-weight: 600;line-height: normal;">Billing
Info</strong>
<div style="display: flex;flex-direction: column;gap: 2px">
<p
style="color: #475467; font-family: Inter; font-size: 9px; font-style: normal; font-weight: 400; line-height: 15px;">
WKS Restaurant Group</p>
<p
style="color: #475467; font-family: Inter; font-size: 9px; font-style: normal; font-weight: 400; line-height: 15px;">
5856 Corporation Ave. Ste 200 Cypress, CA 90630,</p>
<p
style="color: #475467; font-family: Inter; font-size: 9px; font-style: normal; font-weight: 400; line-height: 15px;">
5856 Corporation Ave. Ste 200 Cypress, CA 90630,</p>
<div
style="display: flex; align-items: center; color: #475467; font-family: Inter; font-size: 9px; font-style: normal; font-weight: 400; line-height: 15px;">
<h5
style="color: #475467; font-family: Inter; font-size: 9px; font-style: normal; font-weight: 600; line-height: 15px;">
Phone: </h5> 310.318.3100
</div>
<div
style="display: flex; align-items: center; color: #475467; font-family: Inter; font-size: 9px; font-style: normal; font-weight: 400; line-height: 15px;">
<h5
style="color: #475467; font-family: Inter; font-size: 9px; font-style: normal; font-weight: 600; line-height: 15px;">
Attn: </h5> Becca Meussner
</div>
</div>
</div>
<div style="flex: 1;">
<strong
style=" color:#15191E;font-family: Inter;font-size: 12px;font-style: normal;font-weight: 600;line-height: normal;">Job
Info</strong>
<div style="display: flex;flex-direction: column;gap: 2px">
<p
style="color: #475467; font-family: Inter; font-size: 9px; font-style: normal; font-weight: 400; line-height: 15px;">
First Job</p>
<p
style="color: #475467; font-family: Inter; font-size: 9px; font-style: normal; font-weight: 400; line-height: 15px;">
100 Coastal Way, Chesapeake, VA 23320</p>
<p
style="color: #475467; font-family: Inter; font-size: 9px; font-style: normal; font-weight: 400; line-height: 15px;">
100 Coastal Way, Chesapeake, VA 23320</p>
</div>
</div>
<div style="flex: 1;">
<strong
style=" color:#15191E;font-family: Inter;font-size: 12px;font-style: normal;font-weight: 600;line-height: normal;">Contract
Info</strong>
<div style="display: flex;flex-direction: column;gap: 2px">
<div
style="display: flex; align-items: center; color: #475467; font-family: Inter; font-size: 9px; font-style: normal; font-weight: 400; line-height: 15px;">
<h5
style="color: #475467; font-family: Inter; font-size: 9px; font-style: normal; font-weight: 600; line-height: 15px;">
Date: </h5> 08/07/25
</div>
<div
style="display: flex; align-items: center; color: #475467; font-family: Inter; font-size: 9px; font-style: normal; font-weight: 400; line-height: 15px;">
<h5
style="color: #475467; font-family: Inter; font-size: 9px; font-style: normal; font-weight: 600; line-height: 15px;">
Proposal #: </h5> DHCP-001
</div>
<div
style="display: flex; align-items: center; color: #475467; font-family: Inter; font-size: 9px; font-style: normal; font-weight: 400; line-height: 15px;">
<h5
style="color: #475467; font-family: Inter; font-size: 9px; font-style: normal; font-weight: 600; line-height: 15px;">
Representative :</h5> Wahaj Ali
</div>
</div>
</div>
</div>
<div class="page-container">
<div class="page-body">
<table class="custom-table">
<thead>
<tr>
<th style="width: 30px;">Qty.</th>
<th style="width: 70px;">Sign</th>
<th>Manufacture and install the following</th>
<th style="width: 100px;">Unit Price</th>
<th style="width: 100px;">Total Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<img class="sign-img"
src="https://lxzgmqlajxubgmysyyiv.supabase.co/storage/v1/object/sign/demo/logo.png?token=eyJraWQiOiJzdG9yYWdlLXVybC1zaWduaW5nLWtleV8xZTk3ZTZhNy1iNjc2LTRjMjAtYjVhYS1jYmE4YTg5NjAwOTEiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJkZW1vL2xvZ28ucG5nIiwiaWF0IjoxNzU0OTA1OTIxLCJleHAiOjE3NTc0OTc5MjF9.GkI3Mw6EXY55FnKvl8CJ0EcuOpIl6mqH8jo-ejgKZWo"
alt="Sign Logo" />
</td>
<td>12″ Raceway-Mounted (8'-8"x 8'-8") White Halo-Lit Channel Letters</td>
<td>$5400.00</td>
<td>$16200.00</td>
</tr>
<tr>
<td>2</td>
<td>
<img class="sign-img"
src="https://bqobctrcfgearocxjhxr.supabase.co/storage/v1/object/public/images//sign%20(1).png"
alt="Sign Logo" />
</td>
<td>18″ Raceway-Mounted (4'-2"x 1'-3") White Face + Halo Lit (Duel LEDs) Channel Letters </td>
<td>$3000.00</td>
<td>$3000.00</td>
</tr>
<tr>
<td>3</td>
<td>
<img class="sign-img"
  1. Try It Out Doc (2).pdf‎ 108.8 kB ‎
    this is pdf
howcome
Hello Ikkumar,

Could you attach your code as a file? Preferably as a minimized code example describing the problem. E.g. "This footer should not be on page 2".