Ich erstelle einen Prototyp eines auf CSS / XHTML-Tabellen basierenden Kalenders, der schließlich mit PHP für das Content-Management-System Simple Updates generiert wird. Ich habe ein Problem mit der Verwendung der absoluten Positionierung, um ein Popup zu erstellen, das alle Ereignisse an einem Tag anzeigt, an dem mehr als in eine Zelle passen. Das Problem ist hier zu sehen:

http://sutest.bravehost.com/

Wie Sie sehen, wird das Popup unter dem mehrtägigen Ereignis und Datum in IE7 und IE6 angezeigt. Das Setzen eines Z-Index im Popup behebt das Problem in Firefox. Ich habe versucht, alle möglichen Z-Index-Werte in das Popup einzufügen, die Anzeigeeigenschaft des Popups und des zugehörigen Elements sowie viele andere unterschiedliche Ansätze zu ändern, ohne Erfolg.

Der HTML-Code lautet wie folgt:

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

Dies ist die Zelle aus der Tabelle mit dem fest codierten Popup. Die erste Liste enthält die normalen, sichtbaren Ereignisse. Das Div, das das zweite Div enthält, ist das Popup. Es sollte während des mehrtägigen Ereignisses angezeigt werden:

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

Ich verwende Listenelemente, um das mehrtägige Ereignis zu "fälschen". Das Li an diesem Tag ist so gestaltet, dass es den Abschnitt der Leiste darstellt, der über dem Popup in IE 6 und 7 dargestellt wird.

Das CSS zum 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;
}

Und zur mehrtägigen Veranstaltung:

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

Ich habe versucht, dieses Problem zu beheben, indem ich Google wiederholt durchsucht und andere Q & A-Sites ausprobiert habe.

Jede Hilfe wäre sehr dankbar!