473,238 Members | 3,483 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

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

z-index layering problem in IE6


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
  2. <tr bgcolor="#999999">
  3.                 <td style="z-index: 300; width: 1581px" colspan="3">
  5.                     <script>
  6.                             document.write(menuBar);
  7.                     </script>
  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>

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

Expand|Select|Wrap|Line Numbers
  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>
  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>
  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>
  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>
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:



Thanks in advance.
Oct 15 '07 #1
5 14220
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
7,435 Expert 4TB
Do you have an online link to this?
Oct 16 '07 #3
143 100+

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



Good luck.
Oct 16 '07 #4

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%;">........
  6. <table>.....
  8.  <tr bgcolor="#999999">
  9.                     <td style="width: 1581px; z-index:992;" colspan="3">
  11.                         <script>
  12.                             document.write(menuBar);
  13.                         </script>
  15.                     </td>
  17. </table>
  18. </div>
  20.  <script type="text/javascript">    
  22.  DivSetVisible(true) 
  24. </script>
  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.               }
  48. </script>

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>

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">
  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" ......
  7.                 </asp:DropDownList>
  9. </form>

Just cannot seem to get this to work in IE6 - the dropdown list always bleeds through.
Oct 17 '07 #5
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

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

Similar topics

by: JohnDpatriot | last post by:
After installing XP SP2 on my machine, I continually get the Script Error permission denied when I attempt to adjust the Zindex of an object on the page . see below ...
by: news.verizon.net | last post by:
Hi all, I have a website created by others and sort of meshed together. Here are a couple of links... http://www.ibco.net/honours/rc/ See how the navigation bars on the left come in behind this -...
by: Matthew White | last post by:
Hi - From a Javascript beginner: I'd like to display an image in a table cell, and in another cell have 3 or 4 checkboxes. Based on the boxes check, I would "overlay" images on top of the...
by: DJ WIce | last post by:
Hi, I'm looking for a script to get the hi-est z-index on a page. I want my javascript menu to be always on top of the page (moves along on top when you scroll down). Does anyone know how to...
by: Razzbar | last post by:
I'm using a div as a floating dialog box. I'd rather use a popup window, but due to all the popup blockers in use, I have to use another method, a div that has absolute positioning. The damn...
by: Sabbaath | last post by:
But haven't really found anything that answers the issue. Basically, I have a js function that has these lines in it, among others: var navSectionBg = document.getElementById("mainNav_" +...
by: ravis64 | last post by:
Hi, I basicaly have a form of 9 images, spread in a 3 x 3 grid. What i need to do is give each image a border and on some of the borders they need to over lap the image a bit in the bottom corner...
by: dougawells | last post by:
I am having issues using layers due to the different ways that different browsers display them. I need to be able to layer some images together as they work independently of each other. For example...
by: zz2uk1 | last post by:
Im trying to show a text box above a div in a simple webpage. Im viewing in IE 7 and Chrome and the text box is always below the div, although I have set the zIndex fairly high. I have included...
Claus Mygind
by: Claus Mygind | last post by:
How come I can set this style element document.getElementById("popTime").style.left = "0px"; but not this document.getElementById("freqJobDiv").style.zIndex = "20"; I have two nested...
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...

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.