skacore
asked on
Div overlapping multi-select box
I've been having a very hard time in IE6 with a DIV over lapping a multiselect box. I've tried changing Z-indexes, I've tried many options, but for some reason in IE6 the multi-select box always appears above the div I'm creating.
This is not a problem in IE7 or Mozilla/Firefox, if only I could code specifically for those versions. Below is a very basic sample of the problem. If you view it in IE6, the select box will be super-imposed over the data of the <div>.
Is there an easy way to set the select box down in the "zorder"?
Any help would be appreciated. Thanks,
<html>
<head>
<title>Test Div over Select</title>
<style>
.ac_menu
{
border:1px solid black
}
.ac_normal
{
background-color:#ffffff;
cursor:pointer;
}
</style>
</head>
<body>
<div class="ac_menu" style="visibility: visible; position: absolute; z-index: 1; ">
<div class="ac_normal">
simple
</div>
<div class="ac_normal">
simple text
</div>
<div class="ac_normal">
simple text to
</div>
<div class="ac_normal">
simple text to cover a
</div>
<div class="ac_normal">
simple text to cover a select
</div>
<div class="ac_normal">
simple text to cover a select box
</div>
</div>
<select id="testSelect" size="5" multiple="yes">
<option value="1">test 1</option>
<option value="2">test 2</option>
<option value="3">test 3</option>
<option value="4">test 4</option>
<option value="5">test 5</option>
</select>
</body>
</html>
This is not a problem in IE7 or Mozilla/Firefox, if only I could code specifically for those versions. Below is a very basic sample of the problem. If you view it in IE6, the select box will be super-imposed over the data of the <div>.
Is there an easy way to set the select box down in the "zorder"?
Any help would be appreciated. Thanks,
<html>
<head>
<title>Test Div over Select</title>
<style>
.ac_menu
{
border:1px solid black
}
.ac_normal
{
background-color:#ffffff;
cursor:pointer;
}
</style>
</head>
<body>
<div class="ac_menu" style="visibility: visible; position: absolute; z-index: 1; ">
<div class="ac_normal">
simple
</div>
<div class="ac_normal">
simple text
</div>
<div class="ac_normal">
simple text to
</div>
<div class="ac_normal">
simple text to cover a
</div>
<div class="ac_normal">
simple text to cover a select
</div>
<div class="ac_normal">
simple text to cover a select box
</div>
</div>
<select id="testSelect" size="5" multiple="yes">
<option value="1">test 1</option>
<option value="2">test 2</option>
<option value="3">test 3</option>
<option value="4">test 4</option>
<option value="5">test 5</option>
</select>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I appreciate this advice, but my example was far more "simple" than my actual problem. In my application, I am making an AJAX call to the database, and dynamically creating the "div" elements based on the returns. Thus, the onload on the body would not be able to initialize, because the ac_menu does not exist onload.
Is there any other way to mask the "multi-select" box?
Is there any other way to mask the "multi-select" box?
But my solution was specific to your question "Div overlapping multi-select box"
And you dont necessarily have to call on load of the body. You can call this even on a click or after you get response from Ajax call.
And you dont necessarily have to call on load of the body. You can call this even on a click or after you get response from Ajax call.
<html>
<head>
<title>Test Div over Select</title>
<style>
.ac_menu
{
border:1px solid black
}
.ac_normal
{
background-color:#ffffff;
cursor:pointer;
}
</style>
<script language="">
function loadFrame(){
var DivRef=document.getElement
var IfrRef=document.getElement
IfrRef.style.position="abs
IfrRef.style.width=DivRef.
IfrRef.style.height=DivRef
IfrRef.style.top=DivRef.st
IfrRef.style.left=DivRef.s
IfrRef.style.zIndex=DivRef
IfrRef.style.display="";
}
</script>
</head>
<body onload="loadFrame();">
<div id="ac_menu1" class="ac_menu" style="visibility: visible; position: absolute; z-index: 100; ">
<div class="ac_normal">
simple
</div>
<div class="ac_normal">
simple text
</div>
<div class="ac_normal">
simple text to
</div>
<div class="ac_normal">
simple text to cover a
</div>
<div class="ac_normal">
simple text to cover a select
</div>
<div class="ac_normal">
simple text to cover a select box
</div>
</div>
<select id="testSelect" size="5" multiple="yes">
<option value="1">test 1</option>
<option value="2">test 2</option>
<option value="3">test 3</option>
<option value="4">test 4</option>
<option value="5">test 5</option>
</select>
<iframe style="display:none;" id="DivShim" style="position: absolute;" frameborder="0" border="0">sdsdsds</iframe
</body>
</html>