The problem I am having, is that in IE7, the space where the sortable div left, stays available, and the script adds another space for that div to be placed above it, so for every div you move around, another blank space is added, and the div's get pushed down where they don't belong.
if you have prototype and scriptaculous, give this page a try in IE7 and FF, and you'll see what I mean.
How do i correct this issue?
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="scripts/scriptaculous/scriptaculous.js" type="text/javascript"></script>
<title>Sorting Customer Account Folders</title>
<style>
body {
text-align: center;
padding: 5px 5px;
}
.options {
width: 330px;
text-align: left;
margin-top: 15px;
}
.save {
float: right;
}
.cancel {
float: left;
}
.instructions {
width: 330px;
text-align: left;
font-size: 11px;
color: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 30px;
}
.instructions img {
margin: 0px 10px -3px 0px;
}
.instructions strong {
font-size: 14px;
color: #000000;
}
.instructions span {
margin-left: 26px;
display: block;
}
div.page {
width: 330px;
text-align: left;
border: 1px solid #CCCCCC;
margin: 0px auto;
}
div.folder {
background-color: #EFEFEF;
font-family: Arial, Helvetica, sans-serif;
margin-top: -1px;
}
span.title{
display: block;
height: 25px;
line-height: 25px;
background-color: #E9F5F5;
border-top: 1px solid #0099FF;
border-bottom: 1px solid #0099FF;
font-size: 14px;
font-weight: bold;
cursor: move;
}
.folder_icon {
margin: 0px 6px -3px 6px;
}
div.title:hover {
background-color: #ccdeaf;
}
div.lineitem {
height: 22px;
display: block;
font-size: 12px;
line-height: 22px;
padding: 0px 0px 0px 10px;
border-bottom: 1px dashed #dddddd;
cursor: move;
}
div.lineitem:hover {
background-color: #ccdeaf;
}
.original {
float: right;
margin-right: 6px;
font-size: 10px;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div id="page" class="page">
<div id="2" class="folder">
<span class="title"><img src="images/folder.png" border="0" class="folder_icon" />A-M</span>
</div>
<div id="3" class="folder">
<span class="title"><img src="images/folder.png" border="0" class="folder_icon" />N-Z</span>
</div>
<div id="1" class="folder">
<span class="title"><img src="images/folder.png" border="0" class="folder_icon" />Schools</span>
<div id="item_4" class="lineitem">Customer Name Here</div>
<div id="item_6" class="lineitem">Customer Name Here</div>
</div>
<div id="none" class="folder">
<span class="title"><img src="images/folder.png" border="0" class="folder_icon" />No Folder</span>
<div id="item_8" class="lineitem">Customer Name Here</div>
<div id="item_3" class="lineitem">Customer Name Here</div>
<div id="item_14" class="lineitem">Customer Name Here</div>
<div id="item_9" class="lineitem">Customer Name Here</div>
<div id="item_17" class="lineitem">Customer Name Here</div>
<div id="item_7" class="lineitem">Customer Name Here</div>
<div id="item_13" class="lineitem">Customer Name Here</div>
<div id="item_18" class="lineitem">Customer Name Here</div>
</div>
</div>
<script type="text/javascript">
// <![CDATA[
Sortable.create("2",{tag:"div",dropOnEmpty:true,containment:["3","1","none"],constraint:"vertical"});
Sortable.create("3",{tag:"div",dropOnEmpty:true,containment:["2","1","none"],constraint:"vertical"});
Sortable.create("1",{tag:"div",dropOnEmpty:true,containment:["2","3","none"],constraint:"vertical"});
Sortable.create("none",{tag:"div",dropOnEmpty:true,containment:["2","3","1"],constraint:"vertical"});
// ]]>
</script>
</body>
</html>
Before you post, read our: 
