Z-index et IE6
André.
Messages postés
29
Date d'inscription
Statut
Membre
Dernière intervention
-
Tenac -
Tenac -
Bonjour à toutes et à tous.
De retour parmi vous pour un petit casse-tête de plus. Toujours pour mon site, j'ai mis des menus que j'appelle "surgissants", je devrais plutot dire "glissants". En effet, ils apparaissent depuis la gauche de l'écran pour venir en recouvrir une partie. Ca fonctionne parfaitement, sauf... lorsque le menu glissant rencontre une combobox, il passe "sous" la combobox au lieu de passer au-dessus. Pour voir le problème, allez voir la page d'accueil de http://xoops.hageais.com
Le menu est trop large, expres, pour aller jusqu'à la combobox, pour démontrer le problème.
J'ai essayé de mettre des z-index, mais ça ne fonctionne toujours pas.
Merci d'avance pour votre aide. (et un pot pour celle ou celui qui trouve!)
Et comme aujourd'hui, c'est mon anniversaire, la solution à ce problème serait un super cadeau.
tant que t'avances, ne te retournes pas, sinon tu recules!
De retour parmi vous pour un petit casse-tête de plus. Toujours pour mon site, j'ai mis des menus que j'appelle "surgissants", je devrais plutot dire "glissants". En effet, ils apparaissent depuis la gauche de l'écran pour venir en recouvrir une partie. Ca fonctionne parfaitement, sauf... lorsque le menu glissant rencontre une combobox, il passe "sous" la combobox au lieu de passer au-dessus. Pour voir le problème, allez voir la page d'accueil de http://xoops.hageais.com
Le menu est trop large, expres, pour aller jusqu'à la combobox, pour démontrer le problème.
J'ai essayé de mettre des z-index, mais ça ne fonctionne toujours pas.
Merci d'avance pour votre aide. (et un pot pour celle ou celui qui trouve!)
Et comme aujourd'hui, c'est mon anniversaire, la solution à ce problème serait un super cadeau.
tant que t'avances, ne te retournes pas, sinon tu recules!
A voir également:
- Z-index et IE6
- Code ascii de a à z - Guide
- Gpu z - Télécharger - Informations & Diagnostic
- Index téléphonique - Guide
- Cpu z - Télécharger - Informations & Diagnostic
- Telecharger index - Télécharger - Gestion de fichiers
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...
Tenac
Le problème c'est pas IE6, c'est les gens qui continuent à l'utiliser ! C'est un peu facile de critiquer les développeurs d'un logiciel qui date de 2001.. Ce qui est devenu standard sur le web maintenant, n'existait sûrement pas à cette époque !
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.
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
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!
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 ! :)
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!
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>