Souci de z-index (je crois) et de différence IE - FF

Salut à tous,

J'essaye de réaliser une sorte de galerie d'images où chaque image serait un lien et où au survol de l'image s'affiche en dessous de celle-ci un cadre avec des infos. Ce cadre doit s'afficher sans déplacer les autres images et bien sur par dessus ces autres images.

Après beaucoup de tentatives j'ai trouvé un truc qui marche sauf que....
Sous FF pas de soucis mais sous IE le cadre s'affiche en dessous des autres images.

Je dois avouer que je ne maîtrise pas vraiment les subtilités du css, alors je fais des test successifs jusqu'à ce que ça marche mais là j'y arrive pas.

Voici mon css:

<style type="text/css">
<!--
a.info{
	position:relative;
	z-index:0;
	color:#ffffff;
	text-decoration:none;
	display: block;
	height: 90px;
	width: 220px;
	padding: 0px;
	margin:0px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999999;
}
a.info:hover{
	z-index:1;
	background-color:#ffffff;
}
a.info span{
	display: none;
	z-index:126;
}
a.info:hover span{
	display:inline;
	position:absolute;
	width:212px;
	border:1px solid #CCCCCC;
	background-color:#000000;
	color:#999999;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 12px;
	margin-top: 106px;
	margin-left: -221px;
	font-weight: normal;
	padding: 4px;
	z-index:1000;
}
* html a.info:hover span{ /*Un hack pour qui IE affiche ça au lieu de celui du dessus*/
	display:inline;
	position:absolute;
	width:212px;
	border:1px solid #CCCCCC;
	background-color:#000000;
	color:#999999;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 12px;
	margin-top: 106px;
	margin-left: -225px;
	font-weight: normal;
	z-index:1000;
}
.tab-realisations {
	margin: 4px;
	border: 1px solid #CCCCCC;
	height: 106px;
	padding: 0px;
	line-height: 1px;
}
* html .tab-realisations {
	border: 1px solid #CCCCCC;
	height: 106px;
	margin-top: 4px;
	margin-right: 2px;
	margin-bottom: 4px;
	margin-left: 2px;
	padding: 0px;
	line-height: 1px;
}
.div-date-realisations {
	height:16px;
	text-align:left;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	line-height: 16px;
	vertical-align: top;
	margin: 0px;
	padding: 0px;
}
-->
</style>

Voici comment j'affiche mes images:

<div style="float:left;">
<table border="0" align="left" cellpadding="0" cellspacing="0" class="tab-realisations">
<tr>
<td style="margin:0px; padding:0px; line-height: 1px;">
<a class="info" href="index.php?mod=realisations&amp;ac=visite&amp;id='.$id.'" onClick="window.open(this.href,\'\',\'directories = no,location = no,menubar = no,resizable = yes,scrollbars = yes,status = no,toolbar = yes,left=\'+(screen.availWidth/2-400)+\',top=\'+(screen.availHeight/2-400)+\',width=\'+(screen.availWidth)+\',height=\'+(screen.availHeight)+\'\');return false;">
<img src="'.$image.'" alt="'.$nom.'" name="'.$nom.'" width="220" height="90" border="0" />
<span>
	<p>
	'.$nom.'	
	</p>
	'.bbcode($descript,$smileys,1).'
	<p>
	Visites:&nbsp;'.$hit.'	
	</p>
	</span></a></td>
</tr>
<tr>
<td>
<div class="div-date-realisations">'.$date.'</div></td>
</tr>
</table>
</div>

si quelqu'un pouvait m'écliarer car là je plante complet.....