bug sur zindexRésolu

Question

Bonjour à tous. Voilà, j'ai un bug dans l'utilisation de la propriété zindex, dans le cas d'internet explorer (marche très bien sur netscape). Comme je n'ai pas trouvé de référence à ce bug sur le net, je voudrais savoir si c'est moi qui est fait une erreur, ou bien eventuellement s'il y a une solution. Le problème: 3 couples "SPAN/TEXTAREA" placés en cascade via css (comme des fenêtres windows) Lorsque je clique sur une des fenêtres, celle-ci passe au premier plan (l'ordre des fenêtres restantes est sans importance, mon algo ne les garde pas forcément, là n'est pas le problème) Pour faire ceci, je recalcule les zindex des libelles (SPAN) et des zones TEXTAREA Problème: selon les configurations, les SPANS apparaissent alors qu'ils ont un index inférieur à celui d'un TEXTAREA, sencé donc les recouvrir Le code suit. Merci d'avance à ce qui regarderont http://originalcompo.free.fr ----------- Untitled Texte "background-color:#68f8a9;" > "P1" id= "l1"> oc_listes.php (classes communes) "P2" id= "l2"> oc_histogramme.php (version CSS) "P3" id= "l3"> oc_gdhistogramme.php (version GD)

originalcompo · Accepted Answer

Bonjour !

J'ai appris plein de choses grâce à PetoleTeam ! Je ne savais pas qu'un même navigateur pouvait interpréter les choses différemment selon ce que l'on mettait dans le doctype (je pensais naivement que c'était plus une info à titre indicatif !)

Je cite:
"Test ton document en mode STRICT 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> par exemple, la différence avec l'autre mode est saisissante, mais il n'y aura pas de différence entre les différents navigateurs.
Perso, je n'utilise plus que celui la pour me garantir une meilleur compatibilté d'affichage!"

--> ok, j'aurais bien fait de même, mais on dirait que le css ne réagit plus du tout !!! C'est normal ? Pas pratique du tout si la réponse est oui !

Ma conclusion personnelle qui n'engage que moi:
Il faut se rendre à l'évidence, les navigateurs interprètent le html de manière différente (ca je m'en étais déjà rendu compte depuis longtemps)
Si le poids des z-index est sensé représenter l'ordre d'affichage, je m'autorise à dire que "IE" est buggé.
Apparemment IE gère correctement le changement via javascript des zIndex (puisque c'est de cela que l'on parle) uniquement sur des positions absolues, à condition que le zIndex ne soit pas initialisé dans le style de la balise que l'on veut modifier (dans toute autre configuration, ca marchera si on a de la chance, et surtout s'il n'y a pas beaucoup d'éléménts qui s'imbriquent)

Pour cloturer le sujet,je dirais que lorsqu'on veut jouer avec les zindex via javascript,  mieux vaut en avoir le moins possible afin qu'IE s'en sorte, et toujours se placer dans le cadre cité précedemment !!!

Merci à vous deux pour vos contributions...

http://originalcompo.free.fr

cs_bultez · Answer

Bonjour, après avoit mis un espace entre style et type :

originalcompo · Answer

Merci pour ta réponse, mais désolé de te décevoir: l'espace dont tu me parles et qui a disparu au moment du copier collé existait déjà dans mon code !

Pour voir le vrai  problème, il suffit de permutter deux ou trois fois la fenêtre en 1er plan (je dis 2 ou 3 fois, mais 1 suffit de cliquer dès le début sur la 2ième fenêtre pour voir le problème)

Merci d'avance

http://originalcompo.free.fr

cs_bultez · Answer

je ne m'embèterais pas : Untitled oc_listes.php (classes communes) oc_histogramme.php (version CSS) oc_gdhistogramme.php (version GD) certes à affiner...

Cordialement Bul [mon Site] [M'écrire]

originalcompo · Answer

Merci beaucoup ! Cela résoud le problème que j'ai, donc merci

Evidemment, ce n'est pas générique (s'il y avait 10 fenêtres, ca ne marche pas tel quel)

par curiosité, j'aurai aimé que quelqu'un me confirme qu'il y a un bug dans IE ou bien m'ouvre les yeux sur une erreur

Mais dans l'immédiat, si ca n me suffit pas intellectuellement, dans la pratique ca ira. Merci encore !!! http://originalcompo.free.fr

