div qui se met au dessus sur IE
Bonjour, j'ai un problème de dépassement de div sous IE alors que sous Mozilla, cela marche impecc.
J'ai trois div, un conteneur, un support et un contenu.
Le div contenu est un div avec position:absolute
Le div support est de position:relative avec overflow:hidden
Le div conteneur est de overflow:auto pour permettre le scrolling.
Mon bug est que sous IE, le div support s'affiche en dessus de conteneur alors que sous Mozilla les deux divs support et contenu ne dépassent pas le div conteneur.
Est-ce que quelqu'un pourrait m'aider? voici mon code,
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script language="javascript" type="text/javascript">
var Timer;
var Pas = 3;
function moveLayer(Sens) {
Objet=document.getElementById("contenu");
/*alert("Objet.offsetWidth="+Objet.offsetWidth+" et support.offsetWidth= "+document.getElementById("support").offsetWidth);
alert(parseInt(Objet.style.left) + (Pas*Sens));*/
if(parseInt(Objet.style.left) + (Pas*Sens)>0) {
clearTimeout(Timer);
}
else if(parseInt(Objet.style.left) + (Pas*Sens)<-(Objet.offsetWidth-document.getElementById("support").offsetWidth)) {
clearTimeout(Timer);
}
else {
Objet.style.left = (parseInt(Objet.style.left) + (Pas*Sens)) + "px";
}
Timer = setTimeout("moveLayer(" + Sens + ");", 30);
}
</script>
</head>
<body>
<div style="height:50px; overflow:auto; background-color:#ccc; border:1px solid gray">
<div id="support" style="position:relative; background-color:#CCCCCC; width:100px; height:140px; overflow:hidden; border:1px solid #000; left:0">
<div id="contenu" style="position:absolute; top:0; left:0; width:120px; border:1px solid gray;" >
DEBUT<br />ligne1<br />ligne2<br />ligne3<br />ligne4<br />ligne5<br />ligne6<br />
ligne7<br />ligne8<br />ligne9<br />ligne10<br />ligne11<br />ligne12<br />ligne13<br />
ligne14<br />ligne15<br />ligne16<br />ligne17<br />ligne18<br />ligne19<br />FIN<br />
</div>
<div style="background-color:#0F0; width:22px; height:140px; position:absolute; right:0; border-left:1px solid #000;">
<img onmouseover="moveLayer(1);" onmouseout="clearTimeout(Timer);" src="slideup.png" style="cursor:pointer; position:absolute; right:0;" alt="" />
<img onmouseover="moveLayer(-1);" onmouseout="clearTimeout(Timer);" src="slidedown.png" style="cursor:pointer; position:absolute; right:0; bottom:0;" alt="" />
</div>
</div>
</div>
</body>
</html> |
ps:si vous avez Mozilla, vous pourrez voir ce que je veux obtenir.
