title: How to insert page number on print page
body: <p>I want to display page numbers only on print page. I have written css counters to do this job but this only works on Firefox but not in Chrome and IE.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
             .footer{
                  display:none;
              }
              body{
                  counter-reset:page;
              }
              @media print{
  
                  div.footer{
                      display:table-footer-group;
                      position:fixed;
                      bottom:0pt;
                      right:0pt;
                  }
                  div.footer:after{
                      counter-increment:page;
                      content:counter(page);
                  }
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1&gt;HTML tutorials:&lt;/h1&gt;
          &lt;h2&gt;HTML Tutorial&lt;/h2&gt;
          &lt;h2&gt;CSS Tutorial&lt;/h2&gt;
  
          &lt;h1&gt;Scripting tutorials:&lt;/h1&gt;
          &lt;h2&gt;JavaScript&lt;/h2&gt;
          &lt;h2&gt;VBScript&lt;/h2&gt;
  
          &lt;h1&gt;XML tutorials:&lt;/h1&gt;
          &lt;h2&gt;XML&lt;/h2&gt;
          &lt;h2&gt;XSL&lt;/h2&gt;
  
          &lt;h1&gt;HTML tutorials:&lt;/h1&gt;
          &lt;h2&gt;HTML Tutorial&lt;/h2&gt;
          &lt;h2&gt;CSS Tutorial&lt;/h2&gt;
  
          &lt;h1&gt;Scripting tutorials:&lt;/h1&gt;
          &lt;h2&gt;JavaScript&lt;/h2&gt;
          &lt;h2&gt;VBScript&lt;/h2&gt;
  
          &lt;h1&gt;XML tutorials:&lt;/h1&gt;
          &lt;h2&gt;XML&lt;/h2&gt;
          &lt;h2&gt;XSL&lt;/h2&gt;
  
          &lt;h1&gt;HTML tutorials:&lt;/h1&gt;
          &lt;h2&gt;HTML Tutorial&lt;/h2&gt;
          &lt;h2&gt;CSS Tutorial&lt;/h2&gt;
  
          &lt;h1&gt;Scripting tutorials:&lt;/h1&gt;
          &lt;h2&gt;JavaScript&lt;/h2&gt;
          &lt;h2&gt;VBScript&lt;/h2&gt;
  
          &lt;h1&gt;XML tutorials:&lt;/h1&gt;
          &lt;h2&gt;XML&lt;/h2&gt;
          &lt;h2&gt;XSL&lt;/h2&gt;
          &lt;div class="footer"&gt;Page &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What are the other options to make it display in Chrome and IE browsers?</p>