PDA

View Full Version : Layers, and N4.7...collision!

Dr. Web
03-19-2001, 02:40 PM
Its a log bit of code, I know. Take a look. In IE it renders fine, but in Netscape 4.7, the radio button is missing. If I add a <form></form> around the radio button it renders in N4.7...which makes me assume that the layers interfere with the <form> tag in N4.7 . Can anyone shed a little light on this one for me?

the code:

<html>

<head>
<title>Volcanic Design, Layer Menu</title>
<script language="javascript">
//Contents for menu
var menu1=new Array()
menu1[0]='<a href=wer.htm>Edit Course Title</a><br>'
menu1[1]='<a href=hse.htm>Edit Course ID #</a><br>'
menu1[2]='<a href=qwe.htm>Toggle Status</a><br>'
menu1[3]='<a href=jru.htm>Course Details</a><br>'
</script>
<style>
<!--
.iewrap1{
position:relative;
height:22px; width:75px;
}
.iewrap2{
position:absolute;
}
#dropmenu0, #dropmenu1, #dropmenu2, #dropmenu3{
visibility:hide;
z-index:100;
}
-->
</style>
</head>
<body>

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<form>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td width="25" bgcolor="#054289"> &nbsp;</td>
<td width="25" bgcolor="#054289"> &nbsp;</td>
<td width="25%" bgcolor="#054289"><font face="tahoma" size="2" color="#ffffff"><B>Title</b></font></td>
<td width="25%" bgcolor="#054289"><font face="tahoma" size="2" color="#ffffff"><b><center>Course ID Number</center></b></font></td>
<td width="25%" bgcolor="#054289"><font face="tahoma" size="2" color="#ffffff"><b><center>Status</b></center></font></td>
<td width="25%" bgcolor="#054289">&nbsp;</td>
</tr>
<tr>
<td width="25">
<ilayer height=35px><form>
<layer visibility=show>
<span class=iewrap1>
<span class=iewrap2 onClick="dropit2(dropmenu0);event.cancelBubble=true;return false">
<a href="alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu0')"><img src="options.gif" width="75" height="22" border="0" alt=""></a>
</span>
</span>
</layer>
</ilayer></td>
<td width="25"></td>
<td width="25%" bgcolor="#e0e0e0"><font face="tahoma" size="2"><b>HTML Intro</b></font><input type="radio" value="" checked></td>
<td width="25%" bgcolor="#e0e0e0"><font face="tahoma" size="2"><b><center>HTML123 </center></b></font></td>
<td width="25%" bgcolor="#e0e0e0"><font face="tahoma" color="black" size="2"><b><center>Active</center></b></font></td>
<td width="25%" bgcolor="#e0e0e0">&nbsp;</td>
</tr>
<tr>
<td width="25">
<ilayer height=35px>
<layer visibility=show>
<span class=iewrap1>
<span class=iewrap2 onClick="dropit2(dropmenu0);event.cancelBubble=true;return false">
<a href="alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu0')"><img src="options.gif" width="75" height="22" border="0" alt=""></a>
</span>
</span>
</layer>
</ilayer>
</td>
<td width="25"></td>
<td width="30%" bgcolor="#ffffff"><font size="2"><b><font face="tahoma" size="2">HTML Advanced</b></font></td>
<td width="25%" bgcolor="#ffffff"><font face="tahoma" size="2"><b><center>HTML4567</center></b></font></td>
<td width="25%" bgcolor="#ffffff"><font face="tahoma" color="black" size="2"><b><center>Inactive</center></b></font></td>
<td width="25%" bgcolor="#ffffff">&nbsp;</td>
</tr>
<tr>
<td width="25">
<ilayer height=35px>
<layer visibility=show>
<span class=iewrap1>
<span class=iewrap2 onClick="dropit2(dropmenu0);event.cancelBubble=true;return false">
<a href="alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu0')"><img src="options.gif" width="75" height="22" border="0" alt=""></a>
</span>
</span>
</layer>
</ilayer></td>
<td width="25"></td>
<td width="25%" bgcolor="#e0e0e0"><font face="tahoma" size="2"><b>JavaScript Intro</b></font></td>
<td width="25%" bgcolor="#e0e0e0"><font face="tahoma" size="2"><b><center>JS1234</center></b></font></td>
<td width="25%" bgcolor="#e0e0e0"><font face="tahoma" color="black" size="2"><b><center>Inactive</center></b></font></td>
<td width="25%" bgcolor="#e0e0e0">&nbsp;</td>
</tr>
<tr>
<td width="25"><ilayer height=35px>
<layer visibility=show>
<span class=iewrap1>
<span class=iewrap2 onClick="dropit2(dropmenu0);event.cancelBubble=true;return false">
<a href="alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu0')"><img src="options.gif" width="75" height="22" border="0" alt=""></a>
</span>
</span>
</layer>
</ilayer></td>
<td width="25"></td>
<td width="25%" bgcolor="#ffffff"><font face="tahoma" size="2"><b>XML Intro</b></font></td>
<td width="25%" bgcolor="#ffffff"><font face="tahoma" size="2"><b><center>XML1234 </center></b></font></td>
<td width="25%" bgcolor="#ffffff"><font face="tahoma" color="black" size="2"><b><center>Inactive</center></b></font></td>
<td width="25%" bgcolor="#ffffff">&nbsp;</td>
</tr>


