I’m looking for a change log to find out what has changed from the original beta version to the beta 3 version. Does this exist?

I recently discovered this workaround for a scenario that is new to me. Apparently this is a common problem. However, being a developer who in the past has used little (if any) javascript in to build sites, I had not encountered it before.

The bug, present in IE 6 and below, is manifested when a positioned block should cover a select element in another layer. This could occur easily with a dropdown menu or a popup layer that need to open over a form containing a select element. The easiest way around this is to position the conflicting elements so that they do not interfere with each other. However, if this is not possible, there is a workaround using the iframe element and IE conditional comments.

IE 6 Screenshot – demonstrating the bug. Shows two select elements poking through the positioned layer.

Firefox 2.0 Screenshot – the way it should be. Shows the one select element that is actually in the positioned layer. The two below it are hidden by the layer’s light-blue background.

A few seconds of Googling turned up the following useful links:

• <SELECT> Free Layer
• SELECT elements ignore Z-index (“windowed element” problem) (see bug #4)
• How the Z-index Attribute Works for HTML Elements

The first link offered a useful solution which I am abbreviating here:

#popup 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*/
filter:mask();/*must have*/
width: 100%;/*must have for any big value*/
height: 100%;/*must have for any big value*/;
}

In the linked example width and height are both set to 3000px. I found that it worked better for me to use 100% instead since the former caused unnecessary scrollbars to appear on the page.

<div id="bd">
<h1>select element z-index workaround</h1>
<div class="parameter">
<label for="ddTest">Test</label>
<select id="ddTest">
<option>&hellip;</option>
<option>pick me</option>
</select>
</div>
</div>
<div id="popup">
Is the select element poking through? It shouldn't be!
<!--[if lte IE 6.5]><iframe></iframe><![endif]-->
</div>

Download the demo code: Select Element Z-index Workaround Code