Problème de z-index entre Firefox et Internet Explorer

Bonjour à tous.
Je suis nouveau sur le forum et j'espère respecter la charte de celui-ci (que j'ai lu ). Si ce n'est pas le cas, je m'en excuse d'avance.
J'ai fait une recherche et je n'ai pas vu de sujet correspondant exactement à mon problème.

Je vous l'expose donc:

A l'aide d'un code php, je génère dynamiquement des <div> contenant des images. L'intérêt est que ces <div> se placent à des coordonnées relativement précise sur la page, sur une image (une carte pour être plus précis).
J'ai rajouté un code qui permet, lors du survol de la souris, d'afficher des informations relatives au <div> survolé dans un tableau (jusque là, rien de bien compliqué).

Le problème que j'ai est que, lorsque je survole les div qui ont été créé en premier, le tableau qui s'affiche alors passe en dessous des <div> qui ont été créés en dernier.

Pour plus de clarté, je vous mets le lien de la page (ICI). Il vous suffira alors de survoler les ronds rouges avec les numéros qui se trouvent sur la carte.

Le code que j'utilise pour effectuer cette opération est le suivant:

<div style="position:absolute; z-index:$compteur; top:$pos; left:$pos2;" onMouseOver="document.getElementById('description-$id').style.display = 'block';" onMouseOut="document.getElementById('description-$id').style.display = 'none';">
  <table border=0 cellpadding=0 cellspacing=0 class=texte style="background-color:transparent" background="$image" width="20" height="20"
    <tr>
      <td>
        <a href="$lien" class=lien3>
        <img src=images/spacer.gif width=5 border=0>$compteur
          <div id=description-$id style="position:absolute; z-index:".($compteur*50)."; top:20; right:-30; display:none;">
            <table border=0 cellpadding=2 cellspacing=0 class=texte style="border:1px solid #000000; background-color:#ffffff; font-size:9" align=center width=100%>
              <tr>
                <td nowrap><a href="$lien" class=lien2> $libelle<br><hr color=#ffcc00 height=1></a></td>
              </tr>
              <tr>
                <td nowrap><a href="$lien" class=lien2> $adresse_1</a></td>
              </tr>
            </table>
          </div>
        </a>
      </td>
    </tr>
  </table>
</div>

C'est donc ce code qui est répété à plusieurs reprises grâce à php.

J'ai volontairement laissé les variables php pour que vous puissiez vous rendre compte par exemple que les 'z-index' que j'ai créé sont dynamiques.

Sinon, j'ai aussi testé votre code pour créer des infobulles à l'aide de <span> (ICI) et cela m'a fait exactement le même problème .

Ca fait trois jours que je suis dessus et je n'ai plus d'espoir...

J'espère avoir été suffisament clair.

EDIT: J'ai oublié de préciser que ce problème est exclusif à Internet Explorer, sous Firefox il marche très bien.
Modifié par tof77410 (16 Nov 2006 - 14:13)

bonjour,

je crois que le lien sur l'autre topic met bien en evidence l'aspect limité et bricolo du systeme.

Par ailleurs il est aussi rappelé que le :hover n'est supporté dans IE que sur des balise de liens.

Reste a avoir recours a un javascript ou autre artifice en detournant l'usage de la balise <a> pour IE.

++

Je ne comprends pas, le :hover marche très bien sur IE.
De plus, le problème n'est pas là puisque l'action contenu dans le onMouseOver s'éxecute très bien (afficher un tableau) mais il est dans le fait que ce tableau s'affiche en-dessous de certains éléments.
Modifié par tof77410 (17 Nov 2006 - 11:01)

bonsoir
autant pour moi le a:hover ...

<table border=0 cellpadding=0 cellspacing=0 class=texte style="background-color:transparent" background="$image" width="20" height="20"

    <tr>

peut-etre quen refermant la balise <table> ça margera mieux ,
et puis quand a venir sur alsacreations , peut-etre pourrais tu t'interesser au façon de suivre des normes standards , le html 4.01 peut te suffir et t'aider a faire des pages qui te seront plus facile a "debugger" et a mettre a jour , dynamiquement ou a la main .

++

Merci de prendre le temps de me répondre.

En ce qui concerne le HTML 4.01 et les normes, je ne comprends pas très bien. En fait, ça fait maintenant 5 ans que je fais du HTML et je pense que je ne connais pas réellement la différence entre celui que je fais et celui dont tu parles. Si tu pouvais me l'expliquer en 2 mots, ça m'aiderait à me renseigner sur les bons trucs.

