select objects apear over the layers in IE5. 3

torga · Oct 28, 2002

Hey!
I've been working with layers (using the "div" tag) to make a DHTML menu, but they apear under the "select" objects in IE5. I'm using the z-index property, but it doesn't help. In NS7 works fine... any idea of what's wrong?

P.D: I've tryed all possible combinations of z-index properties.

Thanks a lot for your help!!!
Ton.

Targol · Oct 28, 2002

Did you try to put your select tags inside divs (that are always displayed) on wich you set a z-order ? Water is not bad as long as it stays out human body ;-)

torga · Oct 28, 2002

Yes, i did it. It didn't work... Have you experienced something similar? I haven't tryed for other versions of IE than 5.0. Could be a bug from this version?

Targol · Oct 28, 2002

If you send me the code I can try with IE 6.0 : martin.hardy@ca-logitaine.fr Water is not bad as long as it stays out human body ;-)

torga · Oct 28, 2002

here comes a sample code made with macromedia. (I tried to see if there wasn't the problem with their code but it remains)

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape&quot

&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?&quot

)>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById; return x;
}

function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible'v='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
<style type="text/css">

</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<div id="Layer1" style="position:absolute; left:100px; top:7px; width:140px; height:125px; z-index:1000; visibility: hidden">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%" class="navdark">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>

<form name="form1" method="post" action="">
<div style="z-index:1;">
<input type="checkbox" name="checkbox" value="checkbox">
<input type="checkbox" name="checkbox2" value="checkbox">
<select name="select2">
</select>
<select name="select3">
</select>
<select name="select4">
</select>
<select name="select5">
</select>
<select name="select">
</select>
<input type="button" name="Button" value="Show" onClick="MM_showHideLayers('Layer1','','show')">
<input type="button" name="Button" value="Hide" onClick="MM_showHideLayers('Layer1','','hide')">
</div>
</form>

</body>
</html>

torga · Oct 29, 2002

Ops! There was an error because of the

Code:

[i]

. Now is ok... any idea?

Code:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;>
<script language=&quot;JavaScript&quot;>
<!--
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName==&quot;Netscape&quot;)&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf(&quot;?&quot;))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v3.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
<style type=&quot;text/css&quot;>
<!--
.navdark    {
    background-color: #FFF09B;
    border: 1px solid #FF9A35;
     font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 10px;
    z-index: 100;
}
-->
</style>
</head>

<body bgcolor=&quot;#FFFFFF&quot; text=&quot;#000000&quot;>
<div id=&quot;Layer1&quot; style=&quot;position:absolute; left:100px; top:7px; width:140px; height:125px; z-index:1000; visibility: hidden&quot;> 
  <table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; height=&quot;100%&quot; class=&quot;navdark&quot;>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> </td>
    </tr>
  </table>
</div>

<form name=&quot;form1&quot; method=&quot;post&quot; action=&quot;&quot;>
<div style=&quot;z-index:1;&quot;>
  <input type=&quot;checkbox&quot; name=&quot;checkbox&quot; value=&quot;checkbox&quot;>
  <input type=&quot;checkbox&quot; name=&quot;checkbox2&quot; value=&quot;checkbox&quot;>
  <select name=&quot;select2&quot;>
  </select>
  <select name=&quot;select3&quot;>
  </select>
  <select name=&quot;select4&quot;>
  </select>
  <select name=&quot;select5&quot;>
  </select>
  <select name=&quot;select&quot;>
  </select>
    <input type=&quot;button&quot; name=&quot;Button&quot; value=&quot;Show&quot; onClick=&quot;MM_showHideLayers('Layer1','','show')&quot;>
    <input type=&quot;button&quot; name=&quot;Button&quot; value=&quot;Hide&quot; onClick=&quot;MM_showHideLayers('Layer1','','hide')&quot;>
  </div>
</form>

</body>
</html>

Targol · Oct 29, 2002

I can't try it because I can't copy and paste it from tek-tips : all char are changed to their html values "& lt ;" (without the spaces) for "<", ...). So if you want me to help, send the code the mail adress I gave above. Water is not bad as long as it stays out human body ;-)

xutopia · Oct 29, 2002

I heard about this before. IE actually puts another window in front of the browser to makea select appear there. There is no way but to hide the select item dynamically using DHTML. Z-order will not work at all! Gary

http://www.xutopia.com

Haran

rhowes · Oct 29, 2002

I can confirm what xutopia says, you cant do it with layers, the select box is actually a seperate window.

We had this problem with a menu system appearing behind select boxes. The only solution is to set a style of "display:none" on the select box to hide it, and "display:block: to make it visible again. On clicking our menu we hide all select boxes this way. On closing the menu we display them again.

HTH
Cheers

Richard

xutopia · Oct 29, 2002

I give a star to rhowes for his insight and giving you an alternative to help you deal with it. I should have given you an alternative as well as telling you z-order couldn't fix it.

Visibility switching can also work the same as display does except doesn't reorganisze the elements on the page as display does. Gary

http://www.xutopia.com

Haran

torga · Oct 29, 2002

THANKS A LOT TO ALL!!!!!
I was becoming crazy with this problem! mine is also a menu's problem.
I'll give you both a star. I'll have to find an alternative way than hidding all the select objects but i won't break my mind trying to solve the problem with the z-index property...
Again thanks to all!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

select objects apear over the layers in IE5. 3

torga

Programmer

Targol

Technical User

torga

Programmer

Targol

Technical User

torga

Programmer

torga

Programmer

Targol

Technical User

xutopia

Programmer

rhowes

IS-IT--Management

xutopia

Programmer

torga

Programmer

Similar threads

Part and Inventory Search

Sponsor