Here is an example of the offending code... Note, this code works as expected in FireFox. The problem is in Internet Explorer.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('jquery', '1.3.1');
</script>
<script type="text/javascript">
function init(){
$(".listOUT").bind("mouseenter", function(e) { $(this).toggleClass('listOUT', false); $(this).toggleClass('listIN', true); })
.bind("mouseleave", function(e) { $(this).toggleClass('listIN', false); $(this).toggleClass('listOUT', true); });
}
</script>
<style type="text/css">
#container
{
border: 1px solid black;
}
.controlContainer
{
display:inline;
position:absolute;
height: 25px;
border: none;
}
.listOUT
{
position:relative;
width:100%;
cursor: pointer;
margin: 0 0 0 0;
height:85%;
border: solid 1px #7F9DB9;
padding-right:20px;
/*
background:url('images/ddImage_out.gif') no-repeat right center;
*/
}
.listIN
{
position:relative;
width:100%;
cursor: pointer;
margin: 0 0 0 0;
height:85%;
border: inset 1px #7F9DB9;
padding-right:20px;
/*
background:url('images/ddImage_in.gif') no-repeat right center;
*/
}
.listTEXT
{
text-transform: none;
width: 100%;
position: relative;
font-size: 8pt;
color: Black;
font-family: Verdana;
cursor: pointer;
border: none;
padding-left: 4px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
overflow: hidden;
}
</style>
</head>
<body onload="init();">
<form id="form1" runat="server">
<div style="width:600px; height:200px;">
<div id="container" style="overflow:auto;position:relative;width:100%; height:100%;">
<div id="control1Container" style="left:67%;top:105px;width:15%;" class="controlContainer">
<div id="control1" class="listOUT" >
<input type="text" class="listTEXT" id="ddTextBox1" readonly="readonly" value="Digital" name="ddTextBox1" />
<input type="hidden" value="1" id="selSelected1" name="selSelected1"/>
</div>
</div>
<div id="control3Container" style="left:50%;top:15px;width:36%;" class="controlContainer">
<div id="control3" class="listOUT" >I am a control</div>
</div>
<div id="control4Container" style="left:40%;top:145px;width:36%;" class="controlContainer">
<div id="control4" class="listOUT" >I am a control</div>
</div>
<div id="control2Container" style="left:47%;top:225px;width:36%;" class="controlContainer">
<div id="control2" class="listOUT" >I am a control</div>
</div><!-- more controls here -->
</div>
</div>
</form>
</body>
</html>