Image map en css

Bonjour!
voila j'ai testé le tuto sur comment faire une image map en css qui est disponible sur le site!
Le tuto marchait très bien jusqu'à ce que je regarde le résultat dans Internet explorer!
Tous les div définis ne sont plus à la bonne place!!!
alors que dans mozilla tout allait bien!

aurais-je oublié quelque chose? est ce normal?
Que faire alors?

Merci de votre aide!

Difficile de voir si tu as oublié quelque chose si tu ne poste pas un lien vers ta page

ah oui c'est vrai!
dans style.css j'ai mis ca:

#titre a {
   position: absolute;
   height: 7px;
   width: 68px;
   top: 298px; 
   text-decoration: none;
   }

#titre a i { visibility: hidden; }

#titre a:hover { border: 1px dotted #9A97A0;  }
#titre a:visited, a:link { text-decoration: none; border: 0px; }


a#home { left: 4px; width: 25px; }
a#rules { left: 48px; width: 29px; }
a#codes { left: 96px; width: 29px; }
a#join { left: 144px; width: 21px; }
a#update { left: 184px; width: 35px; }
a#members { left: 238px; width: 45px; }
a#more { left: 302px; width: 35px; }

et dans la page html:

<div id="titre">
    <a id="home" href="index.php" title="HOME"></a>
    <a id="rules" href="rules.php" title="RULES"></a>
    <a id="codes" href="codes.php" title="CODES"></a>
    <a id="join" href="join.php" title="JOIN"></a>
    <a id="update" href="update.php" title="UPDATE"></a>
    <a id="members" href="members.php" title="MEMBERS"></a>
    <a id="more" href="more.php" title="MORE"></a>
    </div>

et tou fonctionne comme il faut dans mozilla!

En fait j'avais tout mis dans un conteneur global centré!

Quand je mets les margin-left et margin-top du conteneur global centré à 0 tout est aligné à gauche et la ca marche sous ie et mozilla!
mais quand je laisse les marges à auto pour que ce soit centré, la ca ne marche plu sous ie!!

De plus la bordure dans a:hover a bien la hauteur du texte(7px) et dans IE elle dépasse en dessous du texte!

je comprends pu rien :'(