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!

Register Log in
  • Congratulations Wanet Telecoms Ltd on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

divs work in IE6 but not in FF 2

Status
Not open for further replies.
lastdonuk

lastdonuk

Programmer
Jan 19, 2005
58
GB
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:

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>&nbsp; </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.
 
Sort by date Sort by votes
It is the use of passing just the ID through in the set calls. This is an IE-only shortcut, and won't work in other browsers. Even fixing that, the code can still be greatly simplified. AFAIK, you should also not put content inside label elements (although I may be wrong on this). Try this for size:

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 setVisible(radioId) {
			var layerNum = radioId.substr(radioId.indexOf('_') + 1);
			for (var loop=1; loop<4; loop++) {
				document.getElementById('Layer' + loop).style.display = (loop == layerNum) ? 'block' : 'none';
			}
		}
	//-->
	</script>
</head>

<body>
	<form name="form1" method="post" action="">
		<input type="radio" id="r1_1" name="r1" value="noadv" onclick="setVisible(this.id);" />
		<label for="r1_1">option 1</label>
		<br />

		<input type="radio" id="r1_2" name="r1" value="advref" onclick="setVisible(this.id);" />
		<label for="r1_2">option 2</label>
		<br />

		<input type="radio" id="r1_3" name="r1" value="broker" onclick="setVisible(this.id);" />
		<label for="r1_3">option 3</label>
		<br />

		<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left:154px; top:19px; display:none;">1</div>
		<div id="Layer2" style="position:absolute; width:200px; height:115px; z-index:2; left:156px; top:21px; display:none;">2</div>
		<div id="Layer3" style="position:absolute; width:200px; height:115px; z-index:3; left:155px; top:22px; display:none;">3</div>
	</form>
</body>
</html>

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]
 
Upvote 0 Downvote
lastdonuk,

The problem as I see it is this.

[1] You setinvisible(Layer) inside the function's else part is obviously wrong. In setvisble() function, it is a typo. In setinvisible() it is an infinite recursion. IE is not executing else part, hence it won't appear in ie but will in ff/nn.

[2] One single renderment is cross-browser.
[tt]oelement.style.visibility="hidden"[/tt]
or [tt]oelement.style.visibility="visible"[/tt]
Hence, check ie or netscape is not needed.

[3] When you draft the onclick handling, you write:
[tt]setvisible(Layer1) //etc [/tt]
etc which is obviously wrong. You pass the id as string.
[tt]setvisible('Layer1') //etc [/tt]

After taking into account of these, you can simply make it like this. (I take out MM_reloadPage(init) part as it is not relevant to the problem.)
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 setvisible(Layer)
{
    document.getElementById(Layer).style.visibility="visible";
}

function setinvisible(Layer)
{
    document.getElementById(Layer).style.visibility="hidden";
}
//-->
</script>
</head>
<body>
<form name="form1" method="post" action="">
  <p>
    <label>
    <input type="radio" name="r1" value="noadv"

onClick="setvisible([red]'[/red]Layer1[red]'[/red]);setinvisible([red]'[/red]Layer2[red]'[/red]);setinvisible([red]'[/red]Layer3[red]'[/red])">
    option 1</label>
    <br>
    <label>
    <input type="radio" name="r1" value="advref"

onClick="setvisible([red]'[/red]Layer2[red]'[/red]);setinvisible([red]'[/red]Layer1[red]'[/red]);setinvisible([red]'[/red]Layer3[red]'[/red])">
    option 2</label>
    <br>
    <label>
    <input type="radio" name="r1" value="broker"

onClick="setvisible([red]'[/red]Layer3[red]'[/red]);setinvisible([red]'[/red]Layer2[red]'[/red]);setinvisible([red]'[/red]Layer1[red]'[/red])">
    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>&nbsp; </p>
</form>
</body>
</html>
I keep the original structure same as far as possible. This shows you more clearly the reason why it didn't work.

regards - tsuji
 
Upvote 0 Downvote
Well, I just have to thank you both so much, Dan & Tsuji - both your options have resolved this issue, as I'm sure you know(!) - so I can now spend some time studying what you've taught me and continue on to a cross-browser compliant website.

Cheers again, I REALLY appreciate your help.
Rob
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
463
gmmastros
gmmastros
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
973
xwb
xwb
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
598
waubain
waubain
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
717
Rayj0000
Rayj0000
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
770
rogerte
rogerte

Part and Inventory Search

Sponsor

Back
Top