12

I can get a header to print on each page, but I'm new to print margins. I thought the @page css would work, but it does not seem to affect page margins. If I set the margins on the body, it works on page one, but subsequent pages start the top margin at the default, putting the header over top of the text.

<style>  
.header {  
 position: fixed;  
 top: 0;  
}  
@page {  
 size: 11in 17in;  
 margin-left: 1in;  
 margin-right: 1in;  
 margin-top: 1in;  
 margin-bottom: 1in;  
} 
</style>

<body>  
<span class=header>This is the header</span>  
This is the text of the document. (repeat until I get to page 2)  
</body>
Ted Scheckler
  • 1,389
  • 4
  • 16
  • 34

2 Answers2

9

Printing support by all browsers is very poorly supported with horrendous bugs in many popular browsers that have gone unfixed for years.

The short answer is to avoid HTML/CSS printing if you need to ensure a specific layout. Use PDF, possibly dynamically generated on-demand. There's various PDF generator APIs such as iTextSharp. It's possible to print from Flash, but only if Flash is installed and working (i.e. no Flashblock, iOS).

HTML/CSS printing should be restricted to simple layouts. Form printing is a nightmare with fieldset & legend support being especially problematic (particularly on Firefox). Interestingly printing support is best on the internet explorers.

The CSS3 printing support specification hasn't been completed and is some time off.

General principles:

  • No backgrounds or background CSS images are supported (by default - users can change their browser settings for an intranet application). Only foreground images print.

  • Widths need to be fluid as page sizes vary around the planet. US Letter format is shorter and wider than A4 layout

  • All browsers support printing in different ways. Bugs are legion.

  • Test using print preview.

GlennG
  • 2,982
  • 2
  • 20
  • 25
  • 3
    This answer is three years old but I'm having the same issue. Has print css support gotten any better in the meantime? Specifically, http://stackoverflow.com/questions/18173423/css-print-stylesheet-padding-on-the-second-page/18173467?noredirect=1#18173467 – Heraldmonkey Aug 11 '13 at 15:29
  • 2
    No, the position is still much the same. – Grant_Bailey May 31 '14 at 13:36
  • I know that now some online services like [PDFShift](https://pdfshift.io) correctly handle the print CSS rules. (I work at PDFShift) – Cyril N. Nov 29 '18 at 16:45
1

The accepted answer which is now 4 1/2 years old says:

"The short answer is to avoid HTML/CSS printing if you need to ensure a specific layout."

These days you may do HTML/CSS printing for comparatively simple layouts in browsers or if you use a tool like wkhtmltopdf you can go for more complex layouts. See also http://www.toccon.com/toc2013/public/schedule/detail/26714

z--
  • 2,186
  • 17
  • 33