JavaScript Forum

**Marc Timberlake** · 04-01-2005, 03: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.