I am trying to change the order of the stack using z-index. as my HTML, CSS and javascript function show in the code below. The three tables are all read into the same location, with only the last table being printed on the screen, since all tables use a white background. I am calling onMouseOver() and want to change the z-index to pop that table to the top of the stack. The code below is not changing the z-index, what am I doing wrong? Thanks for any help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>table stack pop</title>
<style type="text/css">
table.main {position:absolute; top:57px; left:192px; width:752px; height:490px;
background:white; z-index:-1}
#wrapper {width:900px; margin-left:auto; margin-right:auto; padding-left:7px; background:white}
#left-menu {width:125px; border: 3px solid tan; float:left}
#table-text {width:754px; height:490px; border: 2px solid black; float:left}
</style>
<script type="text/javascript" language="JavaScript">
function tablepop(name) {
document.getElementById('table1').style.zindex = 1;
alert ("function done");
}
</script>
</head>
<body>
<div id="wrapper"> <!-- main page wrapper -->
<div id="left-menu" class="menu"> <!-- left table column -->
<ul>
<li><a href="about.html" onMouseOver="tablepop('table1')">Table 1</a></li>
<li><a href="teachings.html" onMouseOver="tablepop('table2')">Table 2</a></li>
</ul>
</div> <!-- end left table menu -->
<div id="table-text"> <!-- table text -->
<table class="main" id="table1">
<tr>
<td>text for table one</td>
</tr>
</table>
<table class="main" id="table2">
<tr>
<td>text for table two</td>
</tr>
</table>
<table class="main">
<tr>
<td>
<p class="text-format">roll your mouse over the left menu items<br><br>
to see what is under that catagory.</p>
</td>
</tr>
</table>
</div> <!-- end menu text -->
</div> <!-- end main wrapper -->
</body>
</html>