A part ça, j'ai refermé ma balise <table> et ça ne marche toujours pas.
Je pense que le problème vient réellement de ma gestion des z-index mais c'est la première fois que je suis confronté à un tel problème.

Merci d'avance.

Bonjour tof et bienvenue sur Alsacréations,

Il n'y a pas de différences entre le html dont tu parles et celui dont nous parlons ici.
Simplement, nous nous employons à l'utiliser à bon essien, dans l'optique de rendre un site accessible au plus grand nombre, quel que soit son équipement, quel que soit son handicap : le respect des normes vise cet objectif.

Par exemple, la balise table a été prévue pour présenter des données tabulaires (comme la liste des hôtels sur ton site) mais elle n'est pas adaptée pour faire de la mise en page, même si elle a souvent été utilisée dans ce but.

De même, il faut éviter d'utiliser javascript pour des fonctionnalités incontournables, car il peut être désactivé.

Ci-joint quelques ressources pour te guider dans l'approche des standards :

Introduction à l'accessibilité (le site d'Openweb présente de nombreux articles de fond permettant de comprendre les enjeux.)

Principes à suivre pour un site web de qualité : Ergonomie, Compatibilité, Accessibilité

Choisir sa DDT (le modèle de document HTML qui convient au projet, car il y en a plusieurs)

Une liste de tuto sur la mise en page sans tableaux

Faire une zone réactive en CSS

Bonne lecture !

Merci bien pour tous ces liens, je vais essayer de les lire tous d'ici la fin de la semaine mais ça ne va pas être facile de changer ma façon de faire. J'ai d'ailleurs trouver dans votre site une citation qui illustre bien mon cas:

a écrit :
Le vrai problème du passage de l'antique mise en page tableau + gifs transparents au tout CSS n'est pas technique, il tient de l'affectif, de la peur, de l'habitude. Quand pendant des années, vous avez colorié dans des cases et que l'on vous donne tout à coup une page blanche, un vertige s'empare de votre cerveau[...]

Mais heureusement pour moi :

a écrit :
La mise en page par tableaux n'est pas mauvaise en soi et ses utilisateurs ne sont pas (encore) incompétents ou dépassés.

Je vais donc me pencher sur ça. Par contre, toujours pour revenir à mon problème, si vous aviez une solution, cela m'aiderait fortement car, même si je me mets à utiliser plus amplement les CSS et le "NEW HTML" , je ne vois pas comment je vais pouvoir résoudre ce problème de z-index.

Merci

Bonjour,

Petit problème de compréhension, ou de connaissance, du concept de contexte de mise en forme.

Du point de vue de CSS les éléments placés sur ta carte se présentent de la manière suivante :

Boite principale
...Lien
.....Boite secondaire (qui contient le tableau que tu fais apparaitre)

Boite principale
...Lien...
....Boite secondaire (qui contient le tableau que tu fais apparaitre)

Etc...

Chacune de tes boites principales est positionnée en absolue et dans l'axe de la profondeur avec z-index.

Le fait de déclarer ces boites en position absolue détermine le contexte de mise en forme de tous ses enfants.
C'est ce contexte qui établiras la référence pour toutes les propiétés de positionnement, y compris celui en couche par z-index.

Autrement dit : lorsque tu mets un z-index 50 à une des boites secondaires tu la positionne par rapport à la boite principale (que l'on appelle dans ce cas en CSS la "boite conteneur principale").

Comme elle est également positionné en couche mais avec un z-index inférieur à la boite principale suivante, l'ensemble de ses enfants seront masqués, quelque soit la valeur de z-index que tu leur attribue.

En loccurence, la valeur de z-index que tu attribues au "tableaux", ne sert absolument à rien...
Seule va compter la valeur de z-index des boites principales.

Cet exemple de code te permettra de comprendre :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-style-type" content="text/css" />
<meta http-equiv="Content-language" content="fr" />
<title>Untitled</title>
<style type="text/css">
div{
	width:100px;
  height:100px;
}
#div1{
	position:absolute;
  z-index:0;
  top:0;
  left:0;
  background-color:#ff6600;	
}
#div1_1{
	position:absolute;
  z-index:100;
  top:10px;
  left:10px;
  background-color:#000000;
}
#div2{
	position:absolute;
  z-index:2;
  top:20px;
  left:20px;
  background-color:#cacaca	
}
</style>
</head>
<body>
<div id="div1">
1
	<div id="div1_1">
	2	
	</div>
</div>
<div id="div2">
	3
</div
</body>
</html>

Bien que positionné avec z-index:100, la boite noire (2) est recouverte par la boite grise (3) en z-index:2, car elle est positionnée par rapport à sa boite conteneur principale, la boite orange (1) qui est elle en z-index:1.

