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 pletely 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.
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 pletely 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.
Share Improve this question edited Sep 30, 2011 at 15:59 cwallenpoole 82.1k26 gold badges132 silver badges174 bronze badges asked Sep 30, 2011 at 15:38 TheLifeOfSteveTheLifeOfSteve 3,2786 gold badges41 silver badges53 bronze badges 6- What's in the CSS? In other words, what exactly is making you think that your styles are being ignored? I ask because browser support for print stylesheets is really terrible, and there's lots of stuff that's supposed to work that simply does not. – Pointy Commented Sep 30, 2011 at 15:43
-
2
have you tried omitting
media="print"? Since the window is specifically for the purpose of printing, I don't see a need to make the spreadsheet attached to a specific media type. – Surreal Dreams Commented Sep 30, 2011 at 15:45 - @Pointy the stylesheet has different font sizes for headers, hr style elements etc. Check my above edit – TheLifeOfSteve Commented Sep 30, 2011 at 15:48
- @SurrealDreams I have also tried omitting media="print" but no such luck – TheLifeOfSteve Commented Sep 30, 2011 at 15:58
- 1 why are you putting in the css dynamically? i think that will cause you problems since javascript won't be executed when printing. – Daniel A. White Commented Sep 30, 2011 at 16:27
2 Answers
Reset to default 3<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.
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.