[OpenLayers-Users] OpenLayers map won't display on IE8

Fri Jul 13 00:55:19 PDT 2012

Hello All,

I don't know if this is an OpenLayers issue or an IE8 issue. I have a multi
panel layout. All divs except the map are nested header or footer and grow in
the appropriate direction as the window size is changed. The map is in the
center of the page and is meant to grow or shrink in both directions to take up
the remaining size. I have completely stripped the html down to a one file page
that shows the problem which is that the page displays just fine in Firefox or
IE9, but breaks in IE8 and unfortunately I am stuck making it work in IE8. the
problem is that the map doesn't appear, and I am at a loss to figure out why.

I know IE is buggy with layouts and absolute positioning in general but I have
been beating my head against a wall trying to figure out a css workaround. If 
anyone could suggest a workaround I would be truly grateful, because giving up
is not an option.

thanks,
Danny

enclosed below is the complete page. Sorry for not including as an attachment or
formatting, but I'm stuck with gmane.org at the moment which doesn't seem to
support this. Simply saving in a file and opening in a browser should work.

--------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>    
        <title> layout example</title>       
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <style type="text/css">
    body, html {
        padding: 0;
        margin: 0 auto;
        font: normal 16px/18px 'Helvetica', Arial, sans-serif;
        background-color: aqua;
        min-height:100%;
        /*overflow:fixed;*/
        }

    #container{
        height:100%;
        width:100%;
        overflow:auto;
        }

    /* positioning rules */
    #header{
        position: absolute;
        top:0px;
        height : 60px;
        width:100%;
        border-bottom: 1px solid black;
        background-color: gray;
        }

    #footer{
        position: absolute;
        bottom:0px;
        height:40px;
        width:100%;
        border-top: 1px solid black;
        background-color: gray;
        }

    #content{
        position:absolute;
        top:61px;
        bottom:41px;
        width:100%;
        background-color:DeepPink;
        }

    #content-left{
        position:absolute;
        left:0px;
        width:60px;
        height:100%;
        background-color:green;
        border-right:1px solid black;
        }
    #content-top{
        position: absolute;
        top:0px;
        height:60px;
        left:61px;
        right:0px;
        border-bottom: 1px solid black;
        background-color: yellow;
        }

    #content-bottom{
        position: absolute;
        bottom:0px;
        height:40px;
        left:61px;
        right:0px;
        border-top: 1px solid black;
        background-color: yellow;
        }

    #map{
        position: absolute;
        top:61px;
        bottom:41px;
        left:61px;
        right:0px;
        background-color: olive;ntent
        }

    </style>   
    <script type="text/javascript" src="layout_files/OpenLayers.js"></script>
    <script type="text/javascript">
        var map;
        function init(){
            map = new OpenLayers.Map('map');
            var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'} );
            map.addLayer(ol_wms);
            map.zoomToMaxExtent();
        }
    </script>
    <link href="layout_files/style.css" type="text/css" rel="stylesheet"></head>
    <body onload="init()">
        <div id="container">      
            <div id="header"></div>
            <div id="content">
                <div id="content-left"></div>
                <div id="content-top"></div>
                <div id="content-bottom"></div>
                <div id="map"></div>
            </div>
            <div id="footer"></div>
        </div>
    </body>
</html>