Ie 8 z-index ne marche pas

Bonjour a tous,


J'ai un menu avec list qui marche sur FF Chrome etc mais pas avec IE7/8. Mon probleme vient de z-index mais je n'arrive pas a trouver. J'ai vu que je devais mettre le parent de l'element avec un z-index superieur mais cela ne change rien.

J'ai un span (<span class="grower CLOSE"></span>) qui doit etre par dessus un lien
<a class="select" title="soap cakes">soap cakes</a>

Ce lien est inactif, mais lorsque l'on clique sur le span cela appel un fonction js qui ouvre le sous menu (<ul class="submenucat">). Mon probleme est que sur FF Chrome le span est bien au dessus du <a class="select" title="soap cakes">soap cakes</a> mais sous internet exploreur celui ci est derriere...

Avez vous une idée pour fixer mon z-index?

Vous pouvez acceder au site en cours: http://theyorkshiresoapcompany.co.uk/newshop/

Merci pour votre aide.

Bonjour,

le z-index est inactif si l’élément est en positionnement statique(par defaut).
Pour rendre un element réactif a z-index et le gardé dans le flux, le positionnement relatif est préconisé.

Bonjour,

Si je mets mon span en position relative, le lien qui est dessous se decalera vers la droite du span

salut,

et en mettant le lien dans un div (s'il n'est pas déjà contenu dans un parent.) avec la propriété positon:relative; sans le positionner et l'element span en position:absolute; tu arriveras peut être a l'avoir au dessus et sans utiliser la propriété z-index ?

a+
Modifié par o06 (29 May 2011 - 23:47)

re,

j'ai répondu hier sans pouvoir tester.
j'ai essayé ce matin et apparemment en testant rapidement j'arrive bien à avoir l'élément span au dessus du lien en utilisant la propriété position.

je ne connais pas le détail de ton code html, mais si ton lien est dans une liste (ce que j'ai cru comprendre) la piste serait :

<ul>
<li style="position:relative;"><span style="position:absolute; background-color:#06C;"><a href="#">lien</a></span></li>
</ul>

voilà si ça peut t'aider.

a+
Modifié par o06 (30 May 2011 - 10:37)

Merci pour ta reponse. Je viens de tester mais ca ne change rien.

J'ai mon code qui resemble a ca:

<ul>
<li>
<span class="grower CLOSE"></span>
<div class="linkmaincat"><a>Titre ici</a></div>
</li>
</ul>

J'ai ajouter position relative a linkmaincat mais ca ne change rien

As tu une idée?

Bonjour,

Normal que ca ne change rien,
tu as bien testé quelques chose, mais pas la méthode de o06

une div en position relative n'a pas beaucoup d’impacte, au pire, elle se positionne par rapport aux autres éléments en "position relative" qui serait avoisinant.

Par contre le position relative est intéressant (dans ton cas notamment) pour la possibilité de gérer des éléments "enfants" en "position absolute".

Laisse moi te simplifier un peu l'explication :

Le body d'une page html est un "super relative" on va dire ; ses éléments enfant (div etc) se positionnent les uns par rapport aux autres. Si on change cet état à l'un d'entre eux pour "position absolute", alors il ne se positionnera plus par rapport à ses confrères, mais par rapport aux limites de son parent "relatif" (soit body de manière native).

DONC : si tu met une div en "position relative", alors les éléments enfants en "position absolute" qu'elle contient, se placeront par rapport au bordures (aux limites) de cette div parent.

Tu comprend ?

Merci, je comprends bien ton explication mais dans mon cas je ne peux pas changer la structure de mon menu.

Mon span ne peux pas contenir de <a>, il doit etre au dessus du <a> et non le contenir.

Pour toi je devrais mettre le li en position relative et apres mon span et l'autre div contenant mon <a> en position absolute?

Bonsoir,

il y a peut-etre une autre raison que je n'ai pas pu verifier (les outils de develloppement de mon IE8 F12 bug) et impossible de rapatrier ta page en local et la faire fonctionné sous IE.

ton span etant totalement transparent et vide , il est probable que la souris passe au travers (si je peut simplifier ainsi). Je te laisse le soin de tester une couleur de fond pour ce span ... un rgba(0,0,0,0.01) par exemple ou juste un red pour test.
il suffirait peut-être d'appliquer le onclick via le jquery sur le A plutot que de le faire sur des span créer a la volé.

Cordialement.

Personnellement, il y a une chose qui me dérange sémantiquement, et qui doit déranger IE pour le coup : un lien sans "href". Même si l'habitude a longtemps été de créer des ancres à base de "name" sans "href", cela reste une mauvaise utilisation de l'élément.

Un lien n'a pas de sens sémantique sans href, il serait plus intéressant d'utiliser à la place un "button", ou un "Hn" selon le cas. Et dans ton cas, j'opterai pour un "Hn".

Je ne conçois pas très bien que tu ne puisse pas modifier la structure HTML de ton menu...

C'est un peu comme essayer d'enfoncer un clou avec une saucisse de strasbourg et nous demander comment faire sans changer d'outil. On va forcément te conseiller d'utiliser un marteau.
Modifié par Nigel (31 May 2011 - 09:42)

@gc-nomade: Merci pour ta réponse, effectivement ca venez de la... Tellement simple:)

@Nigel: Je sais que sémantiquement c'est pas le top mais comme je disais mon menu est generé avec smarty/ javascript et je ne souhaitai pas tous refaire sachant que je ne n'avais pas de temps pour. Mais si je dois le refaire j'utiliserai un Hn.

Pour en revenir a mon problème, mettre un background a mon span la résolu. Un petit bug de IE...

Cordialement