0

I'm trying to print a dynamic footer at the bottom of every printed page, using css + html.

This is the html code

<div class="footer">"
<p>Footer static message</p>
<p class="pages">Pag: 
    <span id="pagenumber"></span>/
    <span id="pagecount"></span>
</p>
</div>

and this is the relevant part of the css

.pages {
    text-align: "center";
    font-family: "Times New Roman";
    font-size: 9.75pt;
    color: #000000;
}

.footer {
    position: running(footer);
    text-align: left;
    font-family: "Times New Roman";
    font-size: 9.75pt;
    color: #A0A0A0;
    padding-bottom: 20px;
}

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

#pagenumber:before {
    content: counter(page);
}
#pagecount:before {
    content: counter(pages);
}

the "footer static message" is printed correctly, but the page counter is mostly cut away from the page, i can see just the top part of it. How can i change the css so that the printed footer stays inside the bottom margin?

UPDATE

I solved the problem by using divs instead of p tags, the css is unchanged.

<div class="footer">"
<div>Footer static message</div>
<div class="pages">Pag: 
    <span id="pagenumber"></span>/
    <span id="pagecount"></span>
</div>
</div>
rekotc
  • 595
  • 1
  • 10
  • 21
  • Possible duplicate of [Sticking custom footer on each page to bottom while printing](http://stackoverflow.com/questions/21032137/sticking-custom-footer-on-each-page-to-bottom-while-printing) – Harsha W Feb 16 '17 at 11:17
  • i solved the problem by changing the

    tags to

    tags, and leaving the rest of the code unmodified.
     – rekotc Feb 16 '17 at 11:23

0 Answers0