How to get cross browser compatibility in Print on page from all browsers?

Question

How do you get cross browser compatibility in Print? any tips for print css file to make print on paper identical from all browser.

Edit

I'm already using Eric meyer CSS but still facing inconsistencies in different browser when we take print from site.

Is there any CSS declarations which we can use always and put at a top in print css , Like other css resets which work good in media=screen?

I'm already using a different css for print (print.css) with media="print"

---

Would it be better to keep * {posotion:static} , *{float:none} , * {clear:both} in print css always?

Answer 1

In html there use a link with the attribute "media" set to "print".

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

You can disable all other css and just use your "print" css. set the media first to "screen". Test it just like your testing a normal css in all browsers.

In my experience, what it looks in the screen, will pretty much look when it's printed.

Advice:

1) keep your layout as fluid as possible for it to be flexible to what ever the paper margin it was set to.

2) keep it simple.

3) In IE, backgrounds might be missing. To fix this, go to: Tools>Internet Options>Advanced. on the Settings box, scroll down to Printing and enable "Print background colors and images"

Answer 2

Identical results are impossible. The output depends not only on CSS but also on individual settings for page margins, the printer’s capabilities, available fonts, paper format (A4 vs US Letter) and probably a lot more.

For CSS

• Avoid floats and positioning (relative, absolute and fixed). Especially Mozilla (Firefox) can not handle those properties very well.
• Use page-break-* but don’t rely on it. Some browsers insert page breaks even in images.
• You don’t know the page width and height (could A5). Keep anything as flexible as possible.
• For performance, put your print style into the main stylesheet in a @media print {} rule.
• Use pt not px for borders and margins. A printer doesn’t know what a pixel is and may come to strange results.
• Develop your print layout in Opera, which has the best support for @media print currently, and insert compatibility hacks, when you’re done.
• Internet Explorer may crash on print, if you use its reserved IDs.
• Never rely on print preview. You get very different results on real printouts. Save the rain forest with a print-to-pdf-driver. :)

Answer 3

If you are using Eric Meyer's CSS, you may be interested in his article on the subject. It includes several best practices and work-arounds for common problems when using CSS to style a page for print.

http://www.alistapart.com/articles/goingtoprint/