Problemi con posizionamento assoluto/Indice Z con elenchi e tabelle in IE 6 e 7

Question

Sto creando un prototipo di un calendario basato su tabelle CSS/XHTML che alla fine verrà generato con PHP per il sistema di gestione dei contenuti Simple Updates . Ho avuto un problema con l'utilizzo del posizionamento assoluto per creare un popup che mostrava tutti gli eventi in un giorno in cui ci sono più di quelli che si adattano a una cella. Il problema può essere visto qui:

http://sutest.bravehost.com/

Come si può vedere, i POP popup sotto l'evento di più giorni e la data sia in IE7 e IE6. Mettere uno z-index sul popup ha risolto il problema in Firefox. Ho provato a inserire tutti i tipi di valori z-index sul popup, modificando la proprietà display del popup e dell'elemento correlato, oltre a molti altri approcci vari, senza successo.

L'HTML è il seguente:

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

Questa è la cella dal tavolo con il popup hard-coded. Il primo elenco contiene gli eventi normali, visibili. Il div che contiene il secondo div è il popup. Dovrebbe essere visualizzato sopra l'evento di più giorni:

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

sto usando voci di elenco di "falsi" l'evento di più giorni. La Li in questo giorno è in stile per essere la sezione della barra visto per rendere più di popup in IE 6 e 7.

Il CSS relativo alla comparsa:

.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 per il multi-giorno evento:

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

ho cercato di risolvere questo problema con la ricerca di Google più volte e cercando altri Q & siti a.

Qualsiasi aiuto sarebbe molto apprezzato!

Answer 1

L'utilizzo di position: relative imposta un nuovo contesto di sovrapposizione z-index all'interno dell'elemento relativo posizionato in IE.

Gli elementi all'interno dell'elemento relativamente posizionato verranno impilati in base al loro z-index, ma quando si interagisce con elementi esterni all'elemento padre, viene utilizzato lo z-index padre.Questo è il motivo per cui il popup mostra sotto l'elemento evento di più giorni (perché anche se non c'è un esplicito z-index sull'elemento, gli elementi che arrivano "più tardi" nel documento implicitamente hanno un valore più elevato z-index di quelli precedenti)

A risolvere il problema, è possibile

• Non utilizzare position-relative sulla cella e posizionare il popup relativo all'intero documento
• Dare il contenitore <div> un più alto z-index rispetto a quello più avanti nel documento.

ho trovato che la modifica del z-index programmazione con JavaScript per essere migliore, dal momento che riduce al minimo le interazioni strane con il resto della pagina (ad esempio impostare l'z-index più alto quando viene aperto, e ripristinare di nuovo a quando di default è chiuso)

alcuni post del blog che parlano di questo problema:

• http://annevankesteren.nl/2005/06/z-index
• http://verens.com/archives/2005/07/15/ie-z-index-bug/

Answer 2

Si potrebbe provare a impostare lo z-index dell'elemento contenitore. Quindi, il tuo popup avrebbe uno z-index di 1 (o 2) e il tuo contenitore avrebbe uno z-index di 0 (o 1).

Answer 3

Non sono sicuro se questo aiuterà, ma la proprietà z-index si applica agli elementi che sono posizionati, relativa, assoluta, fissata http://www.w3schools.com/Css/pr_pos_z-index.asp

Edit: Il che significa che l'elemento li potrebbe ignorare completamente lo ...

Answer 4

Hai provato a inserire uno z-index inferiore sull'evento di più giorni e sugli elementi di data rispetto allo z-index sul div popup? Inoltre, assicurati che qualsiasi elemento con l'attributo z-index abbia posizione: assoluta (quindi potrebbe essere necessario giocare un po 'con i problemi di layout).

Answer 5

Se si sta facendo questo tavolo con un certo linguaggio di programmazione come PHP, .NET, ecc

Si può fare qualcosa di simile:

contare le righe totali della tabella, quindi iniziare a Z -Indice con questo totale, quindi diminuisci il contatore fino all'ultima riga. In questo modo, la prima riga avrà il massimo indice z e l'ultima riga sarà inferiore.

<table> position relative 
<tr> nothing 
<td> nothing 
<div> position relative 
<element position absolute> 
</div> 
</td></tr></table> 

---- 
Table Loop: 

$nZ = count($resource); 
foreach($resource as $line) { 
<tr><td> 
    <div style="z-index: $nZ">content</div> 
</td></tr> 
$nZ--; // Decrement nZ 
} 
---- 

C ya!