[OpenLayers-Users] Map size without javascript

Mon Apr 20 04:14:01 EDT 2009

Thank you both for your help. This problem really frustrated me last week but, this morning I stumbled upon the following fix which wraps the map div in another div and seems to do the job...

<!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">

            #map 
            {
                background-color: Red; 
                position: absolute;
	     width: 100%;
                height: 100%;
            }

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

  </head>

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

Med venlig hilsen

Ian Wermer Gibson

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

-----Oprindelig meddelelse-----
Fra: Roald de Wit [mailto:roald.dewit at lisasoft.com] 
Sendt: 20 April 2009 08:53
Til: Kris Geusebroek
Cc: Ian Gibson; users at openlayers.org
Emne: Re: [OpenLayers-Users] Map size without javascript

Hi Ian,

If what Kris suggested doesn't work, you can always include an IE only
CSS file and put something like the code below in there (you'll need to
tweak the numbers):

    #map {
      width: expression(
          (d = document.compatMode == "CSS1Compat" ?
              document.documentElement : document.body) &&
          (eval(d.clientWidth -335))
      );
      height: expression(
          (d = document.compatMode == "CSS1Compat" ?
              document.documentElement : document.body) &&
          (eval(d.clientHeight -155))
      );
    }

Hope this helps.

Regards, Roald

Kris Geusebroek wrote:
> 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
> _______________________________________________
> Users mailing list
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users
>

--
Roald de Wit
Software Engineer
roald.dewit at lisasoft.com

Commercial Support for Open Source GIS Software
http://lisasoft.com/LISAsoft/SupportedProducts/

The contents of this email are confidential and may be subject to legal or professional privilege and copyright. No representation is made that this email is free of viruses or other defects. If you have received this communication in error, you may not copy or distribute any part of it or otherwise disclose its contents to anyone. Please advise the sender of your incorrect receipt of this correspondence.

****************************************************************************
Denne mail er blevet scannet af http://www.comendo.dk og indeholder ikke virus!
****************************************************************************