title: Span image overlays text but not other images
body: <p>I created a thumbnail and description field within a table. The thumbnail has a span image which overlays neighboring text but not neighboring thumbnails??? (all are contained in the #divSparesItem) I've tried adding z-index and display variations to the css as recommended in other discussions but nothing seems to fix the problem. Could anyone help?</p>
  
  <p>HTML:</p>
  
  <pre><code>            &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;a class="thumbnail" href="#thumb"&gt;&lt;img src="Design/Spares Image Thumbnail.png" width="80" height="60" alt="Spare I"/&gt;&lt;span&gt;&lt;img src="Design/Spares Image Large.png" width="320" height="240" alt="Spare I"/&gt;&lt;br/&gt;Spare I&lt;/span&gt;&lt;/a&gt;&lt;p&gt;CODE: 123ABC&lt;br/&gt;Description: Donec egestas justo ut nulla congue bibendum.&lt;br/&gt;&lt;font color="#FF0000"&gt;Price&lt;/font&gt;&lt;/p&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;a class="thumbnail" href="#thumb"&gt;&lt;img src="Design/Spares Image Thumbnail.png" width="80" height="60" alt="Spare I"/&gt;&lt;span&gt;&lt;img src="Design/Spares Image Large.png" width="320" height="240" alt="Spare II"/&gt;&lt;br/&gt;Spare II&lt;/span&gt;&lt;/a&gt;&lt;p&gt;CODE: 123ABC&lt;br/&gt;Description: Donec egestas justo ut nulla congue bibendum.&lt;br/&gt;&lt;font color="#FF0000"&gt;Price&lt;/font&gt;&lt;/p&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;a class="thumbnail" href="#thumb"&gt;&lt;img src="Design/Spares Image Thumbnail.png" width="80" height="60" alt="Spare III"/&gt;&lt;span&gt;&lt;img src="Design/Spares Image Large.png" width="320" height="240" alt="Spare I"/&gt;&lt;br/&gt;Spare III&lt;/span&gt;&lt;/a&gt;&lt;p&gt;CODE: 123ABC&lt;br/&gt;Description: Donec egestas justo ut nulla congue bibendum.&lt;br/&gt;&lt;font color="#FF0000"&gt;Price&lt;/font&gt;&lt;/p&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#divSparesItem {
      color:#CCC;
      text-align:left;
      font-size:0.8em;
      float:right;
      padding-top:10px;
      padding-left:25px;
      padding-right:25px;
      text-decoration:none;
  }
  
  #divSparesItem img {
      float:left;
      margin-top:2px;
      margin-right:15px;
      margin-bottom:10px;
      border-left:#000;
      border-top:#000;
      border-right:#999;
      border-bottom:#999;
      border-width:1px;
      border-style:solid;
  }
  
  .thumbnail {
      position:relative;
      z-index:0;
  }
  
  .thumbnail span{
      position:absolute;
      background-color:#333;
      padding-top:15px;
      padding-left:15px;
      padding-right:0px;
      padding-bottom:15px;
      border-left:#999;
      border-top:#999;
      border-right:#000;
      border-bottom:#000;
      border-width:1px;
      border-style:solid;
      visibility:hidden;
      color:#CCC;
      text-decoration:none;
  }
  
  .thumbnail span img{
      border:none;
      z-index:100;
  }
  
  .thumbnail:hover span{
      display:block;
      visibility:visible;
      background-color:#333;
      top:-115px;
      left:0;
  }
  </code></pre>
  
  <p>You can see the issue <a href="http://www.synte.co.za/Puzey/Spares.html" rel="nofollow">here</a> (click on the Benelli1 tab). Any advice would be much appreciated!</p>