[Résolu] Élement qui ne s'affiche pas sous IE

Bonsoir,

Je tombe sous le joug d'un bug bien chiant d'IE6... Un élément (un div en l'occurrence) ne veut pas absolument pas s'afficher.
J'ai bien vérifié qu'il n'était pas caché par une autre élément (j'ai tout simplement testé en mettant en display:none ceux qui auraient pu le recouvrir), et j'ai aussi testé les solutions de bases pour IE (zoom:1 par exemple).

Je suis alors tombé sur cette magnifique démo, qui expose de nombreux exemples similaires à mon problème : http://www.brunildo.org/test/IE_raf3.html
Mais malgré les solutions données dans ce lien, rien à faire, mon div reste complètement invisible...

Alors si quelqu'un de courageux pouvait jeter un coup d'oeil ici : http://www.trivandanam.net/seb/demo/ ça m'aiderait énormément. L'élément en question est la petite flèche en haut à droite (#slider) accompagné de sa légende, qui sert à afficher/cacher le bandeau.
Ma démo fonctionne parfaitement sur tous les browsers, sauf IE6 donc…
Modifié par ZeB_panam (24 Mar 2010 - 17:25)

Bonjour,

donc même en ne faisant plus flotter le div précédent, même en intercalant un clear ça ne fait rien ?
- En rajoutant un z-index sur #conteneur ou #header ?
- Pourquoi y a-t-il un ascenseur horizontal ?
- Remplace right: 0; par left: 20px; sur #slider ?
- plutôt que des display: none; enlève les couleurs de fond ou au contraire rajoute-en pour voir une éventuelle différence IE/Fx ? Ou vire ces éléments du code HTML, pour tester toujours ...

Va falloir que je révise mes CSS (ou que je revoie ça demain après une nuit de sommeil ) mais j'ai pas compris pourquoi sur Fx #header { float: left; } permettait de voir l'image de fond (sans float: left; il ne contient que des flottants donc pas de contenu dans le flux ça je vois bien ...)

Felipe a écrit :
j'ai pas compris pourquoi sur Fx #header { float: left; } permettait de voir l'image de fond

Merci d'avoir souligné ça, le float était inutile et contribuait au bug, tu as donc mis le doigt sur le souci général de ma compo : abus de float !
Au final je dois remettre tous les éléments dans le flux (puisque la plupart étaient en float), et leur ré-assigner un height.

Mais un problème disparaît, et d'autres viennent le remplacer... Sans float, les onglets sont assez galères à gérer, et jQuery ne peut faire un fade sur un élément inline (et les autres options de display ne sont pas satisfaisantes). Et avec float, IE6 ne prend pas en compte les onglets, et lorsqu'on cache le bandeau, les onglets ne sont pas déplacés .
Ensuite, jQuery sous IE8 n'applique plus l'opacité à 0.5 lorsqu'on change d'onglet... Et enfin, mon script de redimensionnement en hauteur (lorsqu'on cache le bandeau) du div contenant l'iframe ne fonctionne plus quel que soit le navigateur (j'ai pas regardé en détail quelle valeur n'était plus renvoyée, mais en l'état ça ne marche plus).

Bref, perdre sur tous les fronts juste pour gagner la compatibilité d'IE6, ça donne fortement à réfléchir... Je crois que je vais faire l'impasse sur ce navigateur, du moins pour la fonctionnalité du bandeau qui peut être caché. Mais je vais quand même re-tenter les solutions données dans le lien plus haut, quelque chose m'a peut-être échappé.

Merci de ton aide en tout cas

Finalement j'ai réussi à me dépêtrer grâce quelques bonnes rasades de :

float:left !important;
float:none;

Et aussi un commentaire conditionnel pour appeler une feuille uniquement pour IE6 (pour appliquer des règles impossibles à contourner avec !important).
Bon j'ai encore une barre de scroll qui apparait quand on cache le bandeau sous IE6 et IE7, mais je vais fouiller ça