Morgan Systems
Find 
  Development Notes and Bugfixes  
   

Select Article

We burn the midnight oil so you don't have to.
 
   
   
   
   
   
   
   
   
   
   
   
   




 

Overlib/IE Select Workaround


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();" />
Popups by overLIB!

Comments

Add your comments

Name:
E-Mail:   We will not display your email address.
Comments: