Hi there,
I'm trying to add a class to a div using jQuery.

This is the complete file:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link type="text/css" href="/eaco/script/themes/base/ui.all.css">
<script type="text/javascript" src="/eaco/script/jquery-1.3.2.min.js">
</script>
<script type="text/javascript" src="/eaco/script/jquery-ui-1.7.2.custom.min.js">
</script>
<script type="text/javascript" src="/eaco/script/ui.draggable.js">
</script>
<script type="text/javascript" src="/eaco/script/ui.droppable.js">
</script>
<style type="text/css">
	#draggable1 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; background-color:#9F0;}
	#draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; background-color:#F03;}
	#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; background-color:#FF0;}
	#other	{width:350px;
	height:100px;
	}
	.second_class	{
	color:#FFF;
	border:dotted; 
	border-color:#960;
	background-color:#009;
	width:400px;
	height:120px;
	}
	.black_class	{
	color:#FFF;
	background-color:#000;
	width:300px; 
	height:150px;
	}
	</style>
	<script type="text/javascript">
	$(function() {
		$("#draggable1").draggable();
		$("#draggable2").draggable();
		$("#droppable").droppable({
			drop: function(event, ui) {
				$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
				$(this).addClass('second_class');
				$("#p").addClass('second_class');
				
				$("#other").html('<img src="imgs/books.gif" />');
				$("#other").css("display", "inline");
				$("#other").addClass('black_class');
			}
		});

	});
	</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Draggable Example 5</title>
</head>

<body> 
  
<div class="demo">
	
<div id="draggable1" class="ui-widget-content">
	<p>Drag me to <strong>my</strong> target</p>
</div>
<div id="draggable2" class="ui-widget-content">
	<p>Drag me to <em>my</em> target</p>
</div>
<div id="droppable" class="ui-widget-header">
	<p>Drop here</p>
</div>
<div id="other" style="display:none; ">
This is the OTHER div!
</div>

</div><!-- End demo -->

<div id="p">

<p>Enable any DOM element to be droppable, a target for draggable elements.</p>

</div><!-- End demo-description -->
</body>
</html>
The problem I am having is that the "other" div is not showing up with the correct size when black_class is applied.
books.gif is 256w x 128h px.

I realise this might be a HTML issue as much as jQuery, but I can't see where I'm going wrong.

Any pointers?