I'm trying to display a Google map inline with text (so I'm not using Ext.ux.GMapPanel.js)

Unsurprisingly, the only browser I'm having issues with is IE7 (probably IE6 too but I haven't tried that.) Using the HTML and JS below, adapted slightly from examples/window/gmap, I've narrowed the problem down to the doctype switch. If I leave IE in quirks mode the map displays fine. If I persuade it into 'strict' mode, then the map seems to be positioned fixed relative to the window, and not scroll with the window content.

I'd really rather not downgrade all browsers into quirks mode, especially as that gives me plenty of other layout issues in IE7.

So does anyone have any suggestions for some CSS magic to persuade IE7 to properly position the map in the window content pane?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>GMap Window Example</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

    <!-- GC -->
 	<!-- LIBS -->
 	<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
 	<!-- ENDLIBS -->

    <script type="text/javascript" src="../../ext-all.js"></script>

<!-- GMaps API Key that works for www.extjs.com -->
<!--<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAUCG2rlIeVFJ07rCgVUYjhhSVbRpeAZk72H9nRSWIwLg0s1ul-BRlbCt360qbQumadan9ZlGxlCWzqg" type="text/javascript"></script>-->
<!-- GMaps API Key that works for localhost -->
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAJDLv3q8BFBryRorw-851MRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTyuslsNlFqyphYqv1PCUD8WrZA2A" type="text/javascript"></script>

    <script src="extmap.js"></script>

<input type="button" id="show-btn" value="Gimme a Map" />
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * http://extjs.com/license


	var wincontent = '.<div style="margin-top: 10px; margin-left: 10px; height: 500px; width: 660px;" id="event_map_2"></div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.</p>';
	var mapwin;

	var button = Ext.get ('show-btn');
	button.on ('click', function () {
		// create the window on the first click and reuse on subsequent clicks
			mapwin = new Ext.Window({
				id: 'map-win',
				layout: 'fit',
				title: 'Map Window',
				closeAction: 'hide',
				autoScroll: true,
				html: wincontent


		var map = new GMap2 (document.getElementById ("event_map_2"));
		map.setCenter (new GLatLng (54.5, -3), 6);