Print stylesheet hell - looking for suggestions for outstanding problems

Question

I've been working on getting one of our web maps to print out in a halfway decent way for literally days now. I posted this question eight days ago, but have since worked around the issue outlined there. Now I'm dealing with several other issues that I just can't seem to figure out.

First of all, here is a link to the page I'm trying to print: http://maps.nps.gov/maps/rich/footstepsofhistory .

I've tried so many different combinations of things to try and deal with browser differences and deficiencies over the last couple of days that I'm sure the solution I've come up with is far from perfect. That said, the currently-deployed solution produces the best results I've been able to produce up to this point.

The most frustrating part about this is I am not looking for anything complicated. I just want my print stylesheet to (I've marked through the items that are taken care of):

1. Hide all the unnecessary elements.
2. Resize the map to fill an entire page, minus the 70px tall header at the top. It should resize no matter how large the print size is.
3. Show an absolutely-positioned div that displays the attributes of the currently-selected point centered horizontally on the page and 15px up from the bottom.

Here are the issues that remain:

1. I am hard-coding the height of the map div to 760px . I would much prefer to just use height:100%; I am doing this because it seems to be the only way to stop the map from overflowing to a second page in certain browsers.
2. The map "honors" the 760px hard-coded height when it is printed before a point is clicked on. After a point is clicked on, however, the map prints out at ~50% of the page's height in some browsers. This one I just can't explain.
3. The biggest issue is with Internet Explorer 8. The map always runs off onto a second page when printing. I've tried everything I can think of to resolve this issue, but haven't found any solutions.

Browsers tested:

• Safari on Mac OS X: Everything works perfectly.
• Chrome on Mac OS X/Windows, Firefox on Mac OS X/Windows, Internet Explorer 7: Printing without clicking on a point first prints the page correctly - other than the map doesn't take up exactly the full height of the page because of the hard-coded div height. Printing after clicking on a point resizes the map in the printout to ~50% of the height of the print area.
• Internet Explorer 8: Printing both before and after clicking a point on the map causes the map to run off of the first page onto a second page.
• Internet Explorer 9: Printing both before and after clicking a point on the map resizes the map in the printout to ~50% of the height of the print area.

I've thought about forcing Internet Explorer into IE7 mode as a workaround, but it seems like all the problems I'm seeing should be fixable, and I get a bad taste in my mouth when using the X-UA-Compatibile tag. This would also only solve one of the two remaining problems. Surely there is a better way????!?

And lastly, I know I can create a PDF of the page, but I really want to avoid that if possible.

Thanks for any help you can give, and I can post more information here, if needed.

Answer 1

After a few more days of pulling my hair out, I was able to get the printing working properly without having to hack around problems too much.

Basically I started by changing my mindset and approach. Whereas before I was trying to come up with a solution that worked for all of the browsers, I decided to start focusing on each individual browser one at a time. I started by creating an Internet Explorer-specific print stylesheet and only loading it if a user loaded the site with IE:

<!--[if IE]>
    <link rel="stylesheet" type="text/css" media="print" href="/css/rich/footstepsofhistoryprint-ie.css" />
<![endif]-->
<!--[if !IE]><!-->
    <link rel="stylesheet" type="text/css" media="print" href="/css/rich/footstepsofhistoryprint.css" />
<!--<![endif]-->

Then I started working on getting printing to work properly for Internet Explorer. After a bunch of tweaks, I just happened to add the following to the IE print stylesheet:

html,body {margin:0 !important;padding:0 !important;}

This solved problems for IE 7, 8, and 9. I'm not sure why I had to set these styles again in my print stylesheet, as they were already set in another stylesheet that should have been applied while printing:

<link rel="stylesheet" type="text/css" media="all" href="/css/rich/footstepsofhistory.css" />

but they obviously weren't getting applied properly for some reason.

From there it was a breeze. I just had to make some minor modifications to the non-IE print stylesheet to get things working in Chrome, Firefox, and Safari, and then I was good to go.

A quick outline of lessons learned:

• Keep print stylesheets as simple as possible.
• If you are having weird layout problems, preserve your sanity by just creating an Internet Explorer-specific stylesheet. Heck, if you have to, create print stylesheets for each version of Internet Explorer. I am convinced that in some scenarios this is the only way to get printing to work properly in all browsers.
• Chrome has, by far, the best "live" CSS editing capability out there. If you are looking for a tool that allows you to dynamically preview CSS changes as you make them, go with Chrome.