How to make drop-down menu appear over a combobox in IE6?
I'm facing a problem in IE6 :
My website contains a drop-down menu and some pages contains comboboxes. When I roll-out a menu and it's covering a combobox, the combobox always appears over the menu !
My website is to be used exclusively on IE6, so I want to solve this problem on IE6 and make the drop-down menu apprear OVER the combobox in such situations.
Here is a code snippet that illustrates the problem :
<html>
<body>
<!-- Menu -->
<table width="20%" border="0" style="position:relative; z-index:100;">
<tr>
<td colspan="0">
<table style="background-color: #40668C; color: white; z-index:100;" width="100%">
<tr>
<td>Agenda</td>
</tr>
<tr>
<td>
<table
align="right"
valign="top"
width="100%"
height="100%"
style=" visibility: visible;
position: absolute;
background-color: #40668C;
color: white;
top: 21px;
z-index:100;">
<tr><td>Personnal</td></tr>
开发者_运维百科 <tr><td>Group</td></tr>
<tr><td>Day</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Combobox -->
<form style="z-index: 0;">
<TABLE style="z-index: 0;">
<TR style="z-index: 0;">
<TD style="z-index: 0;">
<TABLE style="z-index: 0;">
<TR style="z-index: 0;">
<TD>Combobox :</TD>
<TD style="z-index: 0;">
<SELECT style="z-index: 0;">
<OPTION></option>
<OPTION>Element 1</option>
<OPTION>Element 2</option>
</select>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</form>
</body>
</html>
I know this problem has already been reported and it's because of IE6 but unfortunately, I tried different solutions so far without any success.
Thanks in advance !
This is the result of a z-index bug in IE6. Select elements are given a high z-index, so they always appear in front of other elements.
A quick way to fix this is to hide the select when your menu is open. You can call a function like this when you open the menu:
function hide_select(myelement){
var select = document.getElementById('myelement');
if(select.style.visibility == "hidden")
{
select.style.visibility="visible"
}else{
select.style.visibility="hidden";
}
}
Reference: http://www.tinyqueen.com/web-site-design/ie6-select-z-index-bug-a-workaround
It's an IE6 bug.
There is no way around it other than setting the combo-box's CSS attribute display: none; while hovering on the dropdown, and setting it visible again otherwise.
加载中,请稍侯......
精彩评论