How to use increment counter to display page numbers on a printed web page?

Question

I have the following CSS:

@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; } 

and the following html on my page:

 <div class="question-list-footer"> <div class="question-list-footer-center"> <span>Page Number: <span id="pageNumber"></span></span><br/> Date: @firstItem.Date.Value.ToShortDateString() Id: @firstItem.Id </div> </div> 

and this works when printed, except that all pages have "Page Number 1". (IE9, Chrome and FF) I looked at this and played with it for ages and still do not understand why. Anyone have a problem? “Please tell me this is not obvious.” (FWIW - Chrome doesn't like my bottom).

Answer 1

I think this line:

 @page { counter-reset: page 1} 

Facilities:

"On each printed page, reset the page counter to 1.

See http://www.w3.org/TR/CSS21/generate.html#propdef-counter-reset

Therefore, each page will have page number 1, as you reset it to 1 on each page.

Will it work if you do body { counter-reset: page 1} instead? (As in the example from the specification.)

Answer 2

EDIT

I think if you just delete this, the counter will not reset, so it will just increment as you want

 @page { counter-reset: page 1}