CODEWITHSUNDEEP
htmlcss
Below the Radar
Below the Radar

Reputation: 7635

Style tag cause error in head

I'm trying to understand what is the problem with the way I build the <head> when I put <style> tag in it, I got an error in </head> and <body onload="initialize()">, these tags are written in red in page source. However, the function initialize() is called correctly and CSS styles are applied, but two empty lines are rendered in top of the page. The errors and the lines disappear when <style> tag is removed.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title> - EzMapping</title>
<link rel="stylesheet" type="text/css" href="/static/main/css/base.css" />
<link rel="stylesheet" type="text/css" href="/static/main/css/forms.css" />

<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="/static/GeoExt/lib/GeoExt.js"></script>
<script type="text/javascript" src="/static/OpenLayers-2.13.1/lib/OpenLayers.js"></script>
<link rel="stylesheet" type="text/css" href="/static/OpenLayers-2.13.1/theme/default/style.css" />
<script type="text/javascript" src="/static/main/js/jsi18n.js"></script>
<script type="text/javascript" src="/static/main/js/jquery.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="/static/main/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/main/js/radioSelect.js"></script>
<script type="text/javascript" src="/static/main/js/layersOrder.js"></script>
<script type="text/javascript" src="/static/main/js/collapse.js"></script>
<style type="text/css">
  .styleIcon_1 { 
     border: 1px solid #ffffff;
  }
</style>

<script type="text/javascript">

var map;

function initialize(){
    Ext.onReady(function() {
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
        map = new OpenLayers.Map('mappanel',
          { projection: new OpenLayers.Projection("EPSG:900913"),
            units: 'm',
            maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
            maxResolution: 156543.0399,
            numZoomLevels: 21});
        var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";
        var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
        var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection

        map.addControl(new OpenLayers.Control.LayerSwitcher());

        var osm = new OpenLayers.Layer.OSM("OSM"
        );
        var road = new OpenLayers.Layer.Bing({
            name: "Road",
            key: apiKey,
            type: "Road",
        });
        var hybrid = new OpenLayers.Layer.Bing({
            name: "Hybrid",
            key: apiKey,
            type: "AerialWithLabels",
        });

        var aerial = new OpenLayers.Layer.Bing({
            name: "Aerial",
            key: apiKey,
            type: "Aerial"
        });

        var tiledLayer = new OpenLayers.Layer.XYZ('TMS',
                    "http://127.0.0.1:8000/ezmapping/tms/1.0/map/1/${z}/${x}/${y}.png", {isBaseLayer: false}
              );
        map.addLayers([tiledLayer, osm, road, hybrid, aerial]);
        map.setCenter(new OpenLayers.LonLat(-70.0, 55.0),4)

        new Ext.Window({
            title: "Map: test",
            x: 500,
            y: 85,
            //stateId: "ezMap1",
            height: 400,
            width: 400,
            layout: "fit",
            collapsible: true,
            closable: false,
            bodyBorder: false,
            shadowOffset: 6,
            items: [{
                xtype: "gx_mappanel",
                map: map,
                center: new OpenLayers.LonLat(-70.0, 55.0).transform(fromProjection , toProjection),
                zoom: 4
            }]
        }).show();

        mapPanel = Ext.getCmp("mappanel");
    });
}

</script>
</head>
<body onload="initialize()">
  <ul id="nav">
      <li><a class="" href="/">Home</a></li>
      <li><a class="" href="/ezmapping/manage/">Manage</a>
          <ul>
            <li><a class="" href="/ezmapping/manage/profile/">Profile</a></li>
            <li><a class="" href="/ezmapping/manage/options/">Options</a></li>
            <li><a class="" href="/ezmapping/manage/account/">Account</a></li>
          </ul>
      </li>
      <li><a class="active" href="/ezmapping/map/">Maps</a></li>
      <li><a class="" href="/ezmapping/layer/">Layers</a></li>
      <li><a class="" href="/ezmapping/manage/upload/shapefile/">Upload</a></li>
      <a class="logged-in" href="/accounts/logout/">Logout</a>
  </ul>
<div style="margin-left:10px">

