Every now and then a client will have some very specific requirements when it comes to the print view of their website.  For those clients we will create a custom print only stylesheet that is referenced when the page is printed.  I will not go into detail here about what you should include in your print stylesheet but if you are interested in learning some best practices I would highly recommend  Eric Meyer's article on A List Apart titled Going to Print. 

What I do want to talk about is the fact that this week I came across a strange bug with SharePoint Moss 2007 and how it referenced my print stylesheet.  Specifically it was affecting the Rich Text Editor dialog that opens when the user edits a Content Editor Web Part.  For some reason, the print stylesheet was overiding the default stylesheet but only within the Rich Text Editor dialog box. Once you clicked OK and the content appeared within the site, the styling was fine. 

I admit I was stumped for a while and could not find anything online that talked about this specific issue.  Everything looked OK from my end, the media for the stylesheet was set to print and by all accounts it should not be referenced at all but of course there it was every time I opened up the Rich Text Editor.  After hours of searching for a solution, I decided to open up my print stylesheet and wrapped all of my print styles within the @media rule. I figured it was worth a shot and 'lo and behold it worked!  The print styles now behave as expected and they no longer affect the Content Editor Web Part's Rich Text Editor dialog box.  Instead my beautifully crafted print styles only appear when the page is printed. At that moment I did a little chair dance and decided I had to share this little fix with other developers out there. 

So, to help someone else that may come across this issue, below is how I implemented my print stylesheet in a SharePoint Moss 2007 project. The important elements are in red.

  • In my MasterPage I have added the following link after my main CSS has already been referenced.  Please note that the media must be set to print for it to work properly:

<!-- Print Stylesheet -->
  <link rel="stylesheet" type="text/css" href="/Style%20Library/project/css/print.css" media="print" />

  • In my print.css file I have surrounded all of my styles within the @media print rule:

@media print {
       /*  ----- Add Your Print Styles Here  ---- */
       BODY, form {text-align: left;}
}

If you found this helpful, please let me know!  I would love to hear from you.

Cheers from your helpful Interaction Designer