Style tag cause error in head

Question

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>

Looks fine to me. You don't need to close `meta` tags with `/>` though, `>` will suffice. Does your editor go into detail about what the error might be? What extension does your file have? — James Donnelly, Aug 23 '13 at 13:32
Do you have a link to this page where we can see the errors? — Niklas, Aug 23 '13 at 13:33
I don't have this problem with an identical copy of the HTML. Are you sure it's not something `initialize` is doing? — Explosion Pills, Aug 23 '13 at 13:36
@Niklas the page is not on the web right now but I could put the entire html file if it could helps — Below the Radar, Aug 23 '13 at 13:37
@Caspian Its in Firefox, Chrome do not show errors but the two empty linefeeds are there on the top also. They disapear when style tag is removed — Below the Radar, Aug 23 '13 at 13:42
Two more questions. 1) What's creating these two lines *(use firebug and hover the elements)* 2) Are you sure these two lines aren't css styling rather than elements? — Niklas, Aug 23 '13 at 13:52
@Niklas in Firebug I see something is putting juste before the — Below the Radar, Aug 23 '13 at 13:59
If you're seeing those characters in your browser then they are there in your html code... Your html editor probably doesn't display them because they're not actually printable characters. — caspian, Aug 23 '13 at 14:16

score 2 · Accepted Answer · edited May 23 '17 at 10:25

2

See answer here: Why is  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.

edited May 23 '17 at 10:25

Community

1
1

answered Aug 23 '13 at 14:03

caspian

1,804
14
14

Style tag cause error in head

1 Answers1