Question

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.

Answer 1

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.