Problème de compatibilité firefox/ie

Bonjour !

Je suis en train de travailler sur ce site, dont le résultat me convient sur firefox, mais ne marche pas sous IE : http://www.tom-portfolio.fr/civel

Il s'agit d'un menu à défilement horizontal, au passage de la souris, les menus se décalent pour laisser apparaitre la page en question et son contenu.

Du côté html, j'ai fait ca de la façon suivante:

<div id="imageMenu">
  <ul>
    <li class="qui">
       <div class="qui">
           <!-- contenu de la page -->
       </div>
    </li>
        <li class="img1">
       <div class="img1">
           <!-- contenu de la page -->
       </div>
    </li>
    <!-- etc pour les 8 menus -->
 
  </ul>
</div>
 

Tout fonctionnait très bien sur les 2 explorateurs jusqu'à ce que j'ajoute la dernière balise div. Celle-ci semble empêcher le slide du menu sous IE. Que faire ? ais-je omis quelque chose dans la feuille de style ?

le CSS :

#imageMenu {
	width: 990px;
	height: 532px;
	overflow: hidden;
}
 
 
 
#imageMenu ul {
	margin: 0px;
	padding:0;
	height: 532px;
	width: 2500px;
	}
 
#imageMenu ul li {
	float: left;
	height: 532px;
	display:block;
	
}
 
#imageMenu ul li div {
	height: 532px;
	background-color:#FFFFFF;
	padding:0;
 
}
 
#imageMenu ul li.qui {
	background: url(../images/quisommesnous_06.jpg) no-repeat scroll 0%;
	width:74px;
 
}
 
#imageMenu ul li.qui div {
    width: 650px;
    margin-left: 280px;
	
}
 
#imageMenu ul li.img1 {
	background: url(../images/dim_08.jpg) no-repeat scroll 0%;
	width:128px;
}
#imageMenu ul li.img1 div {
    width: 650px;
    margin-left: 132px;
}
 
<!-- etc pour les 8 autres menus -->

De toute évidence, je dois modifier ça :

#imageMenu ul li div {
	height: 532px;
	background-color:#FFFFFF;
	padding:0;
 
}

J'ai essayé d'ajouter tous les position:relative, absolute etc, ça n'y fait rien. Le div bloque complètement le slide sous IE. Sauriez-vous ce que je peux faire pour remédier à ça ?

Merci d'avance !
Tom'

Salut,

28ToM47 a écrit :
Je suis en train de travailler sur ce site, dont le résultat me convient sur firefox...

Ah ! Et le fait qu'il soit inaccessible avec JavaScript désactivé/indisponible ne te pose pas de problème ?

Même question concernant l'ergonomie (navigation au clavier impossible, affichage du contenu sur le :hover très discutable...) ?

Ceci pour te rappeler qu'Alsacréations est dédié aux standards du web et à l'accessibilité.

Merci pour ta réponse, même si elle ne répond pas à ma question ^^

a écrit :
Ah ! Et le fait qu'il soit inaccessible avec JavaScript désactivé/indisponible ne te pose pas de problème ?

Effectivement, c'est un problème, on m'en a déjà parlé, mais j'avais pour commande un site dynamique. A choisir entre flash et JS. J'ai pris JS: Flash aurait été trop lourd car j'aurais fait ça comme un barbare, je n'ai pas assez de connaissances pour faire un full site flash.

a écrit :
Même question concernant l'ergonomie (navigation au clavier impossible, affichage du contenu sur le :hover très discutable...) ?

Deuxième fois, tu as raison. J'y ai pensé et le rollover sera remplacé par un click, et au passage de la souris, la teinte des images changera pour faire comprendre à l'utilisateur qu'il peut cliquer, et le curseur de la souris passera en pointeur.
Pour la navigation au clavier, le concept n'est pas fait pour ça. Certes l'utilisateur au premier abord fera un backspace par réflex et sera ramené sur sa page précédente. Il comprendra que le site n'est pas fait pour ça. C'est un problème mais je n'ai pas de solution ^^

a écrit :
Ceci pour te rappeler qu'Alsacréations est dédié aux standards du web et à l'accessibilité.

Je suis entièrement d'accord avec ce principe, je suis étudiant et je m'efforce au cours de mes créations de travailler sur l'accessibilité, la compatibilité avec tous les navigateurs et les configurations. Toutefois, si un petit coup d'oeil pouvait tout de même être jeté sur mon problème, ça me rendrait grandement service !

Merci en tout cas pour ce forum qui m'a l'air d'être une grande base d'informations !