Quan M Le Quan M Le - 1 year ago 68
CSS Question

Firefox can not apply CSS when print

Im using firefox 16.0.2. I would like to print a div content with the css rules defined in the imported file. When trying to print in Chrome, it's work fine, but in Firefox, the printed page got no css formatted.

import css here
<div id="printable"></div>

When using javascript to print div id=printable, paper result only have a HTML content without CSS rules, the result on screen is perfect. Is there any way for Firefox print with all css defined, any help will be appreciated.

Addition below is my javascript to print div

function print(id)
var mywindow = window.open('', id, 'height=600,width=800');
var data = document.getElementById(id).innerHTML;
mywindow.document.write('<link rel="stylesheet" href="../../lib/css/report/main.css" type="text/css" />');
mywindow.document.write('</head><body >');


return true;

In main.css I try to use @media print {#printable.....} but it's not works. In Javascript I try to put media="print" to link tag like but it's still nothing effect to print preview.

Answer Source

Why don't you use a print specific media query instead?

@media print {
   #printable {
     /*Print style goes here*/