rramapan

Hi

z-index is not working in ie-7.

I have set the z-index for the Div as 1 and for my select box it is 2. But the select box is not coming upfront. Any suggestions

please find my sample html file.

<html>
<head>
<style type="text/css">

.testDiv
{
position:absolute;
display:none;
width:100%;
padding-left:8px;
padding-right:8px;
height:100%;
z-index:1;
background-color:transperant;
}
.dropdown {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
color: #333333;
background-color: #FFFFFF;
border: 1px groove #7A7A7A;
height: 18px;
text-align: left;
float: left;
overflow: visible;
visibility: inherit;
z-index:2;
white-space: normal;
width: 150px;
}
</style>
</head>
<body>
<DIV class="testDiv" style="display: block; cursor: wait; border: none; background-color: white;">
<b>Text in Div tag</b>
</DIV>
<table width="100%">
<tr>
<td >
<select name="test" class="dropdown"></select>
</td>
</tr>
</table>
</body>
</html>

Thanks in advance


Re: Internet Explorer Web Development z-index is not working in IE7

i_m_fury

This is a very common problem in IE in general not just IE7. IE uses the OS's select boxes and therefore all html elements are overlayed by them. A solution is to place (absolutely) an iframe with opactiy set to 0 (CSS:filter:alpha(opacity=0)) directly behind the div. The iframe must have the same width and height and be place at the same location (but behind) the div.

Note: obj.style.filter:alpha(opacity=0) is for IE only for any other borwser you should use opacity:0.






Re: Internet Explorer Web Development z-index is not working in IE7

rramapan

In Fact I want the select box on top and which should be enabled.




Re: Internet Explorer Web Development z-index is not working in IE7

Arpivu

Hi,

Add :

Code Snippet

position: absolute ;

margin-top: 25px ;

in your .dropdown class.





Re: Internet Explorer Web Development z-index is not working in IE7

rramapan

Thanks man. I got it. z-index is only work with positions relative and absolute. In my case the div was in another frame and that create the problem. Thanks for IE7 to resolve the z-index issue..:-)