Z-index et IE6
Fermé
André.
Messages postés
29
Date d'inscription
dimanche 23 mai 2004
Statut
Membre
Dernière intervention
4 septembre 2004
-
8 juin 2004 à 19:28
Tenac - 6 sept. 2010 à 17:06
Tenac - 6 sept. 2010 à 17:06
A voir également:
- Z-index et IE6
- Code ascii de a à z - Guide
- Cpu z pc - Télécharger - Informations & Diagnostic
- Index téléphonique - Guide
- Free z - Guide
- Z zip - Télécharger - Compression & Décompression
11 réponses
Sans déconner, les développeurs d'IE c'est des gros débiles mentaux...
Des heures des perdues à devoir corriger des bugs de ce navigateurs, l'utilisation de ce navigateur c'est la plus grosse des regressions du web...
Des heures des perdues à devoir corriger des bugs de ce navigateurs, l'utilisation de ce navigateur c'est la plus grosse des regressions du web...
les tags <select > les <iframe> sont des elements dit windowed
les <div> et egalement l'iframe est windoless.(voir google bug ie6 element windowed et windowless)
en effet seul l'iframe est à la fois windowed et windoless
grace donc a l objet iframe que l'on insert avant le menu deroulant on va pouvoir corriger le bug ie6.
cet objet iframe devra avoir la taille exacte du menu deroulant et il devra être positionné au même
endroit
voir exemple ci-dessous;
une partie de mon code qui contient l'insertion de l'objet iframe;
et sa suppression;
le menu deroulant doit bien sur avoir un z-index superieur à l'iframe;
dans cet exemple qui marche très bien (le select et l'iframe n 'on pas de z-index )
seul le menu deroulant à un z-index
//l'élement iframe est supprime chaque fois que l'on change d'onglet
function show()
{
submenu=this.getElementsByTagName('ul')[0];
var iframe = document.getElementById("theFrame");
if (iframe) {
iframe.parentNode.removeChild(iframe);
}
iframe = document.createElement('iframe');
iframe.id="theFrame";
iframe.frameBorder=0;
iframe.style.display='block';
iframe.style.position='absolute';
iframe.style.top=submenu.offsetTop;
iframe.style.left=0;
iframe.style.width= 0;
iframe.style.width= submenu.offsetWidth;
iframe.style.height= submenu.offsetHeight;
var elementul=submenu;
var parentElement=elementul.parentNode;
parentElement.insertBefore(iframe, elementul);
// rendre visible les elements
submenu.style['visibility'] = 'visible';
iframe.style.visibility='visible';
var currentNode=this;
while(currentNode)
{
if( currentNode.nodeName=='LI')
{
currentNode.getElementsByTagName('a')[0].className = 'linkOver';
}
currentNode=currentNode.parentNode;
//permet de récuperer le noeud parent
}
// lien visité
// clear timeout
eval ( "clearTimeout( timeout"+ this.id +");" );
// suspend la minuterie
hideAllOthersUls( this );
}
function timeoutHide()
{
// start the timeout
eval( "timeout" + this.id + " = window.setTimeout('hideUlUnder( \"" + this.id + "\" )', " + timeout + " );");
}
//setTmeout mise en route de la minuterie exécution de la fonction hideUlUnder
function hideUlUnder( id )
{
document.getElementById(id).getElementsByTagName('ul')[0].style['visibility'] = 'hidden';
var iframe=document.getElementById(id).getElementsByTagName('iframe')[0];
if (iframe) iframe.style.visibility = 'hidden';
}
les <div> et egalement l'iframe est windoless.(voir google bug ie6 element windowed et windowless)
en effet seul l'iframe est à la fois windowed et windoless
grace donc a l objet iframe que l'on insert avant le menu deroulant on va pouvoir corriger le bug ie6.
cet objet iframe devra avoir la taille exacte du menu deroulant et il devra être positionné au même
endroit
voir exemple ci-dessous;
une partie de mon code qui contient l'insertion de l'objet iframe;
et sa suppression;
le menu deroulant doit bien sur avoir un z-index superieur à l'iframe;
dans cet exemple qui marche très bien (le select et l'iframe n 'on pas de z-index )
seul le menu deroulant à un z-index
//l'élement iframe est supprime chaque fois que l'on change d'onglet
function show()
{
submenu=this.getElementsByTagName('ul')[0];
var iframe = document.getElementById("theFrame");
if (iframe) {
iframe.parentNode.removeChild(iframe);
}
iframe = document.createElement('iframe');
iframe.id="theFrame";
iframe.frameBorder=0;
iframe.style.display='block';
iframe.style.position='absolute';
iframe.style.top=submenu.offsetTop;
iframe.style.left=0;
iframe.style.width= 0;
iframe.style.width= submenu.offsetWidth;
iframe.style.height= submenu.offsetHeight;
var elementul=submenu;
var parentElement=elementul.parentNode;
parentElement.insertBefore(iframe, elementul);
// rendre visible les elements
submenu.style['visibility'] = 'visible';
iframe.style.visibility='visible';
var currentNode=this;
while(currentNode)
{
if( currentNode.nodeName=='LI')
{
currentNode.getElementsByTagName('a')[0].className = 'linkOver';
}
currentNode=currentNode.parentNode;
//permet de récuperer le noeud parent
}
// lien visité
// clear timeout
eval ( "clearTimeout( timeout"+ this.id +");" );
// suspend la minuterie
hideAllOthersUls( this );
}
function timeoutHide()
{
// start the timeout
eval( "timeout" + this.id + " = window.setTimeout('hideUlUnder( \"" + this.id + "\" )', " + timeout + " );");
}
//setTmeout mise en route de la minuterie exécution de la fonction hideUlUnder
function hideUlUnder( id )
{
document.getElementById(id).getElementsByTagName('ul')[0].style['visibility'] = 'hidden';
var iframe=document.getElementById(id).getElementsByTagName('iframe')[0];
if (iframe) iframe.style.visibility = 'hidden';
}
Le mieux c'est de mettre jQuery ui. Il y a un plugin appelé Dialog qui gère très bien ça...
https://jqueryui.com/download/
https://jqueryui.com/download/
Salut,
J'ai fais un Javascript qui corrige automatiquement ce problème des SELECTs pour vous. Vous pouvez le trouver ici :
http://www.fabien-molinet.fr/index.php?option=com_content&task=view&id=22
Le code source est sous licence BSD donc vous pouvez en faire ce que vous voulez.
Par contre si vous trouvez cela interessant envoyez moi un email. Ce serait sympa !
Molinet Fabien
J'ai fais un Javascript qui corrige automatiquement ce problème des SELECTs pour vous. Vous pouvez le trouver ici :
http://www.fabien-molinet.fr/index.php?option=com_content&task=view&id=22
Le code source est sous licence BSD donc vous pouvez en faire ce que vous voulez.
Par contre si vous trouvez cela interessant envoyez moi un email. Ce serait sympa !
Molinet Fabien
Le script en 0.33 fonctionne, effectivement. Mais mon menu deroulant a base de DIV a la facheuse tendance de ne pas s'ouvrir ( voir de se refermer !) si on est pas pile-poil sur le texte et pas juste dans le cadre. Ce comportement apparait des que je mets le comentaire conditionnel. Le menu est a base de DIV ( a priori ).
Merci.
Merci.
SirHill
Messages postés
4060
Date d'inscription
vendredi 19 mars 2004
Statut
Contributeur
Dernière intervention
19 avril 2020
541
9 juin 2004 à 00:20
9 juin 2004 à 00:20
Salut André, Joyeux Anniversaire! :-)
Après quelques recherches, j'ai trouvé ceci:
http://www.allhtml.com/forum/index.php?t=l&f=1&i=383073
http://iubito.free.fr/faq/index.php?curr=menu&tri=n&ord=asc#7
Tiens-nous au courant.
A+
Après quelques recherches, j'ai trouvé ceci:
http://www.allhtml.com/forum/index.php?t=l&f=1&i=383073
http://iubito.free.fr/faq/index.php?curr=menu&tri=n&ord=asc#7
Tiens-nous au courant.
A+
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
André.
Messages postés
29
Date d'inscription
dimanche 23 mai 2004
Statut
Membre
Dernière intervention
4 septembre 2004
9 juin 2004 à 07:23
9 juin 2004 à 07:23
Bonjour,
Merci pour tes voeux.
Et pour le reste aussi, bien sûr, mais ça ne résoud pas le problème.
Je ne peux pas, sans modifs considérables, cacher les select et listes déroulantes. D'autre part, certains ne sont cachés qu'à moitié, et les rendre invisibles serait choquant.
J'ai testé avec Opera et netscape, et tout fonctionne correctement.
Encore un bug de IE, mais pour avoir le droit de dire à Microsoft qu'il y a un bug, il faut débourser 250 Euros...
Si tu as d'autres tuyaux, je suis preneur.
bonne journée.
tant que t'avances, ne te retournes pas, sinon tu recules!
Merci pour tes voeux.
Et pour le reste aussi, bien sûr, mais ça ne résoud pas le problème.
Je ne peux pas, sans modifs considérables, cacher les select et listes déroulantes. D'autre part, certains ne sont cachés qu'à moitié, et les rendre invisibles serait choquant.
J'ai testé avec Opera et netscape, et tout fonctionne correctement.
Encore un bug de IE, mais pour avoir le droit de dire à Microsoft qu'il y a un bug, il faut débourser 250 Euros...
Si tu as d'autres tuyaux, je suis preneur.
bonne journée.
tant que t'avances, ne te retournes pas, sinon tu recules!
iubito
Messages postés
25
Date d'inscription
mardi 15 octobre 2002
Statut
Membre
Dernière intervention
25 février 2007
16 juin 2004 à 13:50
16 juin 2004 à 13:50
Salut André
je ne sais pas où tu en es.
mais pour IE, les select c'est un bug mais surement un peu volontaire, enfin bref on va pas s'étaler là-dessus...
Comme je l'expliquais dans ma FAQ, j'ai mis un script pour cacher les balises select, tu peux télécharger le menu qui gère bien ça sur la page http://iubito.free.fr/prog/menu.php ;-)
Ainsi tu peux regarder le code javascript.
a+
iubito
encore un Gadjo un peu Dilo ! :)
je ne sais pas où tu en es.
mais pour IE, les select c'est un bug mais surement un peu volontaire, enfin bref on va pas s'étaler là-dessus...
Comme je l'expliquais dans ma FAQ, j'ai mis un script pour cacher les balises select, tu peux télécharger le menu qui gère bien ça sur la page http://iubito.free.fr/prog/menu.php ;-)
Ainsi tu peux regarder le code javascript.
a+
iubito
encore un Gadjo un peu Dilo ! :)
André.
Messages postés
29
Date d'inscription
dimanche 23 mai 2004
Statut
Membre
Dernière intervention
4 septembre 2004
16 juin 2004 à 22:47
16 juin 2004 à 22:47
Merci pour ton aide.
Mais je ne peux pas cacher les balises 'select', trop de travail, modification de la structure de l'appli, etc... De plus certaines combo ne sont cachées (ou devraient l'être) qu'a moitié. Et les rendre invisible ne serait pas tres joli dans ce cas. Je crois que ça va rester comme ça en attendant que Bill corrige ce bug.
Et que voulais-tu dire par "certainement un peu volontaire"? quel serait l'intêret?
tant que t'avances, ne te retournes pas, sinon tu recules!
Mais je ne peux pas cacher les balises 'select', trop de travail, modification de la structure de l'appli, etc... De plus certaines combo ne sont cachées (ou devraient l'être) qu'a moitié. Et les rendre invisible ne serait pas tres joli dans ce cas. Je crois que ça va rester comme ça en attendant que Bill corrige ce bug.
Et que voulais-tu dire par "certainement un peu volontaire"? quel serait l'intêret?
tant que t'avances, ne te retournes pas, sinon tu recules!
iubito
Messages postés
25
Date d'inscription
mardi 15 octobre 2002
Statut
Membre
Dernière intervention
25 février 2007
17 juin 2004 à 06:34
17 juin 2004 à 06:34
J'pense que Bilou ne va pas se fatiguer à réinventer la roue, il utilise un composant système, un peu comme quand t'insère un flash (ça appelle un composant de Macromedia) ou autres plug-ins...
Le problème des select est se reproduit avec du flash aussi... :(
iubito
encore un Gadjo un peu Dilo ! :)
Le problème des select est se reproduit avec du flash aussi... :(
iubito
encore un Gadjo un peu Dilo ! :)
Voici la raison du problème :
http://download.microsoft.com/download/f/e/a/fea64d9a-7658-4939-84e9-186b8d16d52a/IEPlansAffichage.doc
http://download.microsoft.com/download/f/e/a/fea64d9a-7658-4939-84e9-186b8d16d52a/IEPlansAffichage.doc
Dans le document donné par Mike, on a un début de solution à ce problème en utilisant (seulement pour IE5.5+) une balise IFRAME.
Cet extrait HTML est un début de solution.
Le probleme dans IE, c'est que le <SELECT> disparait de l'ecran... enfin, c'est toujours mieux que s'il est en premier plan du point de vue utilisateur.
<html>
<head>
</head>
<style type="text/css">
.veil_iframe {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 5;
background: #FFFFFF;
filter: alpha(opacity=70);
opacity:0.7;
}
.veil_div {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 6;
}
</style>
<body>
<form>
hello
<select>
<option value="1">value 1</option>
<option value="2">value 2</option>
<option value="3">value 3</option>
<option value="4">value 4</option>
</select>
</form>
<div class="veil_div">Ca c'est mon texte du div</div>
<iframe class="veil_iframe" name="cadrimage" width="100%" height="100%"
marginheight="0" marginwidth="0" frameborder="0">
</iframe>
</body>
</html>
Cet extrait HTML est un début de solution.
Le probleme dans IE, c'est que le <SELECT> disparait de l'ecran... enfin, c'est toujours mieux que s'il est en premier plan du point de vue utilisateur.
<html>
<head>
</head>
<style type="text/css">
.veil_iframe {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 5;
background: #FFFFFF;
filter: alpha(opacity=70);
opacity:0.7;
}
.veil_div {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 6;
}
</style>
<body>
<form>
hello
<select>
<option value="1">value 1</option>
<option value="2">value 2</option>
<option value="3">value 3</option>
<option value="4">value 4</option>
</select>
</form>
<div class="veil_div">Ca c'est mon texte du div</div>
<iframe class="veil_iframe" name="cadrimage" width="100%" height="100%"
marginheight="0" marginwidth="0" frameborder="0">
</iframe>
</body>
</html>
iubito
Messages postés
25
Date d'inscription
mardi 15 octobre 2002
Statut
Membre
Dernière intervention
25 février 2007
8 août 2004 à 10:47
8 août 2004 à 10:47
merci
iubito
encore un Gadjo un peu Dilo ! :)
iubito
encore un Gadjo un peu Dilo ! :)
6 sept. 2010 à 17:06