div qui se met au dessus sur IE

**manaboko** · 22/01/2007, 15h55

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**blueice** · 22/01/2007, 16h19

Et en forcant la hauteur du contenu ?

**manaboko** · 22/01/2007, 16h36

non, ca ne marche pas, je veux que lorsque je fais defiler le div conteneur, le div support puisse defiler

**MasterOfChakhaL** · 22/01/2007, 16h47

Salut,

Honnêtement, j'ai du mal a comprendre ce que tu veux... même en regardant sous mozilla.
Un petit schéma ne serait pas de trop.

Je n'en suis pas sur car j'ai pas bien compris ta demande, mais j'ai la sensation que ton html est plus complexe qu'il ne devrait...

**manaboko** · 22/01/2007, 16h58

voilà où je veux arriver:
1 - j'ai deux divs div1 et div2. Ces deux divs sont de même hauteur, mais de largeurs différentes
2 - div2 contient une table dont la largeur est plus large que celle de div2. Donc div2 a une largeur fixe et overflow:auto
3 - et le scroll vertical doit être unique pour les deux divs, donc je mets les deux divs dans un seul div ou le scrolling est permis.

Dans le code que j'ai envoyé, il manque juste le div1.

Je veux controler le scrolling horizontal et laisser automatique le scrolling vertical.Si vous avez testé avec Mozilla , vous voyez que c'est différent que sous IE.

div qui se met au dessus sur IE

Positionnement en CSS avec z-index

Discussions similaires

Partager

Partager