Problem printing google maps printing and using 'page-break-before' in IE8

Question

Hi,

I'm having an annoying problem trying to get an html page with a google map on it to print correctly, I have a google map with an <h2> above it all wrapped in a div and the div is set to 'page-break-before:always;' in the css so that the map and its heading always sits on a new page.

The problem is that in IE8 only i can always see a large portion of the map rendered on the previous page when printed, also the part of the map that is visible on the previous page is that which is outside the visible bounds of the map.

HTML:

<div id="description">
    <h2>Description</h2>
    <p>Some paragraph of text</p>
    <p>Some paragraph of text</p>
    <p>Some paragraph of text</p>
</div>

<div id="map">
    <h2>Location</h2>
    <div id="mapHolder"></div>
    <script type="text/javascript">
       // ... javascript to create the google map
    </script>
</div>

CSS:

#map { page-break-before:always; }

Here is a screen grab of what it renders like in IE8 http://twitpic.com/1vtwrd

It works fine in every other browser i have tried including IE7 so i'm a bit lost, has anyone any ideas of any tricks to stop this from happening?

Answer 1

Please try this

:-)

Francesco Picchi (fpicchiatdynamicait.com)

Answer 2

I found out if you add an page-break div with a height eg. 10px with empty html content in front of the Map div, then you can solve the problem.

in CSS:

page_break_before { height: 10px; page-break-before:always; }

then in front of the Map div:

var pageBreakDiv = window.document.createElement('div'); pageBreakDiv.id = 'page_break_before'; printingMapDiv.appendChild(pageBreakDiv);

And remove the page-break-before:always; in your #map div.

Cheers,

Jing