resizeable div stops working when an image loaded in
This is my first time using jQuery and this is a bit tricky to explain - I'm using the the UI to use .resizable so that I can resize a couple of divs. However what I have found is they work fine until I load an image into the div. Then, it is still resizable but only where the image isn't... in other words if I have a 300x300 div and load a 200x200 image into it, if I resize the div so it measures, say, 150,300 then I cannot resize it where the image is now at the edge of the div, but at points where the div extends beyond the image it still works fine. I have tried this with IE8 and Firefox, and only IE8 exhibts the behaviour - with Firefox it works fine. Is this something I'm doing wrong, or is this a bug? I have pasted a sample page below so you can see what I mean.
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#pano").resizable({handles: 'e,s', ghost: true});
});
</script>
<script type="text/javascript">
function loadImage() {
var imagediv = document.getElementById('pano');
var img = document.createElement('img');
img.src = "http://zan.smugmug.com/Travel/Nepal-2009/Kathmandu-and-Pokhara/IMG0519/755085026_saeti-S.jpg";
imagediv.appendChild(img);
}
</script>
</head>
<body>
<input type="button" onclick="loadImage()" value="Load Image"></input>
<div id="pano" style="width: 500px; height: 400px; border: 1px solid black; overflow:hidden"></div>
</body>
</html>