Problème de CSS menu horizontal avec IE7

Bonjour à tous et merci d'avance pour vos réponses éventuelles.

Voici mon site en ligne avec lequel j'ai un problème (suite à tous les tests de navigateur et de plateforme PC/MAC) avec IE7 : http://www.cruisingpartner.com

Visiblement, IE7 doit avoir un bug au niveau de l'alignement des blocks ou des listes. Sinon, tout fonctionne correctement sous les autres navigateurs...

Ci-dessous extrait du CSS de menu qui a été modifié... JA Purity de Joomla

Merci.

#ja-mainnav ul.menu {
border-right:1px solid #555555;
margin:0;
padding:0;
text-align:center;
}

#ja-mainnav li { <--- supprimer toute cette déclaration

}

#ja-mainnav ul.menu li {
display:inline-block;
background:none repeat scroll 0 0;
cursor : pointer;
list-style:none outside none;
margin:0;
padding:0;
position:relative;
}

Modifié par Florent V. (20 Apr 2010 - 19:15)

... On avance dans la réflexion et la propriété display:inline-block; du #ja-mainnav ul.menu li n'est pas reconnu par IE 7...

Des pistes ?

...suite... pour aligner le menu horizontalement et obtenir un résultat équivalent du display:inline-block; un commentaire conditionnel dans le head du index.php du template JA Purity :

<!--[if lte IE 7]>
<style type="text/css" media="screen , projection ">
#ja-mainnav ul.menu li {
display:inline;
zoom:1;}
}
</style>
<![endif]-->

... maintenant les sous-menus déroulants sont mal positionnés...

Des pistes ?

Merci d'avance....

...suite et toujours pas de solution...

IE reconnaît cette pseudo-classe hover que pour les balises A et donc je pensais qu'en appliquant dans le CC du head de index.php de JA putity cela :

.body {
behavior: url("http://www.cruisingpartner.com/csshover3.htc");
}

avec un lien vers le fichier csshover.htc, téléchargé ici : http://www.xs4all.nl/~peterned/csshover.html#changes

et bien sûr mis sur mon serveur préalablement...

Et nada !

Les sous-menus sont présents en permanence et quand je survole les menus ils apparaissent en décalé...

Des solutions ?

Je n'ai pas testé sous IE7 ou IE8, car pas de Windows sous la main. Quelques remarques tout de même:

IED Factory a écrit :
... On avance dans la réflexion et la propriété display:inline-block; du #ja-mainnav ul.menu li n'est pas reconnu par IE 7...

display:inline-block n'est pas supporté par IE7 (à partir de IE8 uniquement) et par Firefox 2 (à partir de FF3). En pratique, à l'heure actuelle, ça pose surtout problème pour IE7, Firefox 2 ayant pour sa part été remplacé par les versions plus récentes.
Vu que l'objectif est de pouvoir placer des sous-menus dans les LI de premier niveau, le display:inline en remplacement n'est pas forcément adapté (à voir ou tester...). Si besoin, il faudra peut-être se rabattre sur un float:left pour IE7, et perdre le centrage horizontal.

IED Factory a écrit :
IE reconnaît cette pseudo-classe hover que pour les balises A

Internet Explorer 7, 8 et 9 implémentent correctement la pseudo-classe :hover, pour tous les éléments. C'est IE6 qui a cette limitation. À toi de voir si tu veux assurer le support d'IE6.
Quoi qu'il en soit, appliquer ce correctif JavaScript (csshover3.htc) à IE7 est une erreur.

Si le navigateur le plus ancien visé est IE7, je recommande fortement de réécrire le code CSS du menu en utilisant largement le sélecteur d'enfant (symbole >) pour cibler plus précisément les styles et éviter d'avoir à annuler des styles définis pour les LI de premier niveau et qui s'appliqueraient aux LI de second niveau faute d'un sélecteur suffisamment précis.
Modifié par Florent V. (21 Apr 2010 - 11:05)