Pb de décalage de div entre IE et Firefox

**bambousl** · 16/04/2009, 17h19

Bonjour,
voila, je me doute que ce sujet a déjà été abordé plusieurs fois, mais je n'arrive pas à trouver de réponse pour mon cas.

Je suis en train de faire un site, et j'ai un souci avec le placement de certain <div>
Sous firefox et safari ça marche nikel, mais sous Internet Explorer ça part en vrille :

FF :
http://img13.imageshack.us/img13/1801/ff2utm.jpg

IE :
http://img15.imageshack.us/img15/7318/ie2o.jpg

à savoir que le div vert correspont au scroll vers le haut, le div orange est celui pour le scroll vers le bas, et le bleu est le texte à 'scroller'.
Voila, le but ici étant de simuler un scroll au survol des <div> scroll_bas et scroll_haut, et comme on le voit sur les screenshot, les div sont bien placés sur FF mais pas sur IE......

Je me doute qu'il y a une erreur dans mon code, mais là ça fait 2jours que je suis dessus et je n'en peux plus, j'ai l'impression de toujours faire les même tests.

Voila ma page :

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="fr">
<head>
<title>Vend Home - Agence de chasseurs immobiliers - Vous Vendez ?</title>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="txt/style.css" />
</head>
<body onLoad="MM_preloadImages('images/btn-proposer-votre-bien_over.jpg','images/btn-honoraire_over.jpg','images/menu_accueil_over.jpg','images/menu_achetez_over.jpg','images/menu_vendez_over.jpg','images/menu_investissez_over','images/menu_plus_over.jpg','images/menu_partenaire_over.jpg','images/menu_annexes_over.jpg')">
 
<div id="fond" align="center"><img src="images/fond_txt.gif" /></div>/*l'image de fond, qui se trouve derrière le texte*/
 
<div id="tableau2" align="center">
<table width="901" height="695" cellpadding="0" cellspacing="0">
 <tr height="380">
  <td width="160">&nbsp;</td>
  <td width="597">
  <div id="texte_vendez">/*c'est ici qu'il y a tout le texte à scroller. Je l'ai raccourci pour que ce soit plus lisible*/</div></td>
 </tr>
</table>
</div>
 
<div id="tableau" align="center">
<table width="900" cellpadding="0" cellspacing="0">
 /*tableau contenant les images du site, rien de spé la dedans donc je raccourcis ;)*/
</table>
</div>
 
<div id="tableau3">/*tableau contenant les 2 div servant de scroll vers le haut et vers le bas*/
<table width="900" align="center" cellpadding="0" cellspacing="0">
 <tr>
  <td><div id="titre_vendez" colspan="2"><p class="titre">L'acc&egrave;s &agrave; une agence d'acheteurs potentiels</p></div></td>
 </tr>
 <tr>
  <td width="192">&nbsp;</td>
  <td><div id="scroll-haut" onMouseOver="vy=2" onMouseOut="vy=0"><img src="images/transparent.gif" alt="" /></div><div id="scroll-bas" onMouseOver="vy=1" onMouseOut="vy=0"><img src="images/transparent.gif" alt="" /></div></td>
 </tr>
</table>
</div>
 
<script>/*script pour le scroll*/
var vitesse=5;
var posy=285;
var posy_max=285;
var posy_min=105;
var vy=0;
 
function scrolling(){	
	if ((vy==1)&&(posy>posy_min)) {
	 posy=posy-vitesse; 
	}
	if ((vy==2)&&(posy<posy_max)) {
	 posy=posy+vitesse; 
	}
 
	document.getElementById("texte_vendez").style.top = posy + "px";
 
	setTimeout('scrolling()',30);
 
}
 
scrolling();
</script>
 
</body>
</html>

Et le CSS :

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
/* CSS Document */
body {
 background-color : #000000;
 margin : 0px;
}
 
a {
 text-decoration:none;
 color:#000000;
}
 
h1, h2, h3 {
  color:#71140b;
}
 
img {
 border:0px;
}
 
#fond {
	position:absolute;
	width:100%;
	z-index:1;
	height:695px;
}
 
#tableau {
	position:absolute;
	z-index:10;
	width:100%;
}
 
#tableau2 {
	position:absolute;
	width:100%;
	overflow: hidden;
	height: 600px;
	z-index:2;
}
 
#tableau3 {
  position:absolute;
  width:100%;
  z-index:14;
}
 
#texte_vendez {
	position:absolute;
	width:465px;
	line-height:20pt;
	font-family:High Tower Text;
	font-size:14pt;
	z-index: 4;
	padding-left: 47px;
	text-align:left;
}
 
#scroll-haut {
	position:absolute;
	height:85px;
	width:640px;
	top: 270px;
}
 
#scroll-bas {
	position:absolute;
	height:128px;
	width:640px;
	top: 455px;
}
 
#telephone {
	padding-left:36px;
	padding-top:14px;
	color:#ffffff;
	font-family:Times New Roman;
	font-size:12pt;
}
 
#titre_vendez {
	position:absolute;
	padding-left: 290px;
	padding-top: 245px;
}

....si une âme charitable pouvait m'aider...merci d'avance.....

**bambousl** · 17/04/2009, 09h50

C'est bon, j'ai trouvé le solution à mon problème (enfin, un ami ma donner la soluce plutot ^^)

Pour ceux qui auront le même problème que moi, je donne la solution qui fonctionne chez moi :
changer le position:absolute en relative et donner une valeur en top et left pour les 3 divs.......

merci

Pb de décalage de div entre IE et Firefox

CSS

Discussions similaires

Partager

Partager