Menu sous ie6-7

[Soull]

Bonjour,

Dans le cadre de mon stage, je dois faire des modifs sur le site de ma boite. Je suis très mauvais en css et je ne trouve pas de solutions à mon problème:

IE 6 & 7 ne mettent une sorte de tabulation devant mes menus.

Ce sera plus compréhensible sur le site: http://lti.eu/index.php

Quand vous passez la sourie sur un menu, par exemple Accueil, la "boite" est remonté et "Accueil du site de LTI" apparais. Comme vous le voyez sous ie, il y a un petit décalage, c'est moche donc il faut que je corrige ça.

Je vous donne le ccs correspondant:

Code :

1
2
3
4
5
6
7
8
9
10
11
a.ref{color:#888;text-decoration:none;text-shadow:1px 1px 1px#000;position:absolute;bottom:10px;right:10px}
a.ref:hover{color:#000}
a.back{width:184px;height:0;position:absolute;bottom:10px;left:0;background:transparent url(../back.png)no-repeat top left}
.container{width:800px;height:135px;position:absolute;margin-top:-20px;margin-left:40px;overflow:hidden}
ul#menu{list-style:none;position:absolute;bottom:0px;left:0px;font-size:28px;font-family:Helvetica,Arial,sans-serif;font-weight:bold;color:#999;letter-spacing:-2px}
ul#menu li{float:left;margin-left:10px;}
ul#menu a{cursor:pointer;position:relative;float:left;bottom:-110px;left:-38px;line-height:20px;width:80px;text-decoration:none;padding-left:40px;}
ul#menu span.title{padding:1px 0 0 0;display:block;height:26px;text-shadow:1px 1px 1px#000;color:#B7B7B6;text-indent:10px;}
ul#menu span.description{width:90px;height:80px;background-color:#B7B7B6;border:3px solid #fff;color:#fff;display:block;font-size:18px;padding:10px;-moz-box-shadow:1px 1px 6px#000;-webkit-box-shadow:1px 1px 6px#000;-moz-border-radius:10px;-webkit-border-radius:10px;}
ul#menu a:hover span.description{background-color:#54504F}
ul#menu a:hover span.title{color:#54504F}

Pour le moment, j'ai juste changer "padding:1px 0 0 0;" pour éviter que le texte ne sois couper.

Si vous avez une idée, merci d'avance.