Problème d'affichage firefox et IE

Bonjour,
Voici maintenant 1semaine que je cherche la solution à mon problème et je vous assure que je glande. J'utilise une image de ma galerie et au passage du curseur sur l'image, une infobulle apparait à la place de l'image avec tous les détails de celle-ci. J'ai utiliser un petit script CSS en ligne que j'ai adapté à ma convenance mais j'ai tous les problèmes pour l'adapter à internet explorer. J'ai tenté un hack css qui décale le positionnement de l'infobulle. Suis encore débutant en CSS et je bidouille quelque peu.

######### CSS FIREFOX OK ############

a.info {
font-family: Tahoma,"Times New Roman",serif;
position: relative;
text-decoration: none;
/* border-bottom: 1px gray dotted; */ /* On souligne le texte. */
}
a.info span {
display: none; /* On masque l'infobulle. */
}
a.info:hover {
background: none; /* Correction d'un bug d'Internet Explorer. */
z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */
/* On change le curseur par défaut par un curseur d'aide. */
}
a.info:hover span {
display: inline; /* On affiche l'infobulle. */
position: absolute;
white-space: nowrap; /* On change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non désiré. */
top: -30px ; /* On positionne notre infobulle. */
left: 0px;
width: 112px;
height: 160px;
font-size: 10px;
color: #FFFFFF;
background: #111111;
padding: 3px;
border: 1px solid #333333;
opacity : 0.9;
text-transform: capitalize;
top: -153px !important ;

}

########## CSS HACK IE PAS OK ###############

a.info {
font-family: Tahoma,"Times New Roman",serif;
position: relative;
text-decoration: none;
/* border-bottom: 1px gray dotted; */ /* On souligne le texte. */
}
a.info span {
display: none; /* On masque l'infobulle. */
}
a.info:hover {
background: none; /* Correction d'un bug d'Internet Explorer. */
z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */
/* On change le curseur par défaut par un curseur d'aide. */
}
a.info:hover span {
display:block; /* On affiche l'infobulle. */
position:absolute;
white-space: nowrap;
top: 0px ; /* On positionne notre infobulle. */
width: 112px;
height: 160px;
font-size: 10px;
color: #FFFFFF;
background: #111111;
padding: 3px;
border: 1px solid #333333;
opacity : 0.9;
text-transform: capitalize;
}


J'ai vraiment besoin de votre aide.