471,610 Members | 1,331 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,610 software developers and data experts.

z-index layering problem in IE6

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
5 13944
drhowarddrfine
7,435 Expert 4TB
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
7,435 Expert 4TB
Do you have an online link to this?
Oct 16 '07 #3
steven
143 100+
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
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
7,435 Expert 4TB
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.

Similar topics

1 post views Thread by news.verizon.net | last post: by
1 post views Thread by Matthew White | last post: by
22 posts views Thread by DJ WIce | last post: by
5 posts views Thread by Razzbar | last post: by
8 posts views Thread by dougawells | last post: by
2 posts views Thread by zz2uk1 | last post: by
1 post views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by CCCYYYY | last post: by
1 post views Thread by ZEDKYRIE | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.