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>

Check this out, the last post on this has some details about how they made it work.

http://www.codingforums.com/showthread.php?t=157934

It would be a lot easier with jQuery I bet. I would just create a class with the z-index property and then apply to the div.

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.