Tworzę prototyp kalendarza opartego na tabelach CSS / XHTML, który ostatecznie zostanie wygenerowany za pomocą PHP dla systemu zarządzania treścią Simple Updates. Wystąpił problem z użyciem pozycjonowania bezwzględnego do utworzenia wyskakującego okienka, które pokazywałoby wszystkie zdarzenia w dniu, w którym jest więcej niż zmieści się w komórce. Problem można zobaczyć tutaj:

http://sutest.bravehost.com/

Jak widać, wyskakujące okienko pojawia się w ramach wielodniowego wydarzenia i daty w IE7 i IE6. Umieszczenie indeksu Z na wyskakującym okienku rozwiązało problem w Firefoksie. Próbowałem umieścić wszystkie rodzaje wartości indeksu Z w wyskakującym okienku, zmieniając właściwość wyświetlania wyskakującego okienka i powiązanego elementu, a także wiele innych zróżnicowanych podejść, bez powodzenia.

HTML jest następujący:

<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>

Jest to komórka z tabeli z zakodowanym wyskakującym oknem. Pierwsza lista zawiera normalne, widoczne zdarzenia. Div zawierający drugi div to popup. Powinien być wyświetlany podczas wydarzenia wielodniowego:

<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>

Używam elementów listy do „sfałszowania” wydarzenia wielodniowego. Li w tym dniu jest stylizowany na sekcję paska widocznego do renderowania nad wyskakującym okienkiem w IE 6 i 7.

CSS odnoszący się do 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;
}

I na wielodniowe wydarzenie:

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

Próbowałem rozwiązać ten problem, wielokrotnie przeglądając Google i wypróbowując inne witryny z pytaniami i odpowiedziami.

Każda pomoc byłaby bardzo mile widziana!