[RESOLU] Menu Horizontal et Slider d'images sous IE6

Bonjour à tous,

Le site en question est hébergé à l'adresse suivante : www.direct-service.fr

Je suis en train de le finaliser et je suis confronté en fait à 2 problèmes qui n'apparaissent que sous IE6 (test OK sous FF3.6, IE 7 & 8 et Safari).

1/ Mon menu horizontal sur fond vert fait normalement 82px de hauteur et dispose d'un menu ul-li incluant des images et du texte.
Sous IE6, ce menu fait 10px de plus ??? sûrement à cause du padding-top de #mainimg li mais je n'arrive pas à trouver une solution élégante pour y remédier et avoir ainsi un effet de survol propre sous IE6... help please

2/ Mon 2ème problème est plus ennuyeux : j'ai un slider d'images () placé juste sous le menu horizontal) qui ne s'affiche carrément pas sous IE6 alors qu'il marche très bien sous FF et IE8 ???

Voici le rendu sous IE 6 :

Et voici le rendu sous IE8 :

Merci à tous

Antoine
Modifié par toine92 (22 Mar 2010 - 15:17)

Bonjour,

Le premier problème est lié au fait qu'IE6 implémente la propriété height comme s'il s'agissait d'un min-height (mais pas tout à fait...). Donc si le contenu, pour une raison ou une autre, est supérier à tes 82px, le bloc va s'agrandir en fonction.

La meilleure solution: comprendre pourquoi le contenu est plus grand que 82px (dans le cas normal, c'est à dire sans agrandissement particulier du texte par l'utilisateur), et y remédier.
Solution plus brutale: utiliser un overflow:hidden pour masquer tout ce qui dépasse.

Pour le deuxième problème, je ne sais pas exactement ce que c'est mais il me semble qu'utiliser un padding-top:150px sur #liste_categories n'est pas une bonne approche. Il se peut, vu le rendu dans IE6, qu'IE6 ne prenne pas en compte ce padding sur un tableau. Dans tous les cas, il aurait mieux fallu fixer la hauteur du conteneur de ton carrousel, à savoir #infiniteCarousel.

Merci Florent pour tes conseils,

Mon 1er problème est désormais résolu et le correctif est en ligne sur www.direct-service.fr.
Solution : J'ai supprimé le padding-top de 10 px sur le LI du menu horizontal et l'ai compensé par des hauteurs relatives au niveau des liens contenus dans chaque LI.

Pour mon second problème effectivement un padding-top:150px sur #liste_categories n'est pas du tout la bonne approche . J'ai donc fixer une hauteur à #infiniteCarousel et ma mise en page sous IE6 est meilleure.
Seul problème de taille : aucune image n'apparait dans mon carroussel...

help please

2eme Problème résolu !

Solution : problème de compatibilité du plugin Jquery Infinite Carrousel, CSS modifier pour IE6.