OpenLayers not working with Doctype declaration

Question

I have the follwoing code generated from netbean and some modification from this link. The code works well after removing while it doesn't with it. What might be the issue? <!DOCTYPE html>

<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
**<!DOCTYPE html>**
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>OpenLayers Example</title>
        <script src="http://openlayers.org/api/OpenLayers.js"></script>
    </h:head>
    <body>
        <div style="width:100%; height:100%" id="map"></div>
        <script defer="defer" type="text/javascript">
            var map = new OpenLayers.Map('map');
            var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
            "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
            var dm_wms = new OpenLayers.Layer.WMS(
            "Canadian Data",
            "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
            {
                layers: "bathymetry,land_fn,park,drain_fn,drainage," +
                    "prov_bound,fedlimit,rail,road,popplace",
                transparent: "true",
                format: "image/png"
            },
            {isBaseLayer: false}
        );
            map.addLayers([wms, dm_wms]);
            map.zoomToMaxExtent();
        </script>

    </body>
</html>

Phil Filippak · Accepted Answer · 2017-01-19T13:30:00.857

2

Maybe it's too late to answer this question, but it can help somebody else, so I'll try.

The cause of this behavior remains unknown to me, but I found the solution: you must assign a "position: fixed;" property to div#map. I haven't tested it with XML, but in HTML document it works properly.

edited Jan 19 '17 at 13:30

answered Dec 08 '12 at 08:54

Phil Filippak

553
1
9
21

score 0 · Answer 2 · answered May 02 '12 at 04:57

Either the API you are using, or the way you are using it, relies on Quirks Mode in browsers (that is, a mode where the browsers intentionally deviate from standards and specifications, to simulate old buggy browsers).

By the way, independently of mode, Firefox reports the following error:

document.getElementsByTagName("head")[0] is undefined
Source: http://openlayers.org/api/OpenLayers.js
Line: 424

Besides, the page appears as empty in both modes. Is this what you are referring to as “doesn’t work”?

yes ! I am using this wish JSF with reference to http://stackoverflow.com/questions/10395939/running-open-layer-with-jsf-and-xhtml-file — kinkajou, May 02 '12 at 05:31

OpenLayers not working with Doctype declaration

2 Answers2