Sortable zOrder bug?

Sortable zOrder bug?


I just copied the Sortable demo, make some small modifications and
noticed the following problem.
I gave each UL a background color. When I dragged an item from the
left list to the right list, the item seemed to go behind the right-
hand UL. Space was made at the correct position but the dragged item
was not visible. I removed the background color and everything appears
normal.
Is this a bug? Is there a work-around?
Here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="firebug/firebug.js" ></script>
<script type="text/javascript" src="script/jquery-1.2.6.js" ></script>
<script type="text/javascript" src="script/jquery-ui-1.5.2.js" ></
script>
<style type="text/css">
ul{
    background-color: #eee;
}
</style>
</head>
<body>
<div class="sortable-container">
<div id="example1">
<button onclick="$
('#selectedUsers').sortable('enable')">Enable</button>
<button onclick="$
('#selectedUsers').sortable('disable')">Disable</button>
<button onclick="alert($
('#selectedUsers').sortable('serialize'))">Serialize!</button>
<button onclick="alert($
('#selectedUsers').sortable('toArray'))">ID's to Array!</button>



<div id="sortable-ex" style="min-height: 110px; min-height:
110px; height: auto !important;">
<div style="float: left;">
Selected users
<ul id="selectedUsers" style="cursor: hand; cursor:
pointer;">
<li id='user_Susan'>Susan</li>
<li id='user_Beth'>Beth</li>
<li id='user_Bob'>Bob</li>
<li id='user_Edward'>Edward</li>
<li id='user_Kate'>Kate</li>
</ul>
</div>
<div style="float: left; margin-left: 50px;">
User list
<ul id="userList" style="cursor: hand; cursor:
pointer;">
<li id='user_Jack'>Jack</li>
<li id='user_John'>John</li>
<li id='user_Marry'>Marry</li>
<li id='user_Claire'>Claire</li>
<li id='user_Daniel'>Daniel</li>
</ul>
</div>
<br style="clear: both;">
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#selectedUsers").sortable({
connectWith: ["#userList"]
});
$("#userList").sortable({
connectWith: ["#selectedUsers"]
});
});
</script>
</body>
</html>