Texte déroulant, problème avec ie6

Bonjour,

J'affiche dans une page une liste de personnes, pour lesquelles sont écrits les num de téléphone et adresses emails directement.
J'ai souhaité rajouter une petite description pour chaque personne, mais qui ne s'affiche que lorsque l'on clique sur le nom de la personne (ou plutot sur une petite icone "+" à coté du nom). Pour cela, je me suis référé à un exemple sur le net de menu déroulant qui utilise jQuery.

Seulement voilà, je suis finalement arrivé à mes fins, sauf que, après avoir testé sur IE6, j'ai évidemment un problème, à savoir que pour cette page uniquement, le pied de page ne s'affiche pas. Si je désactive javascript dans ie6, là il s'affiche.

Ma page est structuré avec une bannière en haut, un menu à gauche (position absolute), du contenu au milieu à hauteur variable, puis le pied de page. Il me semble que IE6 réserve d'emblée une hauteur comme si tous les sous-éléments de ma liste étaient affichés. Du coup, vu qu'ils ne sont pas affichés, la page est coupée après la fin de ce qui est affiché, sans le pied de page. Sous ff et Safari tout est ok.

code javascript:

<script type="text/javascript">
<!--
$(document).ready( function () {
    // On cache les sous-menus :
    $(".menu_deroulant p.subMenu").hide();
    // On sélectionne tous les items de liste portant la classe "toggleSubMenu"

    // et on remplace l'élément span qu'ils contiennent par un lien :
    $(".menu_deroulant li.toggleSubMenu span").each( function () {   
				$(this).replaceWith('<a class="expand" href="" title="Afficher le sous-menu"></a>') ;
    } ) ;

    // On modifie l'évènement "click" sur les liens dans les items de liste
    // qui portent la classe "toggleSubMenu" :
    $(".menu_deroulant li.toggleSubMenu > a").click( function () {
				// Si le sous-menu était déjà ouvert, on le referme :
        if ($(this).next("p.subMenu:visible").length != 0) {
            $(this).next("p.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
        }
        // Si le sous-menu est caché, on ferme les autres et on l'affiche :
        else {
           $(".menu_deroulant p.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
           $(this).next("p.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") });
        }
				
        // On empêche le navigateur de suivre le lien :
        return false;
    });    


} ) ;
// -->
</script>

Code html (la liste de personnes uniquement):

<ul class="menu_deroulant">
    <li class="toggleSubMenu"><strong>Robert Redford</strong> <span></span>
        <p class="subMenu">
          Acteur américain<br />
          Blond, filmographie: blah blah blah<br />
      	</p>
        <p class="normal">
        	T&eacute;l. 01 02 03 04 05<br />
        	Email: <a href="mailto:robertredford@yahoo.fr">robertredford@yahoo.fr</a><br />
        </p>
    </li>
    <li class="toggleSubMenu"><strong>Barack Obama</strong><span></span>
        <p class="subMenu">
         Président américain<br />
          grand, bio: blah blah blah<br />
        </p>
        <p class="normal">
        	T&eacute;l. 01 02 03 04 05<br />
        	Email: <a href="mailto:barackobama@yahoo.fr">barackobama@yahoo.fr</a><br />
        </p>
    </li>
</ul>

(J'ai oté du contenu pour pas faire trop long..)
Et le css pour le div qui contient tout ça:

#text {
	background: url(../images/bande_haut.jpg) no-repeat top right;
	position: relative;
	width: 640px;
	border: 0;
	margin-left: 200px;
	margin-right: 150px;
	height: 530px;
}
html>body #text{
	background: url(../images/bande_haut.jpg) no-repeat top right;
	width: 640px;
	border: 0;
	margin-left: 200px;
	margin-right: 150px;
	height: auto;
	min-height: 530px;
}

Voilà, j'ai mis ce post dans la section javascript, et je suis loin d'un expert en javascript. Ceci dit, je ne suis pas sûr que ce soit un problème du javascript.
L'un de vous aurait-il des idées pour résoudre ce problème?

Merci d'avance!
Modifié par maelito (17 Nov 2008 - 19:23)