<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="OpenLayers-2.12/theme/default/style.css" type="text/css" />
    <script src="./OpenLayers-2.12/lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var lon = 5;
        var lat = 40;
        var zoom = 5;
        var map, layer;

        function init(){
            var options = {
controls: [      new OpenLayers.Control.KeyboardDefaults(),
      new OpenLayers.Control.Navigation(),
      new OpenLayers.Control.NavToolbar(),
      new OpenLayers.Control.PanZoomBar({}),
      new OpenLayers.Control.MousePosition()],
           scales: [500000000,200000000,100000000,50000000,20000000,10000000,5000000,2000000,1000000]

            };
            map = new OpenLayers.Map( 'map',options );
            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                    "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
            map.addLayer(layer);

            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
            map.addControl( new OpenLayers.Control.LayerSwitcher() );

                document.getElementById('shortdesc').innerHTML ="Compatibility : "+document.compatMode;
        }
    </script>

<style type="text/css">
table {
  padding: 0;
  margin: 0;
  border-collapse:collapse;
  border-spacing: 0;
  background: none;
  width: 100%;
        font-size: 11px;
}
th{
  text-align: center;
  font-weight: bold;
  color: #FFFFFF;
  text-decoration: none;
  text-transform: uppercase;
  background-color: #7c7c7c;
  border-top-style: none;
  border-top-width: 0px;
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #D8CF8F;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #D8CF8F;
  border-left-style: none;
  padding-top: 6px;
  padding-right: 7px;
  padding-bottom: 6px;
  padding-left: 7px;
  height: 100px;
}
th{
  background-color: #7C7C7C;
  color:#464646;
}
</style>

  </head>
  <body onload="init()">
<h1 id="title">Bug in PanZoomBar Example</h1>

    <div id="tags">
    </div>
    <p id="shortdesc">
        test
    </p>
        <div id="page">
        <div id="content">
          <table>
            <tbody>
              <tr><th>Structure</th><td>ggdfgdgdgd</td></tr>
              <tr><th>Structure</th><td>ggdfgdgdgd</td></tr>
              <tr><th>Structure</th><td>ggdfgdgdgd</td></tr>
              <tr><th>Structure</th><td>ggdfgdgdgd</td></tr>
              <tr><th>Structure</th><td>ggdfgdgdgd</td></tr>
              <tr><th>Structure</th><td>ggdfgdgdgd</td></tr>
              <tr><th>Structure</th><td>ggdfgdgdgd</td></tr>
              <tr><th>Structure</th><td>ggdfgdgdgd</td></tr>
              <tr><th>Carte</th><td><div id="map" style="width: 512px; height: 400px; "></div></td></tr>
            </tbody>
          </table>
        </div>
        </div>
  </body>
</html>