I am creating a document which appears on the screen, but is also exported to a PDF through a HTML/PDF converter, that understands CSS. The export function uses a separate style sheet than the web page, so I can create a different style for something on the export than on the screen. Here's the problem: On the screen I want a page header, but no footers or page breaks - i.e. it is one large web page. On the exported version, I want headers and footers on each page. I have a new requirement that the header is a graphic which is absolutely positioned, and the footer is text which is absolutely positioned. When I do the headers, footers, and page breaks without the absolute positioning, they work fine. When I absolutely position them, they look fine on the screen, however when exported, the headers of every page overlap each other on the top of the first page, and the footers of every page overlap each other on the bottom of the last page - i.e. it appears to be ignoring page breaks. In the export CSS, the code looks like this:
- stealthheadi is the header for the first page (only) - it's separate because of the on-screen version (see below).
- stealthheadc is for the headers which are other than the first page - it is identical here, but in the displayed css, it's opacity is set to 0, so it does not appear.
p.stealthfoot (The others are div's), is the footer - the opacity is always 0 on the displayed version, so it's never displayed. I only recently incorporated the page-break-after into the footer - it was previously a separate <p>. I've tried it with an without the z-index option - makes no difference.
Does anyone know how to do page breaks with absolute positioning before and after the break?