<tr>
<td width="25"><ilayer height=35px>
<layer visibility=show>
<span class=iewrap1>
<span class=iewrap2 onClick="dropit2(dropmenu0);event.cancelBubble=true;return false">
<a href="alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu0')"><img src="options.gif" width="75" height="22" border="0" alt=""></a>
</span>
</span>
</layer>
</ilayer></td>
<td width="25"></td>
<td width="25%" bgcolor="#e0e0e0"><font face="tahoma" size="2"><b>Flash 5 Advanced</b></font></td>
<td width="25%" bgcolor="#e0e0e0"><font face="tahoma" size="2"><b><center>FLA1234 </center></b></font></td>
<td width="25%" bgcolor="#e0e0e0"><font face="tahoma" color="black" size="2"><b><center>Active</center></b></font></td>
<td width="25%" bgcolor="#e0e0e0">&nbsp;</td>
</tr>
<tr>
<td width="25"><ilayer height=35px>
<layer visibility=show>
<span class=iewrap1>
<span class=iewrap2 onClick="dropit2(dropmenu0);event.cancelBubble=true;return false">
<a href="alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu0')"><img src="options.gif" width="75" height="22" border="0" alt=""></a>
</span>
</span>
</layer>
</ilayer></td>
<td width="25"></td>
<td width="25%" bgcolor="#ffffff"><font face="tahoma" size="2"><b>Introduction to PhotoShop5.5</b></font></td>
<td width="25%" bgcolor="#ffffff"><font face="tahoma" size="2"><b><center>PHO1234 </center></b></font></td>
<td width="25%" bgcolor="#ffffff"><font face="tahoma" color="black" size="2"><b><center>Active</center></b></font></td>
<td width="25%" bgcolor="#ffffff">&nbsp;</td>
</tr>
<tr>
<td width="25" bgcolor="#054289"><font color="#400040">&nbsp;</font></td>
<td width="25" bgcolor="#054289"><font color="#400040">&nbsp;</font></td>
<td width="25%" bgcolor="#054289"><font color="#400040">&nbsp;</font></td>
<td width="25%" bgcolor="#054289"><font color="#400040">&nbsp;</font></td>
<td width="25%" bgcolor="#054289"><font color="#400040">&nbsp;</font></td>
<td width="25%" bgcolor="#054289">&nbsp;</td>
</tr>
</table>
</form>
<script language="JavaScript1.2">
//reusable/////////////////////////////
var zindex=100
function dropit2(whichone){
if (window.themenu&&themenu.id!=whichone.id)
themenu.style.visibility="hidden"
themenu=whichone
if (document.all){
themenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX
themenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+18
if (themenu.style.visibility=="hidden"){
themenu.style.visibility="visible"
themenu.style.zIndex=zindex++
}
else{
hidemenu()
}
}
}

function dropit(e,whichone){
if (window.themenu&&themenu.id!=eval(whichone).id)
themenu.visibility="hide"
themenu=eval(whichone)
if (themenu.visibility=="hide")
themenu.visibility="show"
else
themenu.visibility="hide"
themenu.zIndex++
themenu.left=e.pageX-e.layerX
themenu.top=e.pageY-e.layerY+19
return false
}

function hidemenu(whichone){
if (window.themenu)
themenu.style.visibility="hidden"
}

function hidemenu2(){
themenu.visibility="hide"
}

if (document.all)
document.body.onclick=hidemenu

//reusable/////////////////////////////
</script>

<!----------Menu 1 starts here---------->
<!--
<ilayer height=35px>
<layer visibility=show>
<span class=iewrap1>
<span class=iewrap2 onClick="dropit2(dropmenu0);event.cancelBubble=true;return false"><font face=Verdana; ><b><a href="alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu0')">Click here</a></b></font>
</span>
</span>
</layer>
</ilayer><br>
<!----------Menu 1 ends here---------->


<div id=dropmenu0 style="position:absolute;left:0;top:0;layer-background-color:#cccccc;background-color:#cccccc;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu0.style.padding="4px"
for (i=0;i<menu1.length;i++)
document.write(menu1[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu0.captureEvents(Event.CLICK)
document.dropmenu0.onclick=hidemenu2
}
</script>

</body>
</html>
nuclear vapid
03-26-2001, 03:15 AM
well, a couple of questions...

you've opened a form after the body tag and not closed it, then opened another form tag right after the first layer and you have not assigned either of them actions or closed it either.

If you are using stlye sheets, why then all the inline styling?

Nestcrap is funny with layers and doesn't like the ilayer tag ( don't ask why - it's one of the mysteries of the universe ) It's best to open your form after the body tag and close it before the closing body tag. NS doesn't like to split the form tags. If you have more than one form, wrap the tags around a whole section of code, not like this
wrong right
<form> <form>
<layer> <layer>
</form> </layer>
</layer> </form>
Dr. Web
03-26-2001, 12:56 PM
nuclear vapid,

I posted the entire code for the benefit of the person trying to troubleshoot it. YES, I have 2 form tags, as I mentioned...if I add that second form tag...the radio button renders in N4.7. It does not matter whether or not I have assigned names, or actions to the form tags. The forms will work nonetheless. There is a closing form tag inside the body....just before the javascript starts......you just need to look for it. And as for all the inline styles.......I am assuming you didn't run the code as I posted it(which would have helped)....but you would have seen a DHTML menu system. Thats the inline style sheets in work. The declared style sheets in the header work WITH the inline style sheets to create this system. Try and run the code, and you'll see what I am talking about.

In any event, I know its a long chuunk of code, and I thank you for taking the time to look at it.
kdjoergensen
04-02-2001, 02:38 PM
Dr. Web,
netscape 4 does not allow you to break forms with layers, e.g.
<layer>
<form>
</form>
</layer>

will work, but

<form>
<layer>
</layer>
</form>
will not.

Kenneth