So you’ve decided to use javascript to swap out a print style css sheet that basically hides a bunch of divs and maybe widens the content area. Perhaps your re-color the links and the text and fix the font sizes.
You try it in Firefox and it prints perfectly, but when you print in IE, you’ll notice IE didn’t really print your printable version.
So you think, ‘Ok I’ll add media=”print” to my stylesheet link!’ and then you refresh your page, try your Print this Page link, and nothing happens! And it still prints the wrong version! What to do?
Well, your old pal Joe here figured it out.
Here’s what you do:
- Create a separate stylesheet called print.css
- Add this code to your master stylesheet:
@media print {@import "print.css";
}
- Implement your javascript for making the stylesheet override your master stylesheet
- Test
- Enjoy!
This allows you to switch to your print style so it is preview-able before printing and also tells IE to use print.css when it prints a page on your site. So incidentally, if a user just clicks print in IE without switching to your style, they will still get your printable version. I suppose this might cause confusion but considering the most reasons for making hard copies of digital information, it probably shouldn’t pose too much of a problem for your average user.
Now if your user wants to have a pretty print out of your website because they can’t access a computer to show it to someone else away from home, they’ll probably get stuck with the fact that IE does not print background images and colors by default any way.
