Q:

Moving element with JavaScript in HTML5

I'm coding a web application where the user can pan a map by dragging an image inside a div element with the mouse.  Unfortunately, I need it to be cross-browser, to support IE 6-9, Firefox, Chrome and Safari.  And I'm trapped inside a framework that poses limitations on what I can do with javascript, so the simpler the better.  The code below (amazingly) worked, until I added "! DOCTYPE html".  What's the error?  How would you debug this? 
<! DOCTYPE html>
<html><head></head><body>
<style>
p{ width: 400px; background-color: gold;}
#caption {text-align: center; font-weight: bold;}
div div {
width:400px; height: 140px; 
border: 1px solid green;
background-color: lightgreen;
display: block;
position: relative;
}
div div:hover {border-color: red;}
div > .img {
  width: 200px; height: 100px; top: 10px; left: 20px;
  position: absolute;
  border: 2px solid black;
  background-image: url('http://boallen.com/assets/images/randbitmap_true.png');
}
div > .img:hover {cursor: pointer; background-color: lightgray;}
</style>

<div>
<div>p
  <span class="img" id="friend">bad ie</span>
</div>
<div id="thediv">Mouse in here and click<br></div>
</div>

<script>
var el   = document.getElementById("thediv");
var img = document.getElementById('friend');

img.onmousedown = function (event) {
  img.moving=true;
  img.mouseX=(window.event ?  window.event.x: event.clientX) - img.offsetLeft;
  img.mouseY=(window.event ?  window.event.y: event.clientY) - img.offsetTop;
  el.innerHTML += 'Mouse DOWN ';
}
img.onmousemove = function (event) {
  if(!img.moving) return;
  img.style.left=(window.event ?  window.event.x: event.clientX) - img.mouseX;
  img.style.top=(window.event ?  window.event.y: event.clientY) - img.mouseY;
  stat.innerHTML += "M-M ";
}
img.onmouseup = function (event) {
  this.moving = false;
  el.innerHTML += 'Mouse released ';
}
</script>
</body>
</html>

(tested with http://htmledit.squarefree.com/ on IE9, Firefox and Chrome)

A:

In general terms, for debugging, step through it with a debugger / dom inspector.  Look at the CSS being applied.  Look at which CSS rules win the cascade.  Look at which CSS rules are deleted as invalid. 
The left and top properties accept lengths not numbers.  You haven't put any units on the values. 
(In quirks mode, some browsers think that 99 means 99 pixels when it doesn't mean anything).