By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,534 Members | 1,830 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,534 IT Pros & Developers. It's quick & easy.

z-index layering problem in IE6

P: 9
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.

Expand|Select|Wrap|Line Numbers
  1.  
  2. <tr bgcolor="#999999">
  3.                 <td style="z-index: 300; width: 1581px" colspan="3">
  4.  
  5.                     <script>
  6.                             document.write(menuBar);
  7.                     </script>
  8.  
  9.                 </td>
  10.                 <td style="width: 770px" align="right">
  11.                     <div id="lblReportTitle" style="display: inline; font-weight: bold; font-size: 10pt;
  12.                         font-family: Arial; text-align: right" align="right">
  13.                     </div>
  14.                 </td>
  15.                 <td align="right" colspan="1">
  16.                     <div id="lblSelNodeImgURL" style="display: none; font-weight: bold; font-size: 10pt;
  17.                         font-family: Arial; text-align: right" align="right" >
  18.                     </div>
  19.                 </td>
  20.             </tr>
  21.  
  22.  

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

Expand|Select|Wrap|Line Numbers
  1.  
  2.    <div id="dvForm" style="z-index:-1; width:95%; left:30px; top:0px; position : absolute;">
  3.             <input type="submit" name="btnPrnt" value="Print" id="btnPrnt" style="height:24px;width:88px;z-index: 150; left: 113px; position: absolute; top: 184px" />
  4.             <div id="divPrnt">
  5.                 <span id="Label1" style="font-weight:bold;z-index: 105; left: 16px; position: absolute; top: 0px"> Month</span>
  6.                 <iframe id="calGraphFrame" scrolling="no" style="z-index: 101; left: 0px; width: 761px;
  7.                     position: absolute; top: 208px; height: 326px" name="calGraphFrame" src="CalendarGraph.aspx?Ref=123"
  8.                     frameborder="no" width="761" height="88%"></iframe>
  9.                 <input name="tbSelectedNode" type="hidden" id="tbSelectedNode" style="z-index: 114; left: 528px; width: 24px; position: absolute;
  10.                     top: 176px; height: 22px" size="1" />
  11.                 <span id="Label2" style="font-weight:bold;z-index: 106; left: 112px; position: absolute; top: 0px"> Year</span>
  12.                 <span id="Label3" style="font-weight:bold;z-index: 107; left: 184px; position: absolute; top: 0px"> Utility Type</span>
  13.                 &nbsp;
  14.                 <select name="ddMonth" id="ddMonth" style="z-index: -1; left: 16px; position: absolute;
  15.                     top: 16px">
  16.     <option value="January">January</option>
  17.     <option value="February">February</option>
  18.     <option value="March">March</option>
  19.     <option value="April">April</option>
  20.     <option value="May">May</option>
  21.     <option value="June">June</option>
  22.     <option value="July">July</option>
  23.     <option value="August">August</option>
  24.     <option value="September">September</option>
  25.     <option selected="selected" value="October">October</option>
  26.     <option value="November">November</option>
  27.     <option value="December">December</option>
  28.  
  29. </select>
  30.                 <select name="ddYear" id="ddYear" style="width:56px;z-index: 103; left: 112px; position: absolute;
  31.                     top: 16px">
  32.     <option value="2000">2000</option>
  33.     <option value="2001">2001</option>
  34.     <option value="2002">2002</option>
  35.     <option value="2003">2003</option>
  36.     <option value="2004">2004</option>
  37.     <option value="2005">2005</option>
  38.     <option value="2006">2006</option>
  39.     <option selected="selected" value="2007">2007</option>
  40.  
  41. </select>
  42.                 <input type="submit" name="btnClearChart" value="Clear Chart" onclick="SetOverlayCount(1);" language="javascript" id="btnClearChart" style="z-index: 108; left: 16px; position: absolute;
  43.                     top: 184px" />
  44.                 <select name="rbUtilityList" id="rbUtilityList" style="font-size:10pt;z-index: 104; left: 184px; position: absolute;
  45.                     top: 16px">
  46.     <option selected="selected" value="1">Electricity</option>
  47.     <option value="2">Gas</option>
  48.     <option value="3">Water</option>
  49.     <option value="4">Heating</option>
  50.     <option value="5">Cooling</option>
  51.     <option value="6">Effluent</option>
  52.     <option value="7">Comp. Air</option>
  53.     <option value="9">Steam</option>
  54.  
  55. </select>
  56.                 <table id="rbMeterList" border="0" style="font-size:10pt;z-index: 109; left: 288px; position: absolute;
  57.                     top: 16px">
  58.     <tr>
  59.         <td><input id="rbMeterList_0" type="radio" name="rbMeterList" value="Utility" checked="checked" /><label for="rbMeterList_0">Utility</label></td>
  60.     </tr><tr>
  61.         <td><input id="rbMeterList_1" type="radio" name="rbMeterList" value="SubMeter" /><label for="rbMeterList_1">SubMeter</label></td>
  62.     </tr>
  63. </table>
  64.  
  65.  
  66.  
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.
Oct 15 '07 #1
Share this Question
Share on Google+
5 Replies


