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
- <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.
Expand|Select|Wrap|Line Numbers
- <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>
-
- <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>
You can see both IE6 and IE7 images here:
IE6
IE7
Thanks in advance.