[OpenLayers-Users] Map size without javascript

Mon Apr 20 01:49:39 EDT 2009

Hi

I have a problem getting a pretty simple layout to function (solve this and it should go straight on to the examples section of openlayers.org!). Creating a map on a page with a 76px high header, such that the map div takes up the rest of the available height.

The following works in firefox, but not in IE7 (IE7 shows the map div with the correct size, but a red background and no map). Basically, I can solve the problem with javascript, but it is a strong wish of my client that the map size should be defined in CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>minOpenLayers.aspx</title>
    <script type="text/javascript" src="script/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, layer;
        function init(){
            map = new OpenLayers.Map( 'map' );
            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                    "http://labs.metacarta.com/wms/vmap0",
                    {layers: 'basic'} );
            map.addLayer(layer);
            map.zoomToMaxExtent();
        }
    </script>
    <style type="text/css">
             html, body 
            {
                height:100%;
                width:100%;
            }

            body {
                margin: 0;
            }

            #map 
            {
                position:absolute;
                top:76px; 
                bottom:0px;
                left:0px;
                right:0px; 
                background-color: Red; 
            }
	</style> 

  </head>

  <body onload="init()">
    <div id="map" class="smallmap"></div>
  </body>
</html>

Med venlig hilsen

Ian Wermer Gibson
IT konsulent 

JO Informatik ApS 
Trækbanen 16 A 1.sal
3000 Helsingør
(+45) 49 20 20 67

Dir. tlf: (+45) 48 40 40 16 * ian at jo-informatik.dk