jQuery resizable does not work properly with image in DIV

I am using jQuery to allow me to resize a div. This works fine until an image is loaded into the div. When the image is there, if the div is resized smaller than the image, the ability to resize is lost. The ultimate goal of this is to resize a div with a Google Streetview container in it but this is reproducable with a basic image also, as in the page below:

<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"&gt;&lt;/script&gt;
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"&gt;&lt;/script&gt;
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"&gt;&lt;/script&gt;
<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>

Actually, saying that the ability to resize is lost is not strictly accurate. The ability to resize it at the point where the image is, is lost. It is still possible to resize at points where the image doesn't reach. Obviously if the image fills the entire div (as with Streetview) there is no way to resize.

EDITED to add that this is on IE8. It does appear to work as expected with Firefox.

ansaurus

tags:

views:

answers:

jQuery resizable does not work properly with image in DIV

related questions