I have this JS function when user clicks on print button.

<script>
function printDiv()
{
  var printer = window.open('','','width=300,height=300');
    printer.document.open("text/html");
    printer.document.write(document.getElementById('news_contents').innerHTML);

    printer.print();

}
</script>

And I included the CSS as

@media print {

  #news_content { 
     color: #666;
        font-size: 12px;
    font-family: Arial,Helvetica,sans-serif;
  }
}

However when user prints, the CSS did not apply. I checked the HTML header, the CSS script is indeed there. Why is it not working? When user prints from Mac, the image in the content area shrinks and became small. Anyway I can have it exactly the same as the website?

Thanks in advance.

I have this JS function when user clicks on print button.

<script>
function printDiv()
{
  var printer = window.open('','','width=300,height=300');
    printer.document.open("text/html");
    printer.document.write(document.getElementById('news_contents').innerHTML);

    printer.print();

}
</script>

And I included the CSS as

@media print {

  #news_content { 
     color: #666;
        font-size: 12px;
    font-family: Arial,Helvetica,sans-serif;
  }
}

However when user prints, the CSS did not apply. I checked the HTML header, the CSS script is indeed there. Why is it not working? When user prints from Mac, the image in the content area shrinks and became small. Anyway I can have it exactly the same as the website?

Thanks in advance.

• javascript
• css

• hope it helps coding.smashingmagazine./2011/11/24/… – Santiago Rebella Commented Oct 3, 2012 at 15:00
• Hi @SantiagoRebella thanks for the link. Doesn't seem to have any mistake in my coding, not sure why the CSS isn't applied. – Sylph Commented Oct 4, 2012 at 0:14

2 Answers 2

I have the same problem, what I did, was put the:

<style>
   @media print
   { 
     /..../
   }
</style>

Inside the DIV - I believe it's news_contents in your case.
Hope that helps.

I believe you are having a problem because your @media declaration is in the parent window; and you are opening a new window and appending content to it for printing.

Therefore the new document in the new window knows nothing about your @media CSS declaration.