1

How can I print page numbers on pages when printing html using IE and/or Edge?

I try to use the examples posted by Donvino, however they don't work for me using IE and/or Edge browsers.

Below is the code that I use.

In CSS:

/Different style sheets for print media type/

@media print 
{
    body 
    {
        counter-reset: page;
    }           

    /*Always insert a page break before each section (when printing)*/
    section {page-break-before: always;}

    #print-footer 
    {
        display: block;
        position: fixed;
        bottom: 0;
        left:0;     
    }
    #print-footer:after 
    {
        counter-increment: page;    
        content:"Page " counter(page);          
    }
}

Then just before at the end of my html body:

<footer id="print-footer">
  <p>Hege Refsnes (#12652)<BR>
  May 28, 2014</p>
</footer>

When I print my HTML document, the footer will display on every page and the page number will not increment.

What I need is to have the footer start displaying from page 2, and it would be nice to have the page counter increment on each page.

Community
  • 1
  • 1
MCunha
  • 41
  • 4
  • Hmm I can't seem to get their method to work at all, mind posting your version of their code? – jaunt Sep 14 '15 at 16:52
  • The code will be the same as in example as posted by Donvino. I do see the string Page 1 at the bottom of all pages. The number of the page does not increment. What I need is to be able to print a footer when my customers print my HTML pages. My footer will have some strings like the current date and author and I would like to also display the current print page. – MCunha Sep 14 '15 at 17:26
  • Maybe there would be another way to do it? Perhaps with "footer" element ? I did try with "footer" element, however the page number will not show up... – MCunha Sep 14 '15 at 17:41
  • Could probably utilize something with SASS and the pseudo command ::after... – Nicholas Hazel Sep 15 '15 at 21:35

0 Answers0