Sortable and IE: Dragged element disappearing
Hi all,
I'm using the ui.sortable plug-in to rearrange a list of photos and
descriptions. Everything's fine in FireFox, Safari, Opera, but in all
versions of IE when I start dragging an item the the item disappears -
becomes invisible. The item appears to be still there - I still sort
the list as I move the mouse over other items the move out of the way
but for some reason the item is just invisible.
The list looks like this:
<ul id='ulThumbnailList'>
<li id='39af8c1e' class='photolistitem'>
<div>
<a href="javascript:ShowImagePopup('39af8c1e');">
<img src='tb_rickauthor.jpg' class='thumbnailimage'
id='39af8c1eImg' />
</a>
</div>
<div id='39af8c1eNotes'>
Good times in the water
</div>
</li>
...
</ul>
Code to make the list sortable:
$("#ulThumbnailList").sortable( { items: "li", opacity: 0.7,
revert: false });
The style tag is as follows:
.photolistitem
{
float: left;
list-style-type: none;
height: 220px;
width: 170px;
padding: 10px;
border: solid 1px khaki;
margin: 10px;
background-color: steelblue;
text-align: center;
}
After some experimentation the problem appaears to be with float:
left...
If I take out float: left then everything is fine. If I have only 2 or
3 items and the list doesn't scroll to a new row all is fine. only
when list scrolls to the next row does the problem occur.
Any ideas how to work around this?
+++ Rick ---