Print pages with CSS level 2

Question

I generate content for a statement using xsl. Typically the length of a statement is determined by the number of items on it. This means it can run over multiple pages. The statements are quite complex with company details, account details, summary sections, detailed sections for each type summarized, etc.

I need to have a page header on each page containing multiple lines and the page number and put it all inside a frame.

I use page-break-before and page-break-after effectively to start new pages after for example a summary table of the statement and before a detailed table for each summarized item, but I'm struggling to add a page header across all pages and to add page numbers to each page.

This does nothing:

@page :header{
    content: "this is my header";
}

Neither does this:

@page {
    size: auto;
    margin:10%;

    @top-right { 
        content: "Page " counter(page) " of " counter(pages); 
    } 
}

This does not work:

in .css:

@page {
  @top-center{
      contnent: element(pageHeader);
  }
}

in .xsl:

<div id="pageHeader">
    <!-- Content of the header here -->
</div>

This doesn't work either:

in .css:

@page {
   @top-center {
      content: element(pageHeader);
   }
}

#pageHeader {
   position: running(pageHeader);
}

in .xsl:

<div id="pageHeader">
   <!-- content -->
</div>