Problem printing print google maps and using page break before in IE8

Question

I had an unpleasant problem trying to get an html page with a google map on it for proper printing. I have a google map with <h2> above it all wrapped in a div and the div is set to "page-break-before: always;" in css so that the map and its title are always on a new page.

The problem is that only in IE8 I always see most of the map displayed on the previous page when printing, and also the part of the map that is visible on the previous page is the one that is outside the visible borders 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 capture of what it does, as in IE8 http://twitpic.com/1vtwrd

, , IE7, , - - , ?

Answer 1

, div div , . 10px html div , .

CSS:

page_break_before {height: 10px; : ; }

div :

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

page-break-before: always; #map div.

,