Fixing Internet Explorer 8 printing lots of Blank Pages

Today, I encountered an unusual issue with printing a web page in IE8 (Internet Explorer 8) whereby the page prints correctly however it is followed by over 200 blank pages. This issue does not affect any versions of Firefox nor even IE6 (Internet Explorer 6) and IE7 (Internet Explorer 7).

So I set about investigating the issue, and sure enough found that the cause was CSS related.

:!: NOTE: this article is not meant for end users but rather for web developers. So if you are having this issue printing a web page and do not have access to edit that page, I’d suggest you email the website’s administrators and send them this page instead.

The process of debugging was a simple trial and error process of hiding different elements on the page until I found the culprit element.

Turns out it was caused by an element with a large height set within a CSS floated container and it was this element that was expanding the printable pages with blanks. In my case, that container had a large height because it was a JavaScript powered scrollable bar, however JavaScript was not executed in print preview.

I suspect the issue is caused by IE8’s changes with hasLayout.