<form method="post" action="" encrypt="multipart/form-data"><input type='hidden' name='csrfmiddlewaretoken' value='rc37O0qQtZvzgaDTGElOIQzaKOLwrwXS' />
<table>
  <tr><td>

        <p><h4>Map name: test</h4>

        <fieldset class="module collapse ">
          <h2>Map Options</h2>

        <ul>
          <fieldset class="module">

          <h2>Map window:</h2>


          <ul>


              <li class="required">

                <label for="id_zoom_level">Default zoom level</label>
                <input id="id_zoom_level" name="zoom_level" type="text" value="4" />
              </li>



              <li class="required">

                <label for="id_center_lat">Latitude of map center point</label>
                <input id="id_center_lat" name="center_lat" type="text" value="55.0" />
              </li>



              <li class="required">

                <label for="id_center_long">Longitude of map center point</label>
                <input id="id_center_long" name="center_long" type="text" value="-70.0" />
              </li>



              <li class="required">

                <label for="id_map_width">Map width (in px)</label>
                <input id="id_map_width" name="map_width" type="text" value="400" />
              </li>



              <li class="required">

                <label for="id_map_height">Map height (in px)</label>
                <input id="id_map_height" name="map_height" type="text" value="400" />
              </li>


        </ul>
          </fieldset>
        </ul>

        <ul>
          <fieldset class="module collapse">

          <h2>Other Options:</h2>


          <ul>


              <li class="optional">

                <label for="id_useLayerBounds">Overide map zoom with layer extent</label>
                <input id="id_useLayerBounds" name="useLayerBounds" type="checkbox" />
              </li>


        </ul>
          </fieldset>
        </ul>

      </fieldset>
  </td></tr>
  <tr><td>
      <fieldset class="module collapse">
          <h2>Layers Options</h2>
              <table id="sortable">
                  <thead>
                      <tr>
                          <td></td>
                          <td><img src="/static/main/img/view.png"></td>
                          <td></td>
                          <td><img src="/static/main/img/trash.png"></td>
                          <td>S</td>
                      </tr>
                  </thead>
                  <tbody>
                      <input id="id_form-TOTAL_FORMS" name="form-TOTAL_FORMS" type="hidden" value="1" /><input id="id_form-INITIAL_FORMS" name="form-INITIAL_FORMS" type="hidden" value="1" /><input id="id_form-MAX_NUM_FORMS" name="form-MAX_NUM_FORMS" type="hidden" value="1000" />

                       <tr>

                          <td><a href="/ezmapping/layer/edit/1">lignes_test.shp, LineString</a></td>

                          <td><input checked="checked" id="id_form-0-visible" name="form-0-visible" type="checkbox" /></td>

                          <td><input id="id_form-0-id" name="form-0-id" type="hidden" value="1" /></td>

                          <td><input id="id_form-0-DELETE" name="form-0-DELETE" type="checkbox" /></td>

                          <td><a class="styleIcon_1" href="/ezmapping/map/test/LayerStyle/1">&nbsp;S&nbsp;</a></td>
                          <input class="layer_pk" type="hidden" id="layer_pk_" name="layer_pk_"  value="1" />
                      </tr>

                  </tbody>
                  <tr><td><a href="/ezmapping/map/test/addLayers">Add layers to map</a></td></tr>
              </table>
      </fieldset>
   </td></tr>
</table>

     <input type="hidden" id="layersOrder" name="layersOrder"  value="" />
     <br><input type="submit" value="Submit">
</form>

<a href="#" id='fix_map'>Fix map center</a>
<a href="/ezmapping/publish/11/">Publish map link</a>


</div>
<div id="messageBoard">
        <table frame=box border=1>
            <tbody>
            <tbody>
        </table>
</div>
</body>
</html>

Upvotes: 2

Views: 1898

Answers (1)

caspian
caspian

Reputation: 1804

See answer here: Why is &#65279; appearing in my HTML?

I am guessing that you have bad characters in your html. Try copy/paste your source from above into a text editor and see if the errors are gone?

I don't see this error or any extra spaces in FF, Chrome or IE.

Upvotes: 2

Related Questions