drhowarddrfine
Expert 5K+
P: 7,435
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:relative' 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.
Oct 15 '07 #2

drhowarddrfine
Expert 5K+
P: 7,435
Do you have an online link to this?
Oct 16 '07 #3

100+
P: 143
http://support.microsoft.com/default.aspx?scid=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.asp

http://www.soxiam.com/Code/UsingIframeShimToCoverOverFormSelectBoxes

Good luck.
Oct 16 '07 #4

P: 9
Hi

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

My iframe and div look like this:

Expand|Select|Wrap|Line Numbers
  1.  <iframe id="DivShim" style="z-index: 901; left: 0px; position: absolute; top: 0px;
  2.             width: 100%;" frameborder="0"></iframe>
  3.         <div id="PopUpDiv" style="z-index: 915; left: 0px; position: absolute; top: 0px;
  4.             width: 100%;">........
  5.  
  6. <table>.....
  7.  
  8.  <tr bgcolor="#999999">
  9.                     <td style="width: 1581px; z-index:992;" colspan="3">
  10.  
  11.                         <script>
  12.                             document.write(menuBar);
  13.                         </script>
  14.  
  15.                     </td>
  16.  
  17. </table>
  18. </div>
  19.  
  20.  <script type="text/javascript">    
  21.  
  22.  DivSetVisible(true) 
  23.  
  24. </script>
  25.  
  26.  <script type="text/javascript">    
  27.  function DivSetVisible(state)
  28.               {
  29.                var DivRef = document.getElementById('PopupDiv');
  30.                var IfrRef = document.getElementById('DivShim');
  31.                if(state)
  32.                {
  33.                 DivRef.style.display = "block";
  34.                 IfrRef.style.width = DivRef.offsetWidth;
  35.                 IfrRef.style.height = DivRef.offsetHeight;
  36.                 IfrRef.style.top = DivRef.style.top;
  37.                 IfrRef.style.left = DivRef.style.left;
  38.                 IfrRef.style.zIndex = DivRef.style.zIndex - 1;
  39.                 IfrRef.style.display = "block";
  40.                }
  41.                else
  42.                {
  43.                 DivRef.style.display = "none";
  44.                 IfrRef.style.display = "none";
  45.                }
  46.               }
  47.  
  48. </script>
  49.  


The control causing the problem is within the main iframe:

Expand|Select|Wrap|Line Numbers
  1. <iframe id="mainFrame" style="z-index: -1; left: 208px; width: 761px; position: absolute;
  2.             top: 72px; height: 600px" name="mainFrame" src="<%=strFrameData%>" frameborder="0"
  3.             width="761" height="85%"></iframe>
  4.  

and is defined within it's own page form:

Expand|Select|Wrap|Line Numbers
  1. <form id="Form1" style="font-size: 10pt; font-family: Arial" method="post" runat="server">
  2.  
  3. <asp:DropDownList ID="ddMonth" Style="z-index: 909; left: 16px; position: absolute;
  4.                     top: 16px" runat="server" OnSelectedIndexChanged="DateChange" meta:resourcekey="ddMonthResource2">
  5.                     <asp:ListItem Value="January" ......
  6.  
  7.                 </asp:DropDownList>
  8.  
  9. </form>
  10.  

Just cannot seem to get this to work in IE6 - the dropdown list always bleeds through.
Oct 17 '07 #5

drhowarddrfine
Expert 5K+
P: 7,435
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.
Oct 17 '07 #6

Post your reply

Sign in to post your reply or Sign up for a free account.