Recently I came across a problem in IE6 which my client had reported. We had six SELECT boxes in main page and these SELECT boxes were placed just below the main menu. There were three menu items with drop down just above the SELECT boxes. I have placed everything correctly and finalized it. It was working fine with IE7 and Firefox. But when we checked it in IE6, the drop down menus were displaying behind the SELECT boxes.! I tried Z-Index to fix it- 1, -1, 100, 300.. But it didn’t help me anyway.
Then I asked help to the most helpful thing in the world -google!. Yeah, it gave me lots of forum links with the same problem reported. But none of them had a working solution. I tried a lot, none of the solutions I found was capable to manage six SELECT boxes and three drop downs at a time. At last I found something like below in a blog.
Windowed controls in IE will always cover DHTML layers. That means if you have a DIV that pops up or floats on the page and it intersects with a windowed control (such as the common SELECT box), the windowed control will obscure the DIV, no matter what zIndex you have set for each element.
That is, in IE6 SELECT box was considered to be a windowed element and they have changed it to a windowless element in IE7. The problem is based on the historical fact that form fields have typically been rendered by the operating system/windowing system, where everything else on the page is rendered by the browser. This for a long time caused problems because the OS rendered form fields would draw on top of everything since the operating system has no idea what elements on the page are being drawn.
So.. What’s the solution..?
We can overcome this problem by using iframe. iframe can exist in both the zIndex of windowed controls and the zIndex of regular HTML elements
All we have to do is to make the drop down menus called in an IFRAME. The IFRAME control has a unique nature in IE6. It can exist in both the zIndex of windowed controls and the zIndex of regular HTML elements. Simply put, you can shim an IFRAME under your DIV. The IFRAME will block out the windowed control. I was not ready to try my luck on Javascript. I just created HTML files with only the drop down items and called it to the main page using IFRAME. I used a simple Javascript to show the menu and CSS to format the menu items.
Here is an example:
HTML PART:
<head>
<script language=”JavaScript” src=”mm_menu.js“></script>
<link href=”./cssDropdown.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<a href=“#” onmouseover=“MM_menuShowMenu(‘ContainerDropMenu2’, ‘Drop2’,0,29);“> DROP-2</a>
<div id=”ContainerDropMenu2“>
<div id=”Drop2” onmouseout=”MM_menuStartTimeout(1000);” onmouseover=”MM_menuResetTimeout();“>
<iframe src=”drop2.html” width=”150px” height=”127px” scrolling=”No” frameborder=”0″ > </iframe>
</div>
</div>
</body>
DROP2.HTML:
<head>
<link href=”./cssDropdown.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”DropMenu1” class=”links“>
<a href=”” id=”Drop1_Item_0” target=”_parent“> FIRST OPTION </a> <br />
<a href=“homevalue_request.php” id=”Drop1_Item_1” target=”_parent“> SECOND OPTION </a> <br />
<a href=“testimonials.php” id=”Drop1_Item_2” target=”_parent“> THIRD OPTION </a> <br />
<a href=“contactus.php” id=”Drop1_Item_3” target=”_parent“> FOURTH AND FINAL OPTION </a>
</div>
</body>
If the DIV has transparent areas, you’ll want those areas to punch through the IFRAME to the page background. There are two ways you can make an IFRAME transparent. The one that works for this situation is to set the style object’s filter property:
iframe.style.filter=’progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)’;
This in effect makes the entire IFRAME transparent, but it will still block out the windowed controls. The other technique, which uses the IFRAME element’s ALLOWTRANSPARENCY attribute, actually pertains to making the interior page background of the IFRAME transparent, so that any content inside the IFRAME can have transparency. However, this mode changes the nature of the IFRAME and it no longer serves our purpose for blocking out windowed controls.
I had to spent two days to solve this problem. I have the sample files attached as a zip folder. Please DOWNLOAD and go through it. There are three drop downs in the menu. In DROP1 and DROP2. I have used IFRAME to display it correctly and DROP3 is an ordinary CSS drop down.
Still I’m looking for a better solution. Have a better solution? Please share it with me..