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.
Eric Puidokas
February 20, 2007 at 5:06 pm
I think there might have been some other issue causing IE not to print correctly for your site. LansingLowdown.com uses a print style sheet and it works just fine in IE6.
Check out http://www.lansinglowdown.com/index.php/article/604 for an example page.
Joe Sak
February 20, 2007 at 5:47 pm
That’s because you use media=”print” in your link tag. The problem with this is it doesn’t allow you to SEE the printable version before printing. While this may not be a big deal for LansingLowdown, it certainly is a big deal for our most recent big client. I think you know who it is
Eric Puidokas
February 21, 2007 at 9:33 am
Ahh that brings to mind on of my favorite web design quotes.
“Donâ??t replicate what the user agent comes with. In a lot of browsers, I can bookmark, print and change the text size with user interface elements (like buttons) and keyboard shortcuts.” http://www.digital-web.com/articles/seven_accessibility_mistakes_part_2/
Of course, we both know that clients won’t always listen.
Joe Sak
February 21, 2007 at 9:40 am
I understand where you’re coming from, but the client wants a “Print this Page” button that also shows the user how it will look first. And to be quite honest, I like it. As a user, I want to know how it will look, too, and checking “Print > Preview” never occurred to me until I started looking for answers to the IE problem in the first place.