Z-index et ie7 [ Résolu ]

Bonjour,

J'ai un soucis avec mon design un peu complexe qui implique une div à fond transparent contenant mon menu par dessus mon contenu sous ie7.

Je m'explique, mon menu est composé de vignettes cliquables dispersées sur toute la page (voir ici), elles sont contenues dans une div positionnée en absolue. Une autre div en absolue contient mon contenu qui doit passer en-dessous de mes vignettes.

J'ai bien compris comment fonctionnait le z-index et suis donc parvenu à laisser les vignettes au-dessus, tout en positionnant le fond de la div les contenant derrière mon contenu. Mais cela ne fonctionne pas sous ie7 à cause du bug connu qui fait que toute div positionnée implique un nouveau complexe de stockage. Ma div contenant mes vignettes étant en absolute, c'est ce qui se passe, du coup, les liens contenus sur mes diaporamas ne fonctionnent pas (les flèches pour passer d'une photo à l'autre et le bouton pause).

J'ai essayé beaucoup de choses, ce qui fonctionnerait le mieux serait de supprimer la position absolue de ma div contenant les vignettes, par contre, cela me fait perdre l'application de mon min-width sur cette même div, ce qui rend ma page "dégueu" pour les petites résolutions.

J'ai aussi trouvé des moyens de forcer le z-index avec du javascript ou jquery ici mais je n'arrive pas à le mettre en place. voir mon fichier javascript, ma feuille ie7.css où j'ajoute le z-index pour la classe .on-top et mon code html où j'ajoute la classe ontop (volontairement pas la même !...) à ma div contenant le diaporama et un appel de la fonction avec onmouseover. Où sont mes erreurs ???

Ce bug me donne vraiment du fil à retordre, ce que je comprends encore moins, c'est pourquoi ces liens placés derrière un fond transparent sont inaccessibles sur les diaporamas et pas ailleurs. En effet, tous les autres liens dans ma page sont cliquables...

Merci d'avance !
Modifié par jojoledemago (03 Aug 2011 - 15:47)

Salut,

En premier lieu, tu n'as pas besoin de mettre toutes tes div en position absolue mais seulement celle qui t'intéresse en lui ajoutant un z-index supérieur à 0 (qui est le z-index par défaut).

Ensuite, une solution qui me paraît raisonnable et simple d'application :
-appliquer la position absolute sur tes li et non pas sur une div. Tes li étant placés à la main, tu n'auras pas trop de modifications à faire et plus rien ne passera par dessus ton contenu.
Par contre, n'oublie pas de leur attribuer une taille fixe (largeur ET hauteur) sans quoi il y a de fortes chances pour qu'ils fassent une taille non raisonnable

Le soucis que tu rencontre est simple, tu as une div en 100% qui passe par dessus tout le contenu. Bien que partiellement remplie, cette div empêche tout de même toute interaction sur tes sliders, etc.

Tiens moi au courant de l'évolution du problème.

Cordialement.

Merci à toi Fahrenheit !
Tu m'as motivé à retenter ce que j'avais déjà essayé mais je n'avais pas du aller assez loin. J'ai donc résolu mon problème, et mieux encore, en enlevant le positionnement de la div de largeur 100% qui passait par-dessus (j'avais aussi un z-index qui trainait dans ma feuille condtionnelle d'IE7 !!!), je pense même que je vais pouvoir supprimer cette div qui ne doit plus servir à grand chose puisqu'elle ne contient que des éléments placés en absolute !
J'ai tout simplement refourgué les fonctions que remplissaient cette div à son parent : body. Du coup, ie 7, malgré son bug prend mes vignettes et mon contenu sur un même pied d'égalité, je peux donc m'amuser de nouveau avec les z-index !!! Il m'a tout de même fallu un overflow:hidden pour le body dans IE7, sans ça j'avais un écart entre mes 2 ascenseurs égal à la largeur d'une scrollbar !
Merci encore, je suis vraiment content de m'être débarrassé de ce bug !!!
A bientôt

Heureux d'avoir pu te rendre service