Geek Answers Handbook

Print / View Ignoring My Print.css

I have a problem that causes me headaches. I am trying to print a report and format it correctly using print.css, but it completely ignores my css every time. Has anyone had this problem before? I made sure the CSS file is in the correct directory, etc., but still no luck.

Here is my template:

Note. I use javascript to control the print button, and inside javascript there is a link to CSS. I also tried to put it only on an HTML page, but that didn't help.

... <script type="text/javascript"> function printContent(id){ str=document.getElementById(id).innerHTML newwin=window.open('','printwin','left=100,top=100,'+ 'width=900,height=400, scrollbars=1') newwin.document.write('<HTML>\n<HEAD>\n') newwin.document.write('<TITLE>Print Page</TITLE>\n') newwin.document.write('<link rel="stylesheet" type="text/css" '+ 'href="/media/css/print.css" media="print"/>\n') newwin.document.write('<script>\n') ...

Now for this project I am using Ubuntu 10.10 and Firefox 7. If that helps at all.

Edit

I installed the web developer toolbar for Firefox. This allows you to view the page as different media. Now when I press print, it shows all my style changes, but when I print, it does not follow them.

+4
source share
2 answers
 <html> <head> <title>your website title</title> <link rel="stylesheet" media="screen" href="/media/css/mainStyle.css" type="text/css"> <link rel="stylesheet" media="print" href="/media/css/print.css" type="text/css"> </head> <body> <input type="button" value="Print" onClick="javascript:window.print();" /> </body> </html>

You might want to give the above HTML template and see if this works for you or suits your needs.

In my opinion, the proposed function is actually better to write on the server side, and not on the client side using javascript, since you are trying to dynamically generate an html page there. You can print this page as print.html or something else, and as soon as it is sent to the client, you then apply the print.css style and print. In any case, there are several ideas here, I hope this helps you in your case. Greetings.

+3
source

Not sure if this helps, but @media print {} should encapsulate all styles during the print job.

 <style type="text/css"> @media print{ /* Make the HR tag have 50 px spacing above and below */ hr{ padding: 50px 0px; } } </style>

It is SUPPORTED to manage this type of styles. the script may still be responsible for including the css file, but @media print {} will tell all the styles built into it as applied only to print jobs. A.

+2
source

More articles:


All Articles