z-index layering problem in IE6

[lightgram]

Hi

I have a problem, which after browsing through Google, seems to be fairly common.

However having tried most suggestions I am still getting the problem.

I have a menu bar across the top of my page. As I click on each menu option a further list of links is displayed below it.

Now in IE7 where I click on a menu option that has a large number of links below it it appears layered correctly over the top of the controls below.

However in IE6 some of the controls are superimposed over the top of the menu options.

The menu is defined within a table row like this with z:index: 300.

 
<tr bgcolor="#999999">
                <td style="z-index: 300; width: 1581px" colspan="3">
 
                    <script>
                            document.write(menuBar);
                    </script>
 
                </td>
                <td style="width: 770px" align="right">
                    <div id="lblReportTitle" style="display: inline; font-weight: bold; font-size: 10pt;
                        font-family: Arial; text-align: right" align="right">
                    </div>
                </td>
                <td align="right" colspan="1">
                    <div id="lblSelNodeImgURL" style="display: none; font-weight: bold; font-size: 10pt;
                        font-family: Arial; text-align: right" align="right" >
                    </div>
                </td>
            </tr>
 
 

The controls are within a div within an iframe with z-index -1.

 
   <div id="dvForm" style="z-index:-1; width:95%; left:30px; top:0px; position : absolute;">
            <input type="submit" name="btnPrnt" value="Print" id="btnPrnt" style="height:24px;width:88px;z-index: 150; left: 113px; position: absolute; top: 184px" />
            <div id="divPrnt">
                <span id="Label1" style="font-weight:bold;z-index: 105; left: 16px; position: absolute; top: 0px"> Month</span>
                <iframe id="calGraphFrame" scrolling="no" style="z-index: 101; left: 0px; width: 761px;
                    position: absolute; top: 208px; height: 326px" name="calGraphFrame" src="CalendarGraph.aspx?Ref=123"
                    frameborder="no" width="761" height="88%"></iframe>
                <input name="tbSelectedNode" type="hidden" id="tbSelectedNode" style="z-index: 114; left: 528px; width: 24px; position: absolute;
                    top: 176px; height: 22px" size="1" />
                <span id="Label2" style="font-weight:bold;z-index: 106; left: 112px; position: absolute; top: 0px"> Year</span>
                <span id="Label3" style="font-weight:bold;z-index: 107; left: 184px; position: absolute; top: 0px"> Utility Type</span>
                &nbsp;
                <select name="ddMonth" id="ddMonth" style="z-index: -1; left: 16px; position: absolute;
                    top: 16px">
    <option value="January">January</option>
    <option value="February">February</option>
    <option value="March">March</option>
    <option value="April">April</option>
    <option value="May">May</option>
    <option value="June">June</option>
    <option value="July">July</option>
    <option value="August">August</option>
    <option value="September">September</option>
    <option selected="selected" value="October">October</option>
    <option value="November">November</option>
    <option value="December">December</option>
 
</select>
                <select name="ddYear" id="ddYear" style="width:56px;z-index: 103; left: 112px; position: absolute;
                    top: 16px">
    <option value="2000">2000</option>
    <option value="2001">2001</option>
    <option value="2002">2002</option>
    <option value="2003">2003</option>
    <option value="2004">2004</option>
    <option value="2005">2005</option>
    <option value="2006">2006</option>
    <option selected="selected" value="2007">2007</option>
 
</select>
                <input type="submit" name="btnClearChart" value="Clear Chart" onclick="SetOverlayCount(1);" language="javascript" id="btnClearChart" style="z-index: 108; left: 16px; position: absolute;
                    top: 184px" />
                <select name="rbUtilityList" id="rbUtilityList" style="font-size:10pt;z-index: 104; left: 184px; position: absolute;
                    top: 16px">
    <option selected="selected" value="1">Electricity</option>
    <option value="2">Gas</option>
    <option value="3">Water</option>
    <option value="4">Heating</option>
    <option value="5">Cooling</option>
    <option value="6">Effluent</option>
    <option value="7">Comp. Air</option>
    <option value="9">Steam</option>
 
</select>
                <table id="rbMeterList" border="0" style="font-size:10pt;z-index: 109; left: 288px; position: absolute;
                    top: 16px">
    <tr>
        <td><input id="rbMeterList_0" type="radio" name="rbMeterList" value="Utility" checked="checked" /><label for="rbMeterList_0">Utility</label></td>
    </tr><tr>
        <td><input id="rbMeterList_1" type="radio" name="rbMeterList" value="SubMeter" /><label for="rbMeterList_1">SubMeter</label></td>
    </tr>
</table>
 
 
 

Does anyone know what I can do to get this looking OK in IE6. I’ve tried upping the z-index on the menu bar and decreasing it on the div and the controls but the dropdown list always pokes through.

You can see both IE6 and IE7 images here:

IE6

IE7



Thanks in advance.

[drhowarddrfine]

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]

Do you have an online link to this?

[steven]

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]

Hi

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

My iframe and div look like this:

 <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:

<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:

<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]

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.