When exporting as PDF, Firefox clips bottom div intended to provide copyright message on every page

Question

I need to output a PDF of this page – http://mpkb.org/doku.php/home:1 – and have it make a copyright statement on the bottom of every page. The problem is that that statement is clipped when I export as PDF from Firefox for Mac. (I just have to do this once a month, so I don't necessarily care if this doesn't work in other browsers.)

Using a vintage Eric Meyer suggestion, here's the CSS I'm using:

#print-footer {display: block; position: fixed; bottom: -20px ; overflow: visible;}

I have tried:

• Changing the bottom: -20px to 0px and assigning "padding: 50px" for the elements containing the content, i.e. .dokuwiki, .clearfix, #wrap, body, html.
• Changing the margins for Firefox in the Page Setup.
• Trying Google Chrome for Mac or Safari Mac.
• Changing the background colors of the elements containing content to none or transparent.
• Changing the z-index of the elements containing content to less than z-index for #print-footer

This is too much of a pain to bring this into Adobe Acrobat whenever I update this document.

Any ideas?

thanks, Paul

Answer 1

My experience with print CSS is limited but try this:

@page {
   margin-bottom: 4cm;
}

#print-footer {
   display: block;
   position: fixed;
   bottom: -10px;
}

I was able to get se the copyright in every page, but it was overlapping with the content and I couldn't get the @page property working. Here are some things you could try.

@page copyspace { margin: 5cm; }

body { page: copyspace; }

#print-footer { ... }

Answer 2

Thanks for taking the time, UberNeet.

I actually spent a lot more time on this problem. The main problem here is that @page is not supported by almost all browsers (I think Opera is an exception) even though it is a CSS 2.X specification: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Grammar_and_rules

I was poking around the CSS 3 specifications: http://www.w3.org/TR/css3-page/#page-size-prop

...and there are several more useful, print-friendly features that I can only dream a browser would support.

For example:

@page {
  @bottom-center {
    content: "Copyright 2003-2010 Autoimmunity Research Inc.";
    color: #b31b1b;
    font-size: 11px;
    font-family: verdana;
    margin-bottom: 10px;
  }
}

So what I ended up doing is using one of the few programs on earth that does honor CSS3: PrinceXML.

PrinceXML is awesome! All I had to do was download and install it on my Mac and type into my Terminal this:

/Users/myaccount/prince/bin/prince http://mpkb.org/doku.php/home:1 -o /Users/my account/Desktop/final.pdf

And I get a perfectly formatted PDF. Cool, no?

By the way, for people who want to do something fancy such as a Table of Contents, you should check this article: http://www.alistapart.com/articles/boom

Well, anyway, hope this helps someone else.

Paul