Salve a tutti,

ci ho sbattuto la testa per tutto il week end ma ora sono alla frutta e oltre.
Spero qualcuno possa aiutarmi a capire cosa c'è che non va in questa gallery che sto realizzando.
Premetto che sono partita da una gallery che avevo già usato in altre occasioni che però ho modificato per adattarla al nuovo uso, purtroppo con le modifiche che ho inserito non funziona più su Explorer.

Ho una lista con immagine unica di background, che graficamente si presenta come una serie di thumbnail.
All'hover su ogni thumbnail si deve aprire lo zoom con un ingrandimento il tutto gestito solo da css.
Funziona con tutti i browser (sia Win che Mac) tranne il bastardissimo Explorer.

Questo è il codice html:
<ul class="hotLinkNewGallery">
<li class="hotLink hotLink1"><span></span>
<li class="hotLink hotLink2"><span></span>[/list]
Questo il css:
ul.hotLinkNewGallery {
position:relative;
width:615px;
height:205px;
list-style:none;
margin:0;
padding:0;
background:url(../my_images/bg_gallery.jpg) center top no-repeat;
}
li.hotLink, li.hotLink a {
position:absolute;
/* border:1px none #FFFFFF;
*/ top: 1px;
}
li.hotLink a span {
display:inline;
}
li.hotLink a:hover {
/* border: 1px solid #FFFFFF;*/
}
ul.hotLinkNewGallery:hover li {
border: none;
}
li.hotLink a:hover span{
display:block;
position:absolute;
background-color:#FFFFFF;
border: none;
}
li.hotLink a:link, a:visited, a:hover, a:active {
text-decoration:none;
color:#333333;
}
li.hotLink1 a{
top:0px;
left:155px;
width:150px;
height:100px;
}
li.hotLink1 a:hover span{
width: 400px;
height: 300px;
top:80px;
left:50px;
background:url(../my_images/gal_img1_big.jpg) center no-repeat;
}
li.hotLink2 a{
top:0px;
left:310px;
width:150px;
height:100px;
background:trasparent;
}
li.hotLink2 a:hover span{
width: 400px;
height: 300px;
top:80px;
left:50px;
background:url(../my_images/gal_img2_big.jpg) center no-repeat;
}
Io ormai dopo 2 giorni di tentativi sono alle lacrime ...spero qualcuno possa illuminarmi...grazie!