If you've been pulling your hair out (like I was recently) trying to figure out why an otherwise
well behaved overlib won't work it's magic over select controls on your page, then read on...
This problem manifests itself as your over-div appearing correctly on top of everything EXCEPT select controls.
Your issue is a bug in the implementation of z-index and select controls in Internet Explorer 6 and below. Really, it's
not OverLib's fault!
Before I get too far describing the fix, let me make sure I give proper credit here. Overlib is an amazing tool developed
by Erik Bosrup and available here. The IE select layer
workaround was documented by Hedgerwow and can be found here. I just
managed to stumble across both by furiously Googling!
Demonstration: Problem
Note: You will see the hover div rendered underneath the select boxes if you are using IE < version 7. Hover over the
help icon below...
Demonstration: Solution
Note: Hover over the help icon below...
The Fix
The fix is based on CSS and a conditional embedded IFRAME when the browser is IE less than version 7. For ease, I declare a JavaScript
variable and concatenate it into my call to OverLib. Here's what you need:
<style>
.select-free
{
position:absolute;
z-index:102;
overflow:hidden;
}
.select-free iframe
{
display:none;/*sorry for IE5*/
display/**/:block;/*sorry for IE5*/
position:absolute;/*must have*/
top:0;/*must have*/
left:0;/*must have*/
z-index:-1;/*must have*/
width:3000px;/*must have for any big value*/
height:3000px/*must have for any big value*/;
filter:mask();/*must have*/
}
</style>
<script language="JavaScript" type="text/javascript"><!--//
var HelpImg='<!--[if lte IE 6.5]><iframe></iframe><![endif]-->'+
'<img src="/images/Info24.gif" alt="" align="left">';
//--></script>
<script type="text/javascript" language="Javascript"
src="/inc/overlib_mini.js"></script>
<div class="select-free" id="overDiv"
style="position:absolute; visibility:hidden; z-index:10000;"></div>
<img src="/images/help16.gif" alt=""
onmouseover="return overlib(HelpImg+'Our text here.', CAPTION,
'Our Caption Here',FGCOLOR,'#EEEEEE',STICKY, MOUSEOFF);"
onmouseout="return nd();" />
