Estou criando um protótipo de um calendário baseado em tabelas CSS / XHTML que eventualmente será gerado com PHP para o sistema de gerenciamento de conteúdo Simple Updates. Eu tive um problema com o uso de posicionamento absoluto para criar um pop-up que mostraria todos os eventos em um dia em que há mais de uma célula. O problema pode ser visto aqui:

http://sutest.bravehost.com/

Como você pode ver, o pop-up aparece sob o evento de vários dias e a data no IE7 e no IE6. Colocar um z-index no popup corrigiu o problema no Firefox. Eu tentei colocar todos os tipos de valores de índice z no pop-up, alterando a propriedade de exibição do elemento pop-up e relacionado, bem como muitas outras abordagens variadas, sem sucesso.

O HTML é o seguinte:

<td valign="top"><div>
    <div class="date">25</div>
    <ul>
        <li class="single"><a href="#">History</a></li>
        <li class="single"><a href="#">Biology</a></li>
        <li class="single"><a href="#">Computers</a></li>
        <li class="single"><a href="#">POTCH</a></li>
        <li class="single"><a href="#">Precal</a></li>
        <li class="more"><a href="#">+3 More</a></li>
    </ul>
    <div class="popup">
        <span class="close"><a href="#">X</a></span>
        <ul>
            <li class="single"><a href="#">History</a></li>
            <li class="single"><a href="#">Biology</a></li>
            <li class="single"><a href="#">Computers</a></li>
            <li class="single"><a href="#">POTCH</a></li>
            <li class="single"><a href="#">Precal</a></li>
            <li class="single"><a href="#">Science PC</a></li>
            <li class="single"><a href="#">Physics</a></li>
            <li class="single"><a href="#">Construction</a></li>
        </ul>
    </div>
</div></td>

Esta é a célula da tabela com o pop-up codificado. A primeira lista contém os eventos normais e visíveis. O div contendo o segundo div é o popup. Deve ser exibido durante o evento de vários dias:

<td valign="top" class="blank"><div>
    <div class="date">2</div>
    <ul>
        <li style="background-color:plum;">&nbsp;<img src="endr.png" alt="." /></li>
    </ul>
</div></td>

Estou usando itens de lista para "falsificar" o evento de vários dias. O li neste dia é estilizado para ser a seção da barra vista para renderizar através do popup no IE 6 e 7.

O CSS relacionado ao popup:

.popup {
position:absolute;
top:-1px;
background-color:white;
border:1px solid black;
overflow:visible;
padding:10px;
width:auto;
z-index:1;
margin-left:-1px;
}

E para o evento de vários dias:

li {
margin:2px 0;
padding:0 0 2px 5px;
white-space:nowrap;
}

Tentei corrigir esse problema pesquisando o Google repetidamente e tentando outros sites de perguntas e respostas.

Qualquer ajuda seria muito apreciada!