title: Having trouble with absolute positioning / Z-Index with Lists and Tables in IE 6 and 7
body: <p>I'm creating a prototype of a CSS/XHTML tables-based calendar that eventually will be generated with PHP for the Simple Updates content management system. I've run into a problem with using absolute positioning to create a popup that would show all the events in a day when there are more than will fit in a cell. The problem can be seen here:</p>
  
  <p><a href="http://sutest.bravehost.com/" rel="nofollow noreferrer">http://sutest.bravehost.com/</a></p>
  
  <p>As you can see, the popup pops under the multi-day event and date in both IE7 and IE6. Putting a z-index on the popup fixed the problem in Firefox. I've tried putting all sorts of z-index values on the popup, changing the display property of the popup and related element, as well as many other varied approaches, with no success.</p>
  
  <p>The HTML is as follows:</p>
  
  <pre><code>&lt;td valign="top"&gt;&lt;div&gt;
      &lt;div class="date"&gt;25&lt;/div&gt;
      &lt;ul&gt;
          &lt;li class="single"&gt;&lt;a href="#"&gt;History&lt;/a&gt;&lt;/li&gt;
          &lt;li class="single"&gt;&lt;a href="#"&gt;Biology&lt;/a&gt;&lt;/li&gt;
          &lt;li class="single"&gt;&lt;a href="#"&gt;Computers&lt;/a&gt;&lt;/li&gt;
          &lt;li class="single"&gt;&lt;a href="#"&gt;POTCH&lt;/a&gt;&lt;/li&gt;
          &lt;li class="single"&gt;&lt;a href="#"&gt;Precal&lt;/a&gt;&lt;/li&gt;
          &lt;li class="more"&gt;&lt;a href="#"&gt;+3 More&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="popup"&gt;
          &lt;span class="close"&gt;&lt;a href="#"&gt;X&lt;/a&gt;&lt;/span&gt;
          &lt;ul&gt;
              &lt;li class="single"&gt;&lt;a href="#"&gt;History&lt;/a&gt;&lt;/li&gt;
              &lt;li class="single"&gt;&lt;a href="#"&gt;Biology&lt;/a&gt;&lt;/li&gt;
              &lt;li class="single"&gt;&lt;a href="#"&gt;Computers&lt;/a&gt;&lt;/li&gt;
              &lt;li class="single"&gt;&lt;a href="#"&gt;POTCH&lt;/a&gt;&lt;/li&gt;
              &lt;li class="single"&gt;&lt;a href="#"&gt;Precal&lt;/a&gt;&lt;/li&gt;
              &lt;li class="single"&gt;&lt;a href="#"&gt;Science PC&lt;/a&gt;&lt;/li&gt;
              &lt;li class="single"&gt;&lt;a href="#"&gt;Physics&lt;/a&gt;&lt;/li&gt;
              &lt;li class="single"&gt;&lt;a href="#"&gt;Construction&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;&lt;/td&gt;
  </code></pre>
  
  <p>This is the cell from the table with the hard-coded popup. The first list contains the normal, visible events. The div containing the second div is the popup. It should be displaying over the multi-day event:</p>
  
  <pre><code>&lt;td valign="top" class="blank"&gt;&lt;div&gt;
      &lt;div class="date"&gt;2&lt;/div&gt;
      &lt;ul&gt;
          &lt;li style="background-color:plum;"&gt;&amp;nbsp;&lt;img src="endr.png" alt="." /&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;&lt;/td&gt;
  </code></pre>
  
  <p>I'm using list items to "fake" the multi-day event. The li in this day is styled to be the section of the bar seen to render over the popup in IE 6 and 7.</p>
  
  <p>The CSS relating to the popup:</p>
  
  <pre><code>.popup {
  position:absolute;
  top:-1px;
  background-color:white;
  border:1px solid black;
  overflow:visible;
  padding:10px;
  width:auto;
  z-index:1;
  margin-left:-1px;
  }
  </code></pre>
  
  <p>And to the multi-day event:</p>
  
  <pre><code>li {
  margin:2px 0;
  padding:0 0 2px 5px;
  white-space:nowrap;
  }
  </code></pre>
  
  <p>I've tried to fix this problem by searching Google repeatedly and trying other Q&amp;A sites.</p>
  
  <p>Any help would be greatly appreciated!</p>