cs_bultez · Answer

>>Evidemment, ce n'est pas générique (s'il y avait 10 fenêtres, ca ne marche pas tel quel) euh... le CSS certes. mais on peut faire ça dynamiquement. >>par curiosité, j'aurai aimé que quelqu'un me confirme qu'il y a un bug dans IE pas sûr, les bugs dans IE,FF... et autres navigateurs sont quand même très très rares. et pourtant : tel que tu faisais, ça me semblait correct, et ça semble ne pas marcher avec IE. quelque chose doit nous échapper. je dirais que je fais une erreur aussi, mais que je ne la vois pas.

Cordialement Bul [mon Site] [M'écrire]

originalcompo · Answer

Puisque j'y suis, une question annexe:

si je rajoute le texte "COUCOU" après la création du dernier 
 on se rend compte que par défaut le message est placé à l'endroit où serait positonnée le dernier div si ceux-ci n'étaient pas empilés.

Certes, on peut mettre le "COUCOU" dans  un div et décaler l'écriture de celui-ci, mais ca ne fera qu'ajouter de l'espace après le "COUCOU", à la fin de la page

Je trouve cel génant car l'utilisateur voit une barre de défilement, et lorsqu'il va descendre en bas de la page, il se rendra compte qu'il n'y a rien de plus.

Est-il possible de supprimer cet espace inutile ?

http://originalcompo.free.fr

cs_bultez · Answer

pas compris grand chose ( mais c'est normal, je suis un peu neuneu ) si tu utilise des postion:relative et/ou position:absolute ça touche la page de manière indépendante du reste. à propos : j'aimerais bien aussi avoir des explications sur le "problème initial", or, s'il y a "réponse acceptée", de nombreux intervenants risquent même de ne plus lire, si j'étais toi, j'enlèverais

Cordialement Bul [mon Site] [M'écrire]

originalcompo · Answer

Je suis d'accord avec toi, le problème m'intrigue toujours, j'ai donc enlevé le "réponse accepté"...

Pour ma 2ième question que  tu n'as pas compris, c'est plutôt parceque je me suis mal exprimé. Si tu lance l'exemple avec le "COUCOU" en plus, c'est plus évident, mais bon je vais essayer d'expliquer.

Soit deux textarea (textarea1 et textarea2) et un div contenant du texte (DIV). 
1): ce qui arrive si on les places normalement, 
2): si on déplace les textarea avec css (comme dans mon code)
3): si on déplace aussi le DIV
4): ce que j'aimerais obtenir, afin de ne pas avoir d'ascenseur sur une zone où il n'y a rien !!!

Les pointillés délimitent le début et la fin de page (la taille du html tel qu'elle apparait dans explorer)

1)               2)             3)            4)
---------------- -------------- ------------- -------------
textarea1        textearea1     textarea1     textarea1
textarea1        tetextarea2    tetextarea2   tetextarea2 
textarea1        tetextarea2    tetextarea2   tetextarea2
textarea2                       DIV           DIV
textarea2                                     -------------
DIV              DIV
---------------- -------------- -------------

En réalité, entre temps j'ai trouvé une "solution", bien qu'elle ne soit pas très propre à mon gout:

On positionne les textarea en absolu, dsans toucher au top (au cas où il y aurait du texte au dessus), et le décalage vertical se fait via des 

Le DIV sera lui positionné en relatif, et le tour est joué.

Pas mieux pour l'instant

http://originalcompo.free.fr

PetoleTeam · Answer

Bonjour à tous...
Tentative de réponse

- Il n'y a pas BUG à proprement parler, mais une façon différente d'interpréter les zIndex de la part des navigateurs.

- Mais avant toute choses mettre des zIndex sur des éléments positionnés en relatif pas TOP mais bon c'est jouable!

- Le zIndex est justement la pour gérer dans l'espace des couches ce qui n'est pas approprement parler le cas de la disposition en relatif, mais on dira donc que IE s'en sort moins bien.

- Lorsque tu réaffectes les zIndex il se trouve un moment ou 2 ont le même, IE dans ce cas les affiches dans l'ordre d'affectation en cas d'égalité, c'est son choix.

