Ticket #1702 (closed bug: invalid)

Opened 5 years ago

Last modified 5 years ago

map DIV width and height can only be set in the own DIV element

Reported by: diegoalberto.arias Owned by:
Priority: trivial Milestone: 2.7 Release
Component: Map Version: 2.6
Keywords: map DIV, width, height Cc: diegoalberto.arias@…
State:

Description

* plaform, OS: Mozilla/5.0 (X11; U; Linux i686; es-ES; rv:1.9) Gecko/2008052912 Firefox/3.0

* detailed steps:

No map is shown if width and height of map's DIV is not set in the own DIV element. 

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>OL bug</title>

<style type="text/css">
//<![CDATA[
#map {width: 800; height: 600; border: 1px solid #000; position: absolute; top: 25px; left: 25px;}
//]]>
</style>

<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>

<script type="text/javascript">
//<![CDATA[

function init() {

	// a Spanish 'Plan Nacional de Ortofotografía Aérea' WMS server
	var PNOA = {
		url: 'http://www.idee.es/wms/PNOA/PNOA',
		layers: 'pnoa'
	};
	var PNOALayer = new OpenLayers.Layer.WMS('ortofoto', PNOA['url'], {layers: PNOA['layers'], transparent: false, format: 'image/png'}, {isBaseLayer: true});

	var mapOptions = {
		units: 'm',
		projection: 'epsg:23029',
		maxExtent: new OpenLayers.Bounds(584534.625000, 4769742.500000, 641442.096834, 4823618.352881),
		maxResolution: 'auto',
		controls: []
	};
	var map = new OpenLayers.Map('map', mapOptions);


	map.addLayers([PNOALayer]);
	map.addControl(new OpenLayers.Control.LayerSwitcher());
	map.addControl(new OpenLayers.Control.NavToolbar());
	map.addControl(new OpenLayers.Control.PanZoomBar());

	map.zoomToMaxExtent();
}
//]]>
</script>

<body onLoad="javascript: init();">

<div id="map"></div>

</body>

</html>

No map in shown. However, if the width and height of the map's DIV is set in the own DIV element 

<div id="map" style="width: 800px; height: 600px;"></div>

it works fine.

Another way of reproducing this error consists on putting the style information in a separate CSS file and importing it from the HTML file, something like 

<style type="text/css">
//<![CDATA[
@import "style.css"
//]]>
</style>

in the head section.

note: Firebug will not show any error or warning message.

* Link to code: none

* Planned Solution: none

Attachments

bug.html Download (1.4 KB) - added by diegoalberto.arias 5 years ago.
code expected to reproduce bug

Change History

Changed 5 years ago by diegoalberto.arias

code expected to reproduce bug

Changed 5 years ago by diegoalberto.arias

  • priority changed from minor to trivial

Changed 5 years ago by crschmidt

  • status changed from new to closed
  • resolution set to invalid

This is a problem with your CSS. Specifically, you never tell the page how high to be (using a rule like

html, body { height: 100% }

). So the browser assumes your div has 0 height.

Adding that rule causes your map to work.

Changed 5 years ago by ahocevar

The reason for the map not appearing is a different one, but the ticket is still invalid:

  • In CSS, you cannot use // for comments.
  • You have to specify units for width and height.

Change your style block to look like that: 

 <style type="text/css">
 /*<![CDATA[*/
 #map {width: 800px; height: 600px; border: 1px solid #000; position: absolute;
 top: 25px; left: 25px;}
 /*]]>*/
 </style>

Changed 5 years ago by diegoalberto.arias

Sorry and ashamed! Very stupid from me forgetting give units in the CSS in the head section!

Changed 5 years ago by euzuro

Hey! no reason to be ashamed. Everyone makes mistakes. Even if sometimes what we think is a bug turns out to be our own error... we still appreciate the effort to have taken the time to properly file the bug in TRAC with example and everything. If we got 10 bogus bug reports for one good one, it would still be worth it... so thanks for doing this!

Note: See TracTickets for help on using tickets.