flying saucer page number + page count

Question

I'm trying to configure a nice footer on a pdf document I'm generating using Flying Saucer. But I'm having problems getting the page number and page count in a nice position.

Consider this bit of css:

div#page-footer {
    position : running(footer);
    // ..  more styling .. //
}
div.page-number:before {
    content: counter(page);
}

Using this bit of html will not give me a page number:

<div id="page-footer">
    <div class="page-number"></div>
</div>

The only way I manage to get a page number if I move the class a level up.

<div id="page-footer" class="page-number">
</div>

But this does not allow me to add additional content in the footer or makes it really difficult to apply styling. I could add a separate footer just for the page number, but it would be quite hard to get the position just right.

Is there a way to get page number + page count in a footer that also contains other elements and styling?

Extra notes:

• I simplified the footer a bit, in the original there is more in there, but even this simple example it is giving problems.
• using span or div for the element does not make a difference.

Answer 1

You should use the id instead of the class to identify the div containing the page number.

This will work:

div#page-number:before {
    content: counter(page);
}

<div id="page-footer">
    <div id="page-number"></div>
</div>