- Dans ton CSS supprime les z-index et mets les positions en absolute, tu verras qu'il n'y a plus BUG.

- La soluce de The Bultez est plus clean au niveau de la gestion, c'est un DIV que tu mets par dessus avec tout ce qu'il contient.

PS : Je n'est pas encore lu la suite de tes soucis...









;0)

originalcompo · Answer

Merci PetoleTeam


Je me doutais que c'était un problème d'interprétation du zIndex (que j'ai traduit approximativement par bug)

Ton explication est satisfaisante, même si je ne suis pas d'accord avec toutes tes propositions:


1) l'excuse proposée pour expliquer le problème avec I.E. est à mon
avis fausse: j'avais essayer dans une version précédente de mettre tous
les zIndex à -1 avant de les renuméroter, ceci afin que tous soient
changés sans qu'il y est de conflit. Cela ne corrige pas le bug


2) Que cela marche mal pour les dispositions en relatif, pourquoi pas...

Sauf que je n'ai trouvé à aucun endroit d'info. disant que la norme css précise que le zIndex n'est prévu pour
fonctionner qu'avec les positions absolute... 

De plus, après avoir testé le même code en remplacant relatif par
absolute (et en mettant des valeurs positives  pour les "top")...
j'ai le même problème !!


Par contre, c'est vrai que si en plus comme tu le précise toi
même  j'enlève l'initialisation des zIndex dans la définition css
, ca fonctionne !! Je ne vois pas la cohérence du truc. Donc pour que
ca fonctionne sur IE, il faut absolute + pas de définition des zIndex
dans le css.

Permet moi donc de continuer à penser que c'est un disfonctionnement IE qui a firé son algorithme !!!


Mon avis :


Sauf s'il y a une erreur dans la définition des zIndex que j'ai utilisé
(j'ai vérifié 20 fois les valeurs, c'est pas sorcier, et elles me
semblent juste... et n'oublions pas que ca marche sur Netscape !!) :

Je pencherai plutôt pour un problème IE de gestion de zIndex lié au
TEXTAREA ou au SPAN... ou au mélange des 2 (d'où le fait que la
solution de The Bultez qui n'utilise que des div fonctionne
correctement; remarque: cette solution jongle avec 3 éléments au lieu
de 6, ce qui est plus facile à traiter)


Hors sujet :

pour info, il se trouve que j'ai découvert (je débute en css) que l'on
peut inclure des "elements absolute" à l'intérieur d'un "élément
relatif", ce qui permet de construire quelque chose au pixel près, et
de ne pas se soucier de l'endroit où celui-ci va se positionner sur la
fiche. 

Ca simplifie le code (c'est plus facile de penser en absolu), et ca répond à mon problème...

http://originalcompo.free.fr

cs_bultez · Answer

nickel PetoleTeam. tu es l'un de ceux dont j'espèrais bien la venue ici, sachant que vous nous expliqueriez clairement le pourquoi du comment. c'est fait. Merci à toi.

Cordialement Bul [mon Site] [M'écrire]

PetoleTeam · Answer

Bonjour...




Je tiens à préciser que ton code de départ ne souffre d'aucune erreur, si ce n'est dans l'approche mais pas dans le code.

Il n'y a aucune contre indication à l'utilisation des zIndex avec les objets en position relative, on peut les utiliser pour les faires passer, les RELATIFs, devant un DIV en absolute par exemple en jouant sur le zIndex, pour exemple mise en place d'une bordure ou le DIV est mis en position et le RELATIF mis par devant...

Le point que, je me rend compte, j'ai omis de préciser, c'est le DOCTYPE.

Tu travailles avec un doctype, qui est un mode QUIRKS voir article
http://developer.mozilla.org/fr/docs/Migration_d%27applications_d%27Internet_Explorer_vers_Mozilla#Mode_quirks, et la surprise ?!?

Test ton document en mode STRICT <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> par exemple, la différence avec l'autre mode est saisissante, mais il n'y aura pas de différence entre les différents navigateurs.

Perso, je n'utilise plus que celui la pour me garantir une meilleur compatibilté d'affichage!





Il y a surement encore des points que j'oubli mais...

-> The Bultez
...même moi, à la relecture j'ai dès fois du mal à me comprendre...
;0)

Bug sur zindex

13 réponses

Votre réponse

Discussions similaires