Thread: Print.css

I would like to put a print page link on my product page. I wrote a print.css file that i would like to include in the template.master. But when I view source i don't see the print.css tag included in the html! I know it is in the file - is there some code that overwrites all css <link> tags??

This is my code that i put directly above the </head>:

<link rel="stylesheet" type="text/css" href="/print.css" media="print" />

Hi Mimpoz

If you are using v9, you'll probably find that any CSS files you include manually in the template.master are being overwritten by the current App_Themes/Skin_x CSS entries.

I'm sure this isn't the only solution, but what we did to get around this on the birdguides.com/estore site was to include the print media CSS in the standard stylesheet.

Instead of having an independent print.css stylesheet, edit your main style.css file and add your print styles as follows:

Code:

/* Print styles */
@media print {
   /* Put your print media styles here... */
}

This will take care of the CSS for you.

Optionally, you could also add some Javascript to allow any URL that has '&print=1' appended to be printed in the correct style by adding this to your template.master:

Code:

<script type="text/javascript">
var urlvars = {};
	var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
	urlvars[key] = value;
	});
	if (urlvars['print']==1) {
		window.print();
	}
</script>

Adam
Webopius.com

wow! Thanks! That worked.

Can i try you out with something a little trickier?
In this same print style i would like the three tabs to actually appear 'broken out' and not hidden behind each other: http://www.4mdmedical.com/p-65573-ab...ted-spoon.aspx

any ideas?

This code worked great in Mozilla and Google Chrome - but did not work in IE8 - any idea of a workaround?
You've been such a big help with this - can you tell me how to finish this job?

Thanks.

Hi

Sorry for the delay in responding... I didn't have notifications set on the post.

That's strange, the @media rule should be supported by IE8 (and other IE versions), see here: http://msdn.microsoft.com/en-us/libr...24(VS.85).aspx
It could of course be an IE8 issue.

For your tabs, you've got to get your #tab1, #tab2 and #tab3 ids all set to display:block when printing (possibly with some additional styling). You might be able to do this in the CSS alone, or you may need to modify the tab javascript to do this for you when printing the page.

Adam