Problème d'affichage sous IE7

Bonjour,

J'ai un gros souci d'affichage de balise span, en faite cela fonctionne bien sous Firefox mais sous IE7 elle s'affiche mais sous mon div id centre. voir lien ci-contre http://www.philippesoriano.net


La CSS

[code]/*debut des parametres des onglets de navigations*/
#nav {
width: 800px;
height: 37px;
background-repeat: no-repeat;
background-image: url("Images/nav2.png");
}

.conteneur {
padding-left: 40px;
}

ul#onglets {
list-style-type: none;
position: absolute;
margin-top: 0.75em;
}

ul#onglets li {
float: left;
}

ul#onglets a {
display: block;
width: 9em;
height: 2em;
font-family: Verdana, sans-serif;
font-size: 70%;
font-weight: bold;
text-align: center;
text-decoration: none;
line-height:20px;
float:left;
}
ul#onglets a:link, ul#onglets a:visited {
color: #041623;
border-top: 1px solid #7f8fbb;
border-left: 1px solid #002472;
border-right: 2px solid #bac2cb;
}

ul#onglets a:active,
ul#onglets a.here:link,
ul#onglets a.here:visited,
ul#onglets a:hover {
color: #ffffff;
background-color: #b73135;
border-bottom: 1px solid #b73135;
border-top: 2px solid #002472;
border-right: 1px solid #bac2cb;
border-left: 2px solid #002472;
}


a {
text-decoration: none;
}
a:hover {
background: none;
}
a span {
display: none;
}
a:hover span {
display: inline;
position: absolute;
top: -20px;
left: 100px;
width: 200px;
height: 100px;
background: green;
text-align: center;
color: white;
z-index: 200;
}
.text {
font-weight: normal;
padding-left: 5px;
padding-top: 6px;
padding-bottom: 6px;
}

.acc {
position: absolute;
top: 8px;
left: 8px;
width: 225px;
height: 80px;
border: 1px dashed #e90820;
font-weight: normal;
padding-left: 5px;
padding-top: 6px;
padding-bottom: 6px;
color: #e90820;
font-size: 0.9em;
background: #f8eaea;
text-align: center;
}
/*fin des parametres des onglets de navigations*/






/*debut des parametres du blocmiddle*/
#middle{
background-image: url("Images/millieu.png");
background-repeat: repeat-y;
height: 300px;
}

/*debut du texte centre, dans le bloc middle*/


#etiquettemenu {
top: 210px;
left: 260px;
width: 130px;
height:20px;
color:#041623;
position: absolute;
text-align: center;
font-size: 80%;
font-weight: bold;
font-family: Verdana, sans-serif;
line-height:21px;
background-image: url("Images/etiquette_menu.png");
background-repeat: no-repeat;
}
#conteneurcentre {
position: absolute;
top: 210px;
left: 410px;
margin: 0;
padding-left: 10px;
padding-right: 10px;
height: 270px;
width: 580px;
/*border: 1px dashed #002472;*/
background-image: url("Images/fond_centre.png");
background-repeat: no-repeat;
}

#centre {
top: 210px;
left: 260px;
width: 750px;
height: 280px;
position: absolute;
background-image: url("Images/fond_centre_acc.png");
background-repeat: no-repeat;
}

Comment faire pour régler ce problème???
merci pour votre aide

Salut,

D'après moi une erreur de conception, tu utilises trop de positionnement en absolute ce qui risque de te poser pas mal de problèmes ultérieurs.

Tu dois pouvoir régler ton problème

ul#onglets { 
list-style-type: none;
position: absolute;
margin-top: 0.75em;
z-index: 1000;

Mais c'est un emplâtre sur une jambe de bois