Javascript code working with IE but not Firefox... help!

**Marc Timberlake** · 04-01-2005, 02:43 PM

I'm absolutely ripping what's left of my hair out over this...

All I'm wanting to do is change z-index values of three DIV's so that one appears on the screen with the other two behind, if you get what I mean.

Here's the code in action: www.short-story.net/testingCSS.html

it works perfectly in IE, the display changes when you click the links or select from the drop down menu. With Firefox the display always stays at 'description 1', and I truly cannot see why (the z-index function works fine in Firefox as document.all seems to be supported now)

Here's the code:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-UK" lang="en-UK">

<html>
<head>

<title>Title Goes Here</title>

<link rel="stylesheet" type="text/css" href="style1.css" title="standard" />

<SCRIPT LANGUAGE="JavaScript">
  <!--
var initialZ = 4
function displayItemDetails(itemNo) {
  initialZ++;
  document.all[itemNo].style.zIndex = initialZ;
}
  //-->
</script>

</head>

<body>

<SCRIPT type="text/javascript">
  <!--
var i;
document.write("<form name='ItemSelector'>");
document.write("<select name='menu' onChange='displayItemDetails(this.value)'>");
for (i=1; i<=3; i++) {
	document.write("<option value='item"+i+"'>Item "+i+" Title")
	}
document.write("</select></form>");

  //-->
</script>

<div class="ItemList">
<ul>
<li><a href="#" onclick="displayItemDetails('item1');">Item 1 Title</a></li>
<li><a href="#" onclick="displayItemDetails('item2');">Item 2 Title</a></li>
<li><a href="#" onclick="displayItemDetails('item3');">Item 3 Title (Wider)</a></li>
</ul>
</div>

<div id="item1" class="box" style="z-index: 3">

<table border="0">
<tr>
  <td colspan="2" rowspan="5" width=150px>Picture</td>
  <td colspan="2" height=100px>Description 1</td>
</tr>
<tr>
  <td>Colour</td>
  <td>Style</td>
</tr>
<tr>
  <td>Price</td>
  <td>Buy</td>
</tr>
</table>

</div>

<div id="item2" class="box" style="z-index: 2">


<table border="0">
<tr>
  <td colspan="2" rowspan="5" width=150px>Picture</td>
  <td colspan="2" height=100px>Description 2</td>
</tr>
<tr>
  <td>Colour</td>
  <td>Style</td>
</tr>
<tr>
  <td>Price</td>
  <td>Buy</td>
</tr>
</table>

</div>

<div id="item3" class="box" style="z-index: 1">

<table border="0">
<tr>
  <td colspan="2" rowspan="5" width=150px>Picture</td>
  <td colspan="2" height=100px>Description 3</td>
</tr>
<tr>
  <td>Colour</td>
  <td>Style</td>
</tr>
<tr>
  <td>Price</td>
  <td>Buy</td>
</tr>
</table>

</div>

</body>
</html>

Any help would be greatly appreciated.

**Marc Timberlake** · 04-01-2005, 02:49 PM

Addition - I constantly get the following error from the Firefox Javascript Console:

document.all has no properties

**Marc Timberlake** · 04-01-2005, 03:23 PM

think I've solved it!!!

I changed document.all[itemNo] to document.getElementById(itemNo)

so this Firefox supporting document.all is all pish eh

**dk01** · 04-01-2005, 03:38 PM

Yes FF doesn't do the .all method.... it, like NS has always done the getElementById method since it switched from document.layers in NS4.

-dk