CSS is breaking Google Maps V2 in IE and FF – not in Chrome

I’m quite at the end of my wits with my google maps page. I wanted to add the very basic map (as in this example [1]. The test page I set up [3] looks somewhat ok in Chrome – in Firefox and Internet Explorer, however, there’s only parts of it being loaded, with a grey background instead of the map.

What I found so far here on stackoverflow [1] pointed me into the right direction. Apparently, CSS is breaking the map. Looking at what Chrome shows tells me that it’s also guessing how to display it (the controls are shifted).

That’s the code I use (inside a separate template):

<script type="text/javascript">
//<![CDATA[
//var map;
function initialize() {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 3);
        map.setUIToDefault();
}
jQuery(document).ready(function() {
      initialize();
});
//]]>
</script>

The blog is wordpress based, with a fairly customized theme. I’m loading the parent theme’s CSS using an @import at the very beginning of my CSS. Commenting out this import statement fixes this specific problem, but I can’t find the exact CSS line causing it.

I’m using Firebug and tried to deactivate the statements one by one – to no avail.

If someone would point me to the right direction, I’d really appreciate it. Even a hint on where to search would be very helpful. If you like, jump over to http://dev.mit-kids.ch/test/ to have a look.

Thanks in advance!

André

Links (more than 2):

1. http://code.google.com/intl/en/apis/maps/documentation/javascript/v2/examples/map-simple.html
2. How can CSS stop Google Maps loading?
3. http://dev.mit-kids.ch/test/