28172 sujets

CSS et mise en forme, CSS3

Z-index et IE7

Bonsoir

J'ai fureté un peu dans les autres posts mais rien qui résout mon problème.

Sur mon site, mon menu déroulant passe au-dessus du reste avec Firefox mais pas avec IE7 et je n'arrive pas à comprendre pourquoi.

Voir le site

PS : si au passage, quelqu'un peut me dire pourquoi quand je clique sur un des 10 articles plus bas, il y a un petit saut de la page vers la droite puis ça revient. Une histoire de marge mais je n'y arrive pas non plus. A noter que pour une fois, le problème ne se pose qu'avec FF.
Modifié par Jean-Christophe (16 Feb 2009 - 21:26)
Bonjour,

De mémoire, tu auras le même problème avec Safari, Opera ou Chrome.

En fait c'est très con. Teste à nouveau dans Firefox (ou Safari, Opera, Chrome...) et observe ce qu'il se passe tout à droite de la page lorsque tu cliques sur ces liens.

PS: it's not a bug, it's a feature.
Modifié par Florent V. (16 Feb 2009 - 22:03)
Ce n'est pas un problème, donc il n'y a pas de solution. Dit autrement: ce comportement est normal, il n'est donc pas à corriger.

Il y a tout de même une solution, que je ne recommande pas. Elle est décrite ici:
http://covertprestige.info/test/09-barre-defilement-decalage.html

Pour ton premier problème, en utilisant correctement les z-index (faire une recherche dans les articles...) ça devrait aller tout seul.
Modifié par Florent V. (17 Feb 2009 - 00:35)
Merci beaucoup pour cette solution non recommandée mais vachement pratique dans ce cas particulier. Et si d'habitude, j'essaye de suivre les recommandations, là, pour une fois, je vais sans doute déroger à la règle.

Pour les z-index, je cherche mais je sèche. Mon menu est en z-index:100 et sur IE, il passe au-dessus d'un h1 mais pas au-dessus d'un div sans z-index. (pas de souci sous FF)
Jean-Christophe a écrit :
Pour les z-index, je cherche mais je sèche. Mon menu est en z-index:100 et sur IE, il passe au-dessus d'un h1 mais pas au-dessus d'un div sans z-index. (pas de souci sous FF)

Et en positionnant div#page en relatif pour lui donner un z-index inférieur?

De mémoire, IE 6-7 gère mal l'ordre d'empilement automatique, mais il gère bien l'empilement si on lui demande explicitement de placer tel ou tel bloc à tel ou tel niveau (via du z-index et du positionnement, donc).
J'ai essayé

div#page{
  position: relative;
  z-index: 1;
}


et j'avais des effets de bord sur mon menu qui fonctionnait mal sous IE

Avec 

div#page{
  position: relative;
  z-index: -1;
}


c'est mieux : le menu passe au-dessus du bloc central mais pas au-dessus du bloc latéral.

C'est donc la bonne piste.
Je vais creuser. Quitte à déclarer tout mes blocs ainsi. Smiley langue

Enfin, non, c'est pas si bien car ça me rend les liens inactifs sur le bloc central Smiley fache
Modifié par Jean-Christophe (17 Feb 2009 - 11:26)
Si ça rend les liens du contenu inactifs, c'est probablement que tu as un élément sans fond visible qui recouvre ces liens. Il faut donc identifier lequel, et pourquoi il prend une hauteur inattendue...
À moins que ça n'ait un rapport avec un filtre AlphaImageLoader pour la transparence PNG dans IE6. Tu utilises quelque chose de ce genre?

Pour le z-index, c'est bien d'en donner un à div#page, mais il faut le faire pour le menu aussi, sinon ça sert strictement à rien.
le menu est en z-index: 100
Et mes tests n'ont été fait qu'avec IE7

Le problème vient des plugins que j'utilise (c'est un spip) je vais creuser de ce côté_là.

En tout cas, un grand merci pour ton aide.
Sujet clos
Aller à