Pb de décalage de div entre IE et Firefox

Résolu
bambousl Messages postés 2 Date d'inscription   Statut Membre Dernière intervention   -  
bambousl Messages postés 2 Date d'inscription   Statut Membre Dernière intervention   -
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 :
<?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 :
/* 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.....
A voir également:

4 réponses

bambousl Messages postés 2 Date d'inscription   Statut Membre Dernière intervention   4
 
Merci pour vos réponses

j'ai trouvé comment régler mon problème (enfin, un ami m'a dit comment faire ^^)

changer le position absolute en relative et donner des valeurs en left et top pour les 3 divs concernés....

merci encore, bonne continuation.....
4
benj
 
il faut faire un css pour ie et un pour firefox ou un css avec un fichier php et un header text/css
1
benvii Messages postés 308 Date d'inscription   Statut Membre Dernière intervention   137
 
Tu peux faire une condition en HTML.
Regarde ici -> http://www.blog-and-blues.org/articles/Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows
0
anotuas Messages postés 242 Date d'inscription   Statut Membre Dernière intervention   58
 
Le sujet a deja été abordé ici : https://forums.commentcamarche.net/forum/affich-12034135-css-et-ie6
il n'y a pas beaucoup de reponses non plus mais on ne sais jamais
0