Displaying a popup over a drop down in IE6

So here is one thing that no matter how many times I solve it, it always seems to bite me over and over again. In IE6, if you attempt to display a dynamic overlay over the page (i.e. calendar, lightbox, etc) any drop down elements will show through that overlay. I finally found a working solution somewhere (I forget exactly where, so please forgive me if I do not give credit where credit is due). You need to have an iframe that you place underneath the dynamic element you would like to display, moving it underneath the element when you display it.

Here is the code for the iframe:

	<iframe width="0" scrolling="no" height="0" frameborder="0" class="iballoonstyle" id="iframetop">
	</iframe>

view raw iframe hosted with ❤ by GitHub

Little bit of CSS to go with it:

	.iballoonstyle
	{
	position: absolute;
	z-index: 1;
	display: none;
	}

view raw gistfile1.css hosted with ❤ by GitHub

And here is the code that you can invoke when you hide/show the dynamic element:

	// Code for show where 'dynamic' is the id of the dynamic element
	// and 'iframetop' is an iframe element
	// Little bit of prototype in there as well
	if(document.all) {
	var layer = $('dynamic');
	layer.style.display = 'block';
	var iframe = $('iframetop');
	if(iframe) {
	iframe.style.display = 'block';
	iframe.style.width = layer.offsetWidth-5;
	iframe.style.height = layer.offsetHeight-5;
	iframe.style.left = layer.offsetLeft;
	iframe.style.top = layer.offsetTop;
	}
	}
	// Code for hide
	if(document.all) {
	var layer = $('dynamic');
	var iframe = $('iframetop');
	if(iframe) {
	iframe.style.display = 'none';
	iframe.style.width = 0;
	iframe.style.height = 0;
	}
	}

view raw gistfile1.js hosted with ❤ by GitHub

This has made my day more than a couple of times.