Et comme tu viens probablement de le comprendre : Il va falloir trouver un autre moyen pour gérer cet effet...

Jean-pierre

Ps : J'appuie lourdement les remarques concernant la standardisation de ton code ou l'utilisation inutile et compliqué des tables de mise en forme.

Ps2 : @gcyrillus : On ne détourne jamais une balise de son usage...
Modifié par jpv (20 Nov 2006 - 22:17)

Merci d'avoir pris le temps de vous pencher sur mon topic.
J'ai maintenant bien compris d'où venait mon problème. Pour ce qui est de la solution, je vais me pencher dessus car j'ai besoin de faire des tests pour la trouver !

a écrit :
Ps : J'appuie lourdement les remarques concernant la standardisation de ton code, l'utilisation inutile et compliqué des tables de mise en forme.

J'aimerai vraiment arrêter d'utiliser les <table> pour faire de la mise en forme mais je vais d'abord en apprendre plus sur la standarisation de code afin de pouvoir convaincre mon patron, parce que là, c'est pas gagné, pour lui, le plus simple reste les tableaux, qui dit plus simple dit plus rapide donc plus d'argent...

clb56 a écrit :


sauf pour <dl> bien sur puisque le seul moyen d'utiliser cette balise c'est de la détourner...

... Sauf évidemment à la déclarer du même niveau d'obsolescence que <center> par exemple...

... Ce ne serait peut être pas si mal finalement parce que subsumer un contenu de type block (<dd>) à un contenu de type inline (<dt>) il fallait quand même le faire.

J'ai vraiment l'impression de débuter l'apprentissage d'un nouveau langage: Je n'ai absolument rien compris à ton post !!!
--> Qu'est-ce que <dd>, <dt> et <dl> ???

jpv a écrit :
Le fait de déclarer ces boites en position absolue détermine le contexte de mise en forme de tous ses enfants.
C'est ce contexte qui établiras la référence pour toutes les propiétés de positionnement, y compris celui en couche par z-index.

J'y pense comme ça, si je les place en position relative, cela produira le même effet de couches ? (Toujours faut-il bien les placer en relative me direz-vous...)

tof77410 a écrit :

--> Qu'est-ce que <dd>, <dt> et <dl> ???

Ba ça s'appelle les listes de définitions, la forme générale c'est

<dl>
<dt>Terme à définir (le balisage est inline)</dt>
<dd>Définition 1 du terme concerné (balisage type block sans restriction, tu peux même mettre un <hn>)</dd>
<dd>Définition 2 du terme concerné</dd>
etc...

<dt> 2ème terme à définir (toujours inline)</dt>
<dd>Définition 1 du terme 2 (toujours block)</dd>
<dd>Définition 2 du terme 2</dd>
etc...

etc...
</dl>

Bref un truc aussi improbable qu'inutile... Tu peux oublier.

Bon ça reste sympa quand même pour le détournement de balises

Merci, c'est toujours bon à savoir, ça évite d'avoir l'air con dans les forums genre "je comprends pas ce qu'il raconte le monsieur"

Bonjour,

a écrit :
'y pense comme ça, si je les place en position relative, cela produira le même effet de couches ?

Oui

