0

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>
2
Contributors
2
Replies
11
Views
4 Years
Discussion Span
Last Post by Paulxh
0

I got the code working in javascript, the error was that javascript cannot handle the "-" in z-index, it must be typed "zIndex", and the "i" must be capatilized. I also was able to control the z-index by using the <table class="main" id="table1"> rather than the <div> container.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.