div et table, comportement different sous FF et IE

Bonjour,

Je suis confronté a un problème de comportement entre IE et FireFox...

Mon objectif est tout bete, puisque je veux faire une popup DIV affichant un mini formulaire quand on click sur un texte.

Code:

---

<div id="BoxAddFiltre" style="position:absolute;visibility:hidden;z-index:auto;">{ok.filtrebox}</div>

---

ou {ok.filtrebox} sera remplacé par un tableau HTML généré dynamiquement (ne Ajax).

Le tableau devrait ressembler un peu ça :

Code:

---

1 2 3 4 5 6

<table width="500px" style="background:#FFFFCC;z-index:auto;border-right:#000099 3px solid;border-bottom:#000099 3px solid;border-left:#000099 1px solid;border-top:#000099 1px solid;border-collapse:collapse;z-index:auto;"> <tr> <td class="cadre" bgcolor="#FFFFCC">xxxxxx</td> </tr> </table>

---

Sous firefox, no problème, ça roule. Par contre, sous IE, paf, les éléments du formulaire en arrière plan apparaissent DEVANT le tableau contenu dans la DIV (mais derrieres les elements du formuaire contenus dans le tableau) !

Alors bien entendu, j'ai coller des style z-index un peu partout, j'ai essayé tout un tas de valeurs, automatique, inhérit... Bref, ma principale constation concernant les z-index, c'est que ça a l'air soit de ne pas marcher, soit de servir à rien...

J'ai vu des problèmes similaires postés sur différents forum, mais tout ce que j'ai pu voir c'était des solutions à coté de la plaque et des problèmes résolus en téléchargeant d'autre script tout fait... Mais rien qui explique le pourquoi du comment.

Quelq'un aurait-il une explication, voir une solution ?

En vous remerciant par avance

Une idée dans la FAQ Javascript :

http://javascript.developpez.com/faq...put.div.select

?

Bonjour,

merci pour cette réponse rapide !

Je vois que mon problème a été parfaitement compris :)

J'avais essayé de mettre d'entré de jeu dans ma div des balises <iframe>.
Le résultat est que j'obtenait du coup un carré blanc à la place de mon formulaire...

J'avait également essayé de remplacer la DIV par un table, mais le résultat était le même qu'en DIV...

Pour en revenir à ta solutions, je doit dire qu'elle me laisse perplexe... La solution est horriblement compliquée (et risquée rapport à l'utilisation massive du JS, que j'évite d'ailleur autant que possible)... Puis sa mise en oeuvre risque de rendre le code encore un peu moins compréhensible...

Comment se fait-il que le fait de mettre directement des balises iframe dans ma div n'arrange pas le problème ?

EDIT :

Bon bha "lol" !
je viens de tester la solution proposé sur ton lien... ça marche sous IE, mais plus sous firefox...

EDIT 2 : Pardon, ça ne marche ni sur l'un, ni sur l'autre (toujours un carré blanc)... Sauf que sur FF, c'est devenu transparant, et pas sur IE

Le problème sur IE6 est que les select restent au-dessus des éléments positionnés en absolus. Le seul élément qui passe par-dessus les select est l'iframe. Les éléments en absolus sur IE6, passent au-dessus des iframes. Le truc est de masquer le select par l'iframe de manière à ce que l'absolu masque l'iframe qui masque le select.

Tu peux sinon toujours opter pour le masquage du select avec display:none quand ton div est affiché.

L'une ou l'autre méthode utilise Javascript, tu ne pourras pas y échapper ...

Je viens de me renseigner un peu sur l'iframe (que je ne connaissait que de nom), et visiblement, ça peut être un moyen d'éviter le JS, en déplacant le code html ET php de mon miniformulaire dans une nouvelle page, et l'appeler via le iframe...

Bon, bha il manque un bouton "Contourné" à coté de "Résolu"...

En effet, en mettant le code de mon minoformulaire à faire paraitre en popup dans une autre page qu'on appel physiquement dans le iframe, ça fonctionne, et sans JS :) :) :)

Merci pour ton coups de main bizunurs

Les popups c'est toujours le bordel pour la comptabilité entre IE et FF ! A éviter ! Sinon les balises elles sont bien refermés car c'est souvent ca le probleme