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!
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...
Note: Hover over the help icon below...
variable and concatenate it into my call to OverLib. Here's what you need:
display:none;/*sorry for IE5*/
display/**/:block;/*sorry for IE5*/
width:3000px;/*must have for any big value*/
height:3000px/*must have for any big value*/;
var HelpImg='<!--[if lte IE 6.5]><iframe></iframe><![endif]-->'+
'<img src="/images/Info24.gif" alt="" align="left">';
<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();" />