How can I use counter-increment to show 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 printing except that all pages have "Page Number 1". (IE9, Chrome & 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).

Answer 1

I think this line:

@page { counter-reset: page 1}

Means:

“On each printed page, reset the page counter to 1.”

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

Hence every page would have page number 1, as you’re resetting it to 1 on each page.

Does it work if you do body { counter-reset: page 1} instead? (Like in the example from the spec.)