z-index layering problem in IE6

**drhowarddrfine** · Oct 15 '07, 01:09 PM

I saw and fixed this problem, twice, about a year ago. Never saw it again until about four times recently. I'll be darned if I can't remember what I did and I swore I would make a note but can't find it. I believe it had something to do with placing 'position:relat ive' on one of the elements but don't recall which one. Of course, that could be wrong.

Very busy day today. Try and get back to it tonight.

**drhowarddrfine** · Oct 16 '07, 12:50 PM

Do you have an online link to this?

**steven** · Oct 16 '07, 04:38 PM

http://support.microso ft.com/default.aspx?sc id=kb;en-us;177378

This is a known issue and unfortunately, there's no 'nice' fix for IE6. The most common way to get around this issue, is to use a hack and dynamically create and place an iframe over the form control when the menu/element should be overlapping the control. The iframe should have a z-index higher than the form/controls but lower than the overlapping element (the drop down menu, in your case). It's known as the 'iframe shim'. =]

Here are a couple of google search results looking for the iframe fix

http://www.codeproject .com/useritems/dropdown_div.as p

http://www.soxiam.com/Code/UsingIframeShim ToCoverOverForm SelectBoxes

Good luck.

**lightgram** · Oct 17 '07, 09:16 AM

Hi

I've tried both solutions suggested and still have the problem:

My iframe and div look like this:

Code:

 <iframe id="DivShim" style="z-index: 901; left: 0px; position: absolute; top: 0px;
            width: 100%;" frameborder="0"></iframe>
        <div id="PopUpDiv" style="z-index: 915; left: 0px; position: absolute; top: 0px;
            width: 100%;">........
 
<table>.....

 <tr bgcolor="#999999">
                    <td style="width: 1581px; z-index:992;" colspan="3">

                        <script>
							document.write(menuBar);
                        </script>

                    </td>

</table>
</div>

 <script type="text/javascript">	

 DivSetVisible(true) 

</script>

 <script type="text/javascript">	
 function DivSetVisible(state)
              {
               var DivRef = document.getElementById('PopupDiv');
               var IfrRef = document.getElementById('DivShim');
               if(state)
               {
                DivRef.style.display = "block";
                IfrRef.style.width = DivRef.offsetWidth;
                IfrRef.style.height = DivRef.offsetHeight;
                IfrRef.style.top = DivRef.style.top;
                IfrRef.style.left = DivRef.style.left;
                IfrRef.style.zIndex = DivRef.style.zIndex - 1;
                IfrRef.style.display = "block";
               }
               else
               {
                DivRef.style.display = "none";
                IfrRef.style.display = "none";
               }
              }

</script>

The control causing the problem is within the main iframe:

Code:

<iframe id="mainFrame" style="z-index: -1; left: 208px; width: 761px; position: absolute;
            top: 72px; height: 600px" name="mainFrame" src="<%=strFrameData%>" frameborder="0"
            width="761" height="85%"></iframe>

and is defined within it's own page form:

Code:

<form id="Form1" style="font-size: 10pt; font-family: Arial" method="post" runat="server">

<asp:DropDownList ID="ddMonth" Style="z-index: 909; left: 16px; position: absolute;
                    top: 16px" runat="server" OnSelectedIndexChanged="DateChange" meta:resourcekey="ddMonthResource2">
                    <asp:ListItem Value="January" ......

                </asp:DropDownList>

</form>

Just cannot seem to get this to work in IE6 - the dropdown list always bleeds through.

**drhowarddrfine** · Oct 17 '07, 02:02 PM

On the link you sent me, the first page has an error. You can only use an id name once per page. It must be unique to one element.

z-index layering problem in IE6

z-index layering problem in IE6

Comment

Comment

Comment

Comment

Comment