Printing HTML pages differes from browser to browser

Question

I am trying to take printout an HTML (has 1 page) Firefox 3.1 is taking 2 pages and Firefox 3.5 is taking 1 page. Donno what IE does. Is there any way to globalize the printing thing (thru css or any method) so that it will print exact page that it shows.

Answer 1

Yes, you should use CSS. Not always an easy task though. You could start here.

Answer 2

If you want precise printing, I'd suggest you output PDFs instead. As for html, you want to use a separate css file for printing, but still, just have to test each individual browser you want to support.

Answer 3

Well, there is the print media type and its page property, but that has extremely poor support in all major browsers. I think you'll be stuck with inconsistent print rendering for some time. You could read ALA's Going to Print for tips, though.

Answer 4

You want to specify a unique style sheet for printing

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

vs.

<link rel="stylesheet" type="text/css" href="default.css" media="screen" />

Then in your print css use a standard font, basic colors and hide any adds, etc.

/* basic white on bl;ack 12pt font */
body {
  font-family : "Times New Roman", Times, serif;
  font-size : 12pt;
  color : #000000;
  background : #ffffff;
}
/* Underline Links */
a {
  text-decoration : underline;
  color : #0000ff;
}
/* hide web-only content */
#navDiv, #adDiv, #etc {
  display : none;
}