Why are my print styles not being rendered in IE 7 and IE 8?

Question

I have a webpage with 2 stylesheets being included:

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

The print styles work just fine with chrome, safari, firefox, and IE9, but completely breaks in IE7 and IE8. Certain images that should be hidden are not, others that should be visible are not. It looks like a mess, despite the fact that if I load both stylesheets for screen in IE7 and IE8, everything looks exactly as I expect.

I'm unfortunately not able to link to the page, as it's a client site in progress, but I'm grasping at straws here if anyone has any ideas.

Answer 1

Turns out, the problem was that HTML5 elements weren't rendering on print properly, and the HTML5 shiv doesn't support printing by default.

Luckily for me(and you), there's an IE print protection plugin made by Alexander Farkas over here: https://github.com/aFarkas/html5shiv

EDIT:

Looks like Modernizr now has a print shiv option if you're using Modernizr for all your shiv-ing (totally a word) needs: http://modernizr.com/download/

Answer 2

I think you need to denote the print styles as alternate...

<link rel="stylesheet" href="/assets/css/screen.css" type="text/css" media="all" />
<link rel="alternate stylesheet" href="/assets/css/print.css" type="text/css" media="print" />

Actually, I think that is wrong, but I am leaving it.

You may try changing the media attr for the print style to all and then wrapping everything inside the stylesheet in the print media query:

@media print { … }

Answer 3

It's really a shot in the dark without seeing your css and markup, or at least a decent chunk of it!

There are issues with printing elements with position:absolute or fixed as noted in the comments to this msdn article; implying that you should manually reflow them (set position:static or possibly hide the elements completely). A hardcore way to deal with it would be adding

* {position:static !important;}

to your print.css; but its appropriateness would depend on page complexity and how you want it to be printed (i.e. just text, headers and a logo or a properly designed experience).

If you are not yet decided on the print experience you want to produce, consider reading another great article on alistapart focusing just on that!