[Résolu] IE et z-index...

Bonjour,

J'ai beaucoup chercher sur le net pour trouver une solution à mon problème mais le tout est en anglais et mal expliqué ou alors inefficace...

Voici le code très simplifié pour comprendre plus rapidement :

<div id="top_header">
   mon menu
</div>
<div id="astuce">
   le reste de mon site sous le menu
</div>

Voici mon problème : j'ai un menu tout en haut de mon site dans la div "top_header" et juste en-dessous le reste de mon site dans la div "astuce". Le menu a une ombre portée qui "déborde" sur le fond de la div "astuce", j'ai donc utilisé z-index pour faire passer le menu au-dessus du fond du site (pour que top_header reste toujours au-dessus de la div astuce) pour que les quelques pixels de l'ombre portée soient visibles par-dessus en transparence.

Le problème est qu'avec IE7, lorsque je scrolle plus bas sur la page et que je remonte, le fond de la div astuce devient invisible sur quelques pixels de hauteurs. J'en ai déduis que la div "top_header" venait cacher totalement la div "astuce" sur quelques pixels de hauteur malgré que l'image de fond soit semi-transparente... Pareil lorsque je fais un rollover sur un onglet du menu.

J'espère m'être bien expliqué : la div censée rester au-dessus marche bien jusqu'à ce qu'on scrolle plus bas et qu'on remonte où elle cache la div "astuce" malgré la transparence et les z-index...

Le CSS :

#top_header {
	background: url(images/bg_top_header.png) repeat-x;
	height : 45px;
	position : relative;
	z-index: 2;
}

#astuce {       
        background: url(images/astuce_bg.jpg) no-repeat center top; 
	z-index : 1;
	margin : 0;
	margin-top : -21px;
	padding : 0;
}

A noter que "top_header" est en position relative pour placer ensuite les onglets en position:absolute.

J'espère que c'est clair, si quelqu'un a une solution ? ce problème a déjà dû être rencontré j'imagine... Merci d'avance
Modifié par spartouille (07 Sep 2009 - 16:33)

Je précise car j'ai oublié que ma div "astuce" a également un "position:relative" pour que le z-index s'applique, bien que meme sans il n'y ait aucun problème sous Firefox.

Hello !

Et pourquoi tu ne met pas l'image de ton ombre en background à ta div astuce ? c'est quand même bien plus simple non ?

J'y ai pensé pfoofen, seulement mon menu est plus complexe, les onglets débordent eux-aussi sur la div "astuce", des petites flèches vers le bas, ej vais faire des screenshots je crois.

Désolé, alors, voilà l'affichage normal (même sur IE7 au début !) :

[EDIT Laurie-Anne : Image trop grande]http://img7.hostingpics.net/pics/3206641.jpg

Et lorsque je scrolle plus bas et que je remonte, comme par magie, la div astuce est cachée :

http://img7.hostingpics.net/pics/9756362.jpg
Modifié par Laurie-Anne (07 Sep 2009 - 15:18)

Voici l'image après scroll (c'est chiant de pas pouvoir éditer...), toujours sur la même page :

[EDIT Laurie-Anne : Image trop grande]http://img7.hostingpics.net/pics/9756362.jpg

A noter que l'image qu'on voit en-dessous est le background de "body", donc la div astuce est bien invisible sur plusieurs pixels
Modifié par Laurie-Anne (07 Sep 2009 - 15:18)

Moi j'ai pas la solution à ton soucis.

Mais je ferais autrement je pense.

Ton menu est en ul li ?
En ul je mettrais le font du menu + les quelques pixel du fond "astuce".
Ensuite sur les li je mettrais pendant le survol le fond avec l'ombre.

Je sais pas si c'est très clair...

Bonjour,

spartouille a écrit :
(c'est chiant de pas pouvoir éditer...)

Pour pouvoir éditer un message, il faut s'enregistrer (lien en haut de page) sur le forum (et non pas lorsque l'on poste un message.

Tu auras remarqué que j'ai édité tes messages, les images y étaient si grande qu'elle déformaient le forum

Oui je vois ce que tu veux dire, cela aurait été ma solution de secours... ça me fait profondément chier de devoir modifier tout mon CSS, redécouper des images, etc, juste à cause de ce navigateur qui bugue...

J'attends de voir si quelqu'un a déjà rencontrer ce problème et aurait une solution...

@ Laurie-Anne : Pas de problème pour les images, j'ai remarqué. Pour ce qui est de l'édition, je pensais qu'après avoir posté un message on était logué, enfin merci pour l'info !
Modifié par spartouille (07 Sep 2009 - 15:23)

Peut-être qu'en rajoutant zoom:1 ça corrigera le prb.
Genre bug du haslayout : http://www.alsacreations.com/article/lire/76-haslayout-internet-explorer.html

Génial pfoofen ! J'ai mis un zoom:1 sur la div "astuce" et comme par magie, plus de bug !

Une astuce à connaître... encore une fois merci à Alsacréations Problème résolu.