I am constructing a proof of concept and have run into an issue with IE6. I know conceptually how this works but the technical implementation is causing me some issues. Here is conceptually how this is suppose to work.

1. I am creating a container div which will have all elements of a window added to it.

2. I am adding an iframe to the container div which will prevent select list html elements from bleeding through the window (needed for IE6).

3. I added another div which would be the body of the window.

This proof of concept has been stripped down to its basic elements since I can not solve this 1 issue with bleed thru in IE6.

Here is the issue.

If I do not add the bodyDiv to the container window, the Iframe prevents the select list box from bleeding through in IE6. As soon as I added the bodyDiv to the container, the select list bleeds through again. It is like the bodyDiv replaces the Iframe but I did do a getElementById after the bodyDiv was added and it does exist, so this is not a true statement.

I was hoping someone had experience with this issue and could point out to me what I am doing incorrectly here. I know this concept works but when I dynamically build the window components as I am now, it is not working.

I also notice if I changed the size of the bodyDiv to be smaller than the Iframe (for example, make the bodyDiv width/height 197, the iframe does prevent the bleed through). If the width/height is 198 to 200, the iframe does not prevent the bleed through.

Any help would be appreciated… I am going crazy here.

Thanks in advance for your time.


<style type="text/css">
	position: absolute; 
	display: block;  
	z-index: 9;
	left: 0px; 
	top: 0px;
	border-style: none;
	position: absolute; 
	display: block; 			
	z-index: 10;
	border-style: none;

	position: relative;
	margin: 0px;
	float: left;
	background: #c6c6c6;
	vertical-align: top;
	z-index: 10;

<script language="JavaScript">
function buildWindow()
   //-- Build container
   var container = document.createElement( "div" );
   container.id = "ContainerDivId";
   container.className = "ContainerDiv";
   container.style.top = '10px';
   container.style.left = '10px';
   container.style.width = '200px';
   container.style.height = '200px';

   //-- Build Iframe for IE6 to prevent bleed through
   var iframe = document.createElement( "iframe" );
   iframe.id = "IframeId";
   iframe.className = "FrameIframe";
   iframe.style.width = '200px';
   iframe.style.height = '200px';

   container.appendChild( iframe );

   //-- Build Div
   var bodyDiv = document.createElement( "div" );
   bodyDiv.id = "BodyDivId";
   bodyDiv.className = "BodyDiv";
   bodyDiv.style.width = '200px';
   bodyDiv.style.height = '200px';
   //bodyDiv.style.width = '197px';
   //bodyDiv.style.height = '197px';
   bodyDiv.innerHTML = "Content that can be added";

   container.appendChild( bodyDiv );

   document.body.appendChild( container );


<a href="javascript: buildWindow()">Show Window</a>

<select name="selectId" id="selectId">
   <option value="yes">Yes</option>
   <option value="no">No</option>