JQuery : Pb affichage du Menu accordeon avec IE

Bonjour tout le monde,
J'ai essayé d'integrer un menu en accordeon dans mes pages. Sur Firefox le menu s'affiche convenablement mais sur IE l'affichage n'est pas bon. voici le lien :
http://www.meddeb.org/sarracard/test/sarracard.html
essayez le sur IE et vous allez voir le probleme. Je vous rappelle que j'utilise Jquery.
Merci d'avance




voici le code CSS :

<!-- ************* le code css du site en general *******************-->
body{

background:url(../images/arr_plan.gif);

}
.top-element{
background-image:url(../images/banner.jpg) ;

height:316px;
}

.container{




}

.menu{
background-image:url(../images/arr_plan_menu.gif);


}
.partenaire{
margin-left:15px;

}

.highlight{
background-image:url(../images/banner.jpg) ;
margin-left:20px;
}


.banner_droite{
background:url(../images/banner_droite.gif) no-repeat;
height:160px;
padding-bottom:10px;
}


.oneclic{
font-family: Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
text-decoration: none;

}

.oneclic:hover {
font-family: Arial, Helvetica, sans-serif;
color:#C7C7C7;
font-size:11px;
font-weight:bold;
text-decoration: none;
}

.content{
border:1px solid #666666;
margin-left:15px;
font-family: "Trebuchet MS", Helvetica, sans-serif, Verdana;
color:#000033;
font-size:14px;
text-decoration: none;
}

.banner_title{

padding-left: 10px;
font-family: "Trebuchet MS",Helvetica, sans-serif, Verdana;
font-weight:bold;
font-stretch:semi-condensed;
color:#FF9934;
font-size:14px;
text-decoration: none;
}












<!-- ************* le code css du menu *******************-->
.navigation {
margin: 0;
padding: 0;
background: #0661A7 url(../images/pointille.gif) repeat-x bottom;
list-style: none;
background: #217765;
color: #fff;
width: 182px;
margin-left:7px;
margin-bottom:0px;
font: 1.2em "Trebuchet MS", sans-serif;
}
.navigation a, .navigation span {
display: block;
padding: 4px 20px;
color: #fff;
text-decoration: none;
background: #0661A7 url(../images/btn.gif) left bottom no-repeat;
}
.navigation .toggleSubMenu a, .navigation .toggleSubMenu span {
background-image: url(../images/btn.gif);
}
.navigation .open a, .navigation .open span {
background-image: url(../images/btn.gif);
}
.navigation a:hover, .navigation a:focus, .navigation a:active {
text-decoration: underline;
}
.navigation .subMenu {
font-size: .8em;
background: #FF9934;
font-size: .9em;
margin: 0;
padding: 0;
border-bottom: 1px solid #666;
}
.subMenu li {


}

.navigation ul.subMenu a {
background: none;
padding: 3px 20px;
}






<!-- ************* le code css de l'animation des images *************-->

.pics {
height: 160px;
width: 160px;
margin-left:10px;
margin-top: 10px;

}

.pics img {
padding: 5px;
border: 1px solid #ccc;
background-color: #eee;
width: 160px;
height: 107px;
top: 0;
left: 0
}

Salut,

La première chose à faire quand tu as un problème sur une page web, c'est de tester la validité de ton code. Dans le cas de ta page, tu verras très vite que la première erreur est de ne pas déclarer de doctype.

En clair, la première ligne de ton code est invalide, et cette erreur particulière fait supposer aux navigateurs que le reste du code ne va pas être mieux. Ils décident donc de ne pas traiter ta page "en confiance" mais passent dans un mode dit de compatibilté (quirks) dans lequel ils considèrent que tu codes comme dans les années 90, et qu'il leur faut donc interpréter ta page comme à l'époque (et c'était pas brillant). Ajoute à cela que, le mode de compatibilité n'étant pas normé, chaque navigateur a sa propre implémentation, et tu comprendras que tu as tout intérêt à rester du bon côté de la barrière...

Merci Marc de votre réponse,
j'ai fais la validation et il me reste juste 7 erreurs que je ne comprend pas leur provenance. Bref, mon probleme reste tjr comment corriger le css pour que IE puisse afficher mon menu correctement. Je ne suis pas très bon en CSS, j'ai pris le code et l'ai inséré nativement dans ma page. Donc s'il vous plait, je vous prie de jeter un coup d'oeil sur le code css et me dire comment le corriger.

Tu viens de faire connaissance avec le côté abscons de la Force , j'ai nommé le hasLayout. (Tada !)

Tu dis n'être pas super bon en CSS donc on va se passer d'explications (que je ne suis même pas sûr de pouvoir te donner correctement, d'ailleurs). Sache simplement que IE, jusqu'à sa version 7 (incluse), considère que les liens de ton menu n'ont pas à être affichés comme on pourrait s'y attendre. Pour cela, il faut que tu leur donnes explicitement une hauteur, une largeur, ou d'autres propriétés parmi une liste bien définie. Applique donc une de ces propriétés CSS aux liens de ton menu, et ton problème s'évanouira (j'espère )