Hidden Layer parzialmente nascosto

[deleted_id_48586]

Ciao a tutti,

avrei un problemino con un semplice codice che permette, in una photogallery, di mostrare un layer nascosto (per ciascuna immagine).

Con Internet Explorer (6 e 7) accade appunto che parte di questo DIV stia sotto alle immagini accanto mentre non avviene con FF e Opera.

Posto sia il codice che una schermata per presentare il problema.

#gallery table.soloFoto td {
   width:100px;
   height:100px;
   padding:4px;      
}

#gallery table.soloFoto .overlib {
    width:100px;
    height:100px;    
	position:relative;    
}

#gallery table.soloFoto .fotoOverlib {
    position:absolute;
    top:30px;
    left:30px;
    width:150px;
    padding:5px;
    background:#FFFFFF;
    border:1px solid #333333;
    display:none;
    z-index:2;
}


<table class="soloFoto">
<tr>
<td>
<div class="overlib">		
[img]img/foo.gif[/img]						                                             					                                                    
<div id="foto0" class="fotoOverlib" onmouseover="javascript:show('foto0');" onmouseout="javascript:hide('foto0');">    													
<div>[img]img/foto_overlib.jpg[/img]</div>
<h3>Jaguar XJ</h3>


Parole chiave:

Lusso, Berline, Jaguar, Modelli 2007,
</p>
</div>															
</div>
</td>

<td>
<div class="overlib">		
[img]img/foo.gif[/img]		                                                    
<div id="foto1" class="fotoOverlib" onmouseover="javascript:show('foto1');" onmouseout="javascript:hide('foto1');">    													
<div>[img]img/foto_overlib.jpg[/img]</div>
<h3>Jaguar XJ</h3>


Parole chiave:

Lusso, Berline, Jaguar, Modelli 2007,
</p>
</div>															
</div>
</td>

<td>
<div class="overlib">		
[img]img/foo.gif[/img]															                                                    
<div id="foto2" class="fotoOverlib" onmouseover="javascript:show('foto2');" onmouseout="javascript:hide('foto2');">    													
<div>[img]img/foto_overlib.jpg[/img]</div>
<h3>Jaguar XJ</h3>


Parole chiave:

Lusso, Berline, Jaguar, Modelli 2007,
</p>
</div>															
</div>
</td>

<td>
<div class="overlib">		
[img]img/foo.gif[/img]			                                                    
<div id="foto3" class="fotoOverlib" onmouseover="javascript:show('foto3');" onmouseout="javascript:hide('foto3');">    													
<div>[img]img/foto_overlib.jpg[/img]</div>
<h3>Jaguar XJ</h3>


Parole chiave:

Lusso, Berline, Jaguar, Modelli 2007,
</p>
</div>															
</div>
</td>

</tr>										
</table>

[deleted_id_48586]

Ho provato ad impostare uno z-index inferiore per #gallery table.soloFoto .overlib ma non sembra funzionare:

[deleted_id_48586]

Up?