[OpenLayers-Users] Map size without javascript

Mon Apr 20 02:22:13 EDT 2009

Hi 

I was experiencing this too and I think I solved it by specifying top, left, bottom and right on the html part of the css just like you do on the map.

Cheers Kris

-----Original Message-----
From: users-bounces at openlayers.org [mailto:users-bounces at openlayers.org] On Behalf Of Ian Gibson
Sent: Monday, April 20, 2009 7:50 AM
To: users at openlayers.org
Subject: [OpenLayers-Users] Map size without javascript

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

_______________________________________________
Users mailing list
Users at openlayers.org
http://openlayers.org/mailman/listinfo/users