Hi,
I've inherited a website which is causing me a particular problem by not functioning correctly in firefox.
As an experiment, I recreated the problem code in Dreamweaver MX using the design view to see how IE6 & Firefox 1.0.4 handled it. IE works fine - it's 3 radio buttons each showing a layer on click of the corresponding button, the page is here:
div.htm
However, this code does not function in FF, I'm wondering if it's some problem with the javascript setting the layers to be visible/invisible? The code is here:
I've read alot of generalities about the problems with divs in FF, but can't work out which aspect of the code is the issue. I've posted this on a couple of the forums as I'm not sure as to the exact issue. Any pointers in the right direction here would be greatly appreciated.
Thanks.
I've inherited a website which is causing me a particular problem by not functioning correctly in firefox.
As an experiment, I recreated the problem code in Dreamweaver MX using the design view to see how IE6 & Firefox 1.0.4 handled it. IE works fine - it's 3 radio buttons each showing a layer on click of the corresponding button, the page is here:
div.htm
However, this code does not function in FF, I'm wondering if it's some problem with the javascript setting the layers to be visible/invisible? The code is here:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Layers - crossbrowser</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if
((appName=="Netscape")&&(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 setvisible(Layer)
{
appname = navigator.appName;
if (appname == "Microsoft Internet Explorer")
{
Layer.style.visibility = "visible";
}
else
{
setinvisible(Layer);
Layer.visibility = true;
}
}
function setinvisible(Layer)
{
appname = navigator.appName;
if (appname == "Microsoft Internet Explorer")
{
Layer.style.visibility = "hidden";
}
else
{
setinvisible(Layer);
Layer.visibility = false;
}
}
//-->
</script>
</head>
<body>
<form name="form1" method="post" action="">
<p>
<label>
<input type="radio" name="r1" value="noadv"
onClick="setvisible(Layer1);setinvisible(Layer2);setinvisible(Layer3)">
option 1</label>
<br>
<label>
<input type="radio" name="r1" value="advref"
onClick="setvisible(Layer2);setinvisible(Layer1);setinvisible(Layer3)">
option 2</label>
<br>
<label>
<input type="radio" name="r1" value="broker"
onClick="setvisible(Layer3);setinvisible(Layer2);setinvisible(Layer1)">
option 3</label>
<br>
</p>
<div id="Layer1" style="position:absolute; width:200px; height:115px;
z-index:1; left: 154px; top: 19px; visibility: hidden;">
<div align="center">1</div>
</div>
<div id="Layer2" style="position:absolute; width:200px; height:115px;
z-index:2; left: 156px; top: 21px; visibility: hidden;">
<div align="center">2</div>
</div>
<div id="Layer3" style="position:absolute; width:200px; height:115px;
z-index:3; left: 155px; top: 22px; visibility: hidden;">
<div align="center">3</div>
</div>
<p> </p>
</form>
</body>
</html>I've read alot of generalities about the problems with divs in FF, but can't work out which aspect of the code is the issue. I've posted this on a couple of the forums as I'm not sure as to the exact issue. Any pointers in the right direction here would be greatly appreciated.
Thanks.
![[banghead]](/data/assets/smilies/banghead.gif "[banghead] [banghead]")