Bonjour à tous!
Ca fait 2heure que je m'arrache les cheveux (ça va, j'en ai beaucoup - c'est pas le cas de tous les messieurs ici
) avec une histoire de z-index qui ne fonctionne pas sur ie6 et 7.
Dans une div.champ en position relative, il y a une div.question qui affiche une info-bulle au clic.
L'info-bulle est bien au dessus de tout le reste quand elle apparaît, sauf sur IE6 et 7 (où l'info bulle passe en dessous des autres div.champ
J'ai essayé les différentes solutions déjà proposées sur le forum (du type : la boite conteneur doit avoir une position relative et un z-index supérieur).
J'espère que vous pourrez m'aider
Voici le code incriminé :
Merci encore!
Sarah
Ca fait 2heure que je m'arrache les cheveux (ça va, j'en ai beaucoup - c'est pas le cas de tous les messieurs ici
) avec une histoire de z-index qui ne fonctionne pas sur ie6 et 7. Dans une div.champ en position relative, il y a une div.question qui affiche une info-bulle au clic.
L'info-bulle est bien au dessus de tout le reste quand elle apparaît, sauf sur IE6 et 7 (où l'info bulle passe en dessous des autres div.champ
J'ai essayé les différentes solutions déjà proposées sur le forum (du type : la boite conteneur doit avoir une position relative et un z-index supérieur).
J'espère que vous pourrez m'aider
Voici le code incriminé :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
jQuery.noConflict();
jQuery(window).load(function() {
jQuery(".question a").click(function () {
jQuery(this).parent().find('div').show("fast");
});
jQuery(".champ").hover(function () {
jQuery('.question div').hide("fast");
});
});
</script>
<style>
#main{
width:720px;
height:350px;
padding:10px;
margin:auto;
background:#FFF;
position:relative;
z-index:10000;
}
form .champ{
background:#f7f7f7;
float:left;
width:220px;
height:120px;
margin:10px;
position:relative;
}
form .champ label img{
float:left;
margin:12px 10px 0 14px;
}
form .champ label span{
display:block;
padding:20px 20px 0 0;
height:45px;
}
form .champ input{
width:110px;
height:33px;
line-height:33px;
border:none;
border-top:1px solid #d8d8d8;
}
form .champ .question{
top:8px;
right:8px;
position:absolute;
}
form .champ .question a{
display:block;
width:20px;
height:21px;
background:red;
text-indent:-9999em;
}
form .champ .question div{
display:none;
width:220px;
height:300px;
padding:20px;
background:#374f75;
color:#FFF;
position:absolute;
z-index:10;
margin-left:-110px;
margin-top:0px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
</style>
</head>
<body>
<div id="main">
<form action="#" method="post">
<div class="champ">
<label for="monsieur">
<img src="img/illustration" width="58" height="90" />
<span>Titre champs</span>
</label>
<input class="button" onfocus="" type="text" id="monsieur" name="monsieur" value=""/>
<div class="question">
<div>Incenderat autem audaces usque ad insaniam homines ad haec, quae nefariis egere conatibus, Luscus quidam curator urbis subito visus: eosque ut heiulans baiolorum</div>
<a href="#">?</a>
</div>
</div>
<form action="#" method="post">
<div class="champ">
<label for="monsieur">
<img src="img/illustration" width="58" height="90" />
<span>Titre champs</span>
</label>
<input class="button" onfocus="" type="text" id="monsieur" name="monsieur" value=""/>
<div class="question">
<div>Incenderat autem audaces usque ad insaniam homines ad haec, quae nefariis egere conatibus, Luscus quidam curator urbis subito visus: eosque ut heiulans baiolorum</div>
<a href="#">?</a>
</div>
</div>
<form action="#" method="post">
<div class="champ">
<label for="monsieur">
<img src="img/illustration" width="58" height="90" />
<span>Titre champs</span>
</label>
<input class="button" onfocus="" type="text" id="monsieur" name="monsieur" value=""/>
<div class="question">
<div>Incenderat autem audaces usque ad insaniam homines ad haec, quae nefariis egere conatibus, Luscus quidam curator urbis subito visus: eosque ut heiulans baiolorum</div>
<a href="#">?</a>
</div>
</div>
<form action="#" method="post">
<div class="champ">
<label for="monsieur">
<img src="img/illustration" width="58" height="90" />
<span>Titre champs</span>
</label>
<input class="button" onfocus="" type="text" id="monsieur" name="monsieur" value=""/>
<div class="question">
<div>Incenderat autem audaces usque ad insaniam homines ad haec, quae nefariis egere conatibus, Luscus quidam curator urbis subito visus: eosque ut heiulans baiolorum</div>
<a href="#">?</a>
</div>
</div>
<div style="clear:both"></div>
<input type="submit" value="Envoyer" />
</form>
</div><!--main-->
</body>
</html>Merci encore!
Sarah