Print/Preview Ignoring my Print.css
Question
I have an issue thats causing me some headaches. I'm trying to print a report and format it correctly with a print.css but it completely ignores my css everytime. Has anyone had this issue 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 the javascript is where I have included the CSS link. I have also tried putting it just on the 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. It allows you to view the page as different medias. Now when I click print, it shows all my style changes, but when I print, it doesn't follow them.
2 answers
solution1
3 ACCPTED 2011-10-01 03:44:41
<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>
Maybe you might wanna give above HTML template a go, and see if that works for you or suits your needs.
In my opinion, your proposed function is actually better to be written on the server side rather than the client side with javascript, as you are trying to dynamically generate html page in there. You can output that page as print.html or something, and once it gets sent to the client, you then apply the print.css style and do the printing. Anyway, just a few ideas here, hopefully it helps a bit in your case. Cheers.
solution2
2 2011-10-01 03:50:18
Not sure if this helps, but the @media print{} is supposed to encapsulate all styles during a print job.
<style type="text/css">
@media print{
/* Make the HR tag have 50 px spacing above and below */
hr{ padding: 50px 0px; }
}
</style>
This is SUPPOSED to handle this type of styling. The script could still be responsible for including the css file, but the @media print{} would tell all styles embedded in it to apply only to print jobs.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.