La technique pour construire des cartes interactives de ce genre est assez simple, en voici un exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-style-type" content="text/css" />
<meta http-equiv="Content-language" content="fr" />
<title>Untitled</title>
<style type="text/css">
a{
	text-decoration:none;
}
img{
	border:none;
}
#div1{
	position:absolute;
  top:0;
  left:0;
  width:300px;
  height:300px;
  background-color:#ff6600;	
}
#liste{
	margin:0;
  padding:0;
}
#liste li{
	list-style-type:none;
}
#h1 div, #h2 div, #h3 div, #h4 div{
	position:absolute;
  display:none;
  margin-top:0x;
  margin-left:5px;
  width:150px;
  height:40px;
  background-color:#ffffff;
}
#h1 div p, #h2 div p, #h3 div p, #h4 div p{
	margin:0;
  padding:0;
  font-size:0.8em;
}
#h1{
	width:10px;
  height:10px;
	margin-top:30px;
  margin-left:60px;
  background-color:#6666ff;
}
#h2{
	width:10px;
  height:10px;
	margin-top:0px;
  margin-left:80px;
  background-color:#ffff66;
}
#h3{
	width:10px;
  height:10px;
	margin-top:0px;
  margin-left:40px;
  background-color:#009933;
}
#h4{
	width:10px;
  height:10px;
	margin-top:0px;
  margin-left:100px;
  background-color:#663300;
}
</style>
</head>
<body>
<div id="div1">
	la carte
	<ul id="liste">
  	<li id="h1">
    	<a href="#h1_1" onmouseover="getElementById('1_1').style.display='block'"; onmouseout="getElementById('1_1').style.display='none'"><img src="pastille.gif" width="10" height="10" alt="hotel truc" /></a>
      <div id="1_1">
      	<p>
        	Hotel truc...
        </p>
      </div>
    </li>
  	<li id="h2">
    	<a href="#h1_2" onmouseover="getElementById('1_2').style.display='block'"; onmouseout="getElementById('1_2').style.display='none'"><img src="pastille.gif" width="10" height="10" alt="hotel machin" /></a>
      <div id="1_2">
      	<p>
        	Hotel machin...
        </p>
      </div>
    </li>
  	<li id="h3">
    	<a href="#h1_3" onmouseover="getElementById('1_3').style.display='block'"; onmouseout="getElementById('1_3').style.display='none'"><img src="pastille.gif" width="10" height="10" alt="hotel bidule" /></a>
      <div id="1_3">
      	<p>
        	Hotel bidule...
        </p>
      </div>
    </li>
  	<li id="h4">
    	<a href="#h1_4" onmouseover="getElementById('1_4').style.display='block'"; onmouseout="getElementById('1_4').style.display='none'"><img src="pastille.gif" width="10" height="10" alt="hotel trucmuche" /></a>
      <div id="1_4">
      	<p>
        	Hotel trucmuche...
        </p>
      </div>
    </li>              
  </ul>      
</div>
</body>
</html>

L'ensemble des éléments réactifs étant laissés en flux normal le positionnement de l'un affecte les autres, c'est donc juste un chouai compliqué à positionner.

En revanche on obtiens une liste propre, et un "système" de roll-over pas trop mauvais.

A noter que ce systèmes "javascripté" serait inutile si IE comprenait les sélecteurs enfants adjacents, ce qui n'est malheureusement pas le cas.

Attention toutefois : ceci n'est qu'un exemple du "principe", par ailleurs le javascript gagnerait à être externalisé.

Mais je pense que tu pourras t'en inspirer...

Jean-pierre

Merci beaucoup, je vais me pencher sur ton code et je reviendrai poster ici lorsque j'aurai réussi à l'intégrer dans mon code php (pour pouvoir mettre le [Résolu] dans le sujet ^^).

a écrit :

A noter que ce systèmes "javascripté" serait inutile si IE comprenait les sélecteurs enfants adjacents,

S'il s'agit bien comme je le pense des enfants directs d'un conteneur. Donc ceux qui peuvent être atteints par le sélecteur >

conteneur>enfants_directs {
propriété:valeurs;
}

Alors il est bon de noter que IE7 (mais lui seul dans la famille IE) reconnait ce sélecteur.

tof77410 a écrit :
ça évite d'avoir l'air con dans les forums

Dès qu'il s'agit de listes de définitions, ne pas avoir l'air con sur les forums tient de l'exploit.
Modifié par clb56 (20 Nov 2006 - 18:37)

Bonjour,

a écrit :
S'il s'agit bien comme je le pense des enfants directs d'un conteneur. Donc ceux qui peuvent être atteints par le sélecteur

Non, le sélecteur enfant adjacent permets, comme son nom l'indique, d'atteindre l'enfant adjacent d'un element, à la condition qu'ils aient un parent commun.

Par exemple

<li>
 <a id="elem1">lien</a>
 <div id="elem2">contenu</div>
</li>

selecteur enfant adjacent :
li a+div{}

permet d'adresser le div par exemple.

Dans mon exemple cette simple regle :

#h1 a:hover+div, #h2 a:hover+div, #h3 a:hover+div, #h4 a:hover+div{
	display:block;
}

Permet de supprimer toute nécessité au recours de javascript pour gérer les roll_over.

Ca fonctionne sur Gecko, Opera, Safari et... IE7, mais pas IE6

Ce qui le rends inexploitable actuellement.

Jean-pierre

Ps : IE7 à une autre limitation car il ne semble pas reconnaitre le focus sur cette règle, ce qui complique encore les choses....
On se demande à quoi ils pensent chez nanosoft....
Modifié par jpv (20 Nov 2006 - 22:12)

Bonjour,

Si ça peut t'aider ...
http://ghost-pc-buster.com/mas2/situation.php
Bonne soirée

<edit> sans JS, presque pas de table et sémantiquement incorrect</edit>
Modifié par ghost (20 Nov 2006 - 23:31)