Internet Explorer 8 won't modify HTML5 tags in print stylesheet

Question

I was working on a print stylesheet earlier and came across a problem with IE8. I am using HTML5 and several layout tags including header, nav and footer.

For some reason in my print stylesheet the display:none; declaration on these tags is being ignored in IE8 (and I can only assume subsequent lower versions). I first thought that Developer Tools in IE9 could be causing a false representation, however I have a Windows XP installation in VirtualBox which shows the problem also.

My guess its because HTML5 tags aren't seen properly by anything below IE9. The print stylesheet hides the layout tags in Firefox and Chrome.

Is there anyway to get around this?

Edit:

Here is what I have at the moment:

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/print.css" type="text/css" media="print" />

Ignore the PHP Statements, they are specific to my CMS which is WordPress.

Then I simply hide the layout tags in the print.css:

nav,footer { 
display:none;
}

This works for IE9, Firefox, Chrome but not in anything lower than IE9. It seems to ignore HTML5 tags.

Answer 1

I suggest you try html5shiv. The main shiv does document.createElement() as you have but it's been optimized / minified like crazy. More importantly, it includes printshiv (IE Print Protector) which will let you style HTML5 elements for print.

Answer 2

Use Modernizr. In the Extra, make sure html5shiv /w printshiv is selected. Include this javascript library on your site and it should work like a charm.

Answer 3

Since all i can do is guess without actually seeing the code, my first guess would be that the html5 shiv that is being used after the css declarations, and the css simply skips the html 5 tags, without applying the css styles to them. Try setting the script at the very top, before any css link tags in the head.

Answer 4

You could try a workaraound using Javascript by including a pair of functions onbeforeprint and onafterprint in which you hide/show the content that should be display:none.

Answer 5

I highly recomend for the use of boilerplate for your trouble. Is a nice compilation for web standarts and some know and common issues in almost every browser. It use modernizr and have an awesome stylesheet that have a @media print that you can use for all your printing troubles in all browsers.