title: How can I use counter-increment to show page numbers on a printed web page?
body: <p>I have the following CSS:</p>
  
  <pre><code>@media print {
      div.question-list-footer
      {
          position: fixed;
          bottom: 0;
          padding-left: 180px;
      }
      div.question-list-footer-center 
      {
          text-align: center;
      }
      @page { counter-reset: page 1}
  }
  
  #pageNumber:after { content: counter(page); }
  #pageNumber { counter-increment: page; }
  </code></pre>
  
  <p>and the following html on my page:</p>
  
  <pre><code>&lt;div class="question-list-footer"&gt;
      &lt;div class="question-list-footer-center"&gt;
          &lt;span&gt;Page Number: &lt;span id="pageNumber"&gt;&lt;/span&gt;&lt;/span&gt;&lt;br/&gt;
          Date: @firstItem.Date.Value.ToShortDateString()
          Id: @firstItem.Id
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this works when printing except that all pages have "Page Number 1". (IE9, Chrome &amp; FF)  I have been staring at this and playing with it for ages and still can't see why.  Does anyone have a fix? - Please tell me it's not obvious. (FWIW - Chrome doesn't like my bottom).</p>