diference d'affichage

elena c · 17 Mars 2008

Bonjour!
Je viens de m'inscrire et voila que je profite tout de suite pour posser des questions...

J'ai un problème d'affichage entre les deux navigateurs. Surment c'est du déjà vue...
Le problème se trouve dans la position de div en position absolute.
Avec explorer il affiche ma page comme sous dream et avec mozilla les m^mes div sont déplacé vers la gauche....
Qu'est-ce que je peux faire pour homogéneiser l'affichage???
merci d'avance!!
elena c

Bacteries · 17 Mars 2008

Sans code on va pas pouvoir t'aider...

elena c · 17 Mars 2008

Oui, je pensais mais, je me suis dit que peut-être c'étai un truc connu.
C'est un peu avuser car c'est long, bin voila la feuille de style

body {
margin:0;
height: 100%;
}

.entete {
background-image:;
height: 173 px;
background-image: url(data/icono/banda.gif);
}

.contenu {

background-color: #FFFFFF;
width: 100%;
min-height:500px;
}

.menu {
min-height:400px;
float: left;
width: 223px;

color: #FFFFFF;

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: bold;
text-decoration: none;
}
.menu1{
height: 50px;

}
.menu_arron{
height: 50px;

}
.centre {

height: 70%;
margin-bottom: 0%;
margin-right: 200px;
color:#000000;
background-color:#FFFFFF;
bottom: -30px;
}

.droit {
height:500px;

float:right;
width: 200px;
background-image: url(data/icono/BG_droit.gif);
font-size:18px;
font-weight: bolder;
color: #306174;
text-align: center;
position: relative;

}

.pied {
float: left;
height: 50px;
width:100%;
text-align: center;
background-image: url(data/icono/banda_pied.gif);
}
.arbre {
width:172px;
height:120px;

z-index:1;
left: -95px;
position: relative;
bottom: -0%;
}

.p1{
font-size:14px;
color: #FFFFFF;
width: 180px;
text-align: center;
}

.p2{
font-size:13px;
color: #E5E5E5;
width: 180px;
text-align: center;
font-weight: bolder;
}
.pc1{
font-size:22px;
color: #3D5267;
text-align: center;
}
.pc2{
font-size:18px;
color: #3D5267;
text-align: justify;
}
a:link {
color: #FFFFFF;
}
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 0px;
top: -33px;
}

#Layer2 {
position:absolute;
width:718px;
height:200px;
z-index:1;
left: 525px;
top: 117px;
}

#Layer3 {
position:absolute;
width:532px;
height:207px;
z-index:1;
left: 527px;
top: 328px;
}

#pendule_1{
position:absolute;
width:202px;
height:156px;
z-index:1;
left: 456px;
top: 570px;
}

#pendule_2{
position:absolute;
width:202px;
height:156px;
z-index:1;
left: 1019px;
top: 283px;
}
.Style1 {
color: #C94E18;
font-size:24px;
}

.Style2 {color: #458CA7
}
.lezard {
width:172px;
height:120px;

z-index:1;
left: 878px;
position: absolute;
top: 555px;
}

Et puis voila le code de la page

<!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>
<meta name="keywords" content="STAFAV" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>STAFAV</title>
<link href="stafav_style.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript">

</script>

</head>

<body text="#FFFFFF" onLoad="MM_preloadImages('data/navig/B1accu.png','data/navig/B1ras.png','data/navig/B2mas.png','data/navig/B2docto.png','data/navig/B3ressou.png','data/navig/B3mem.png')">
<table width="100%" border="1" align="center" cellpadding="1" cellspacing="1">
<tr>
<td><table width="10" border="1" align="center" cellpadding="1" cellspacing="1">
<tr>
<td>
<div class="entete"><img src="data/icono/bandeau2.gif" alt="stafav" width="992" height="173" ></div>

<div class="contenu">
<div class="menu">
<div class="menu1"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','data/navig/B1accuei.png',1)"><img src="data/navig/B1accuei.png" name="acc" width="223" height="50" border="0" id="Image7" /></a></div>
<div class="menu1"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('rasma','','data/navig/B1ras.png',1)"><img src="data/navig/B1ra.png" name="rasma" width="223" height="50" border="0"></a></div>
<div class="menu1"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('master','','data/navig/B2mas.png',1)"><img src="data/navig/B2ma.png" name="master" width="223" height="50" border="0"></a></div>
<div class="menu1"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('doctorat','','data/navig/B2docto.png',1)"><img src="data/navig/B2doct.png" name="doctorat" width="223" height="50" border="0" id="doctorat" /></a></div>
<div class="menu1"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('membres','','data/navig/B3mem.png',1)"><img src="data/navig/B3me.png" name="membres" width="223" height="50" border="0" id="membres" /></a></div>
<div><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ressource','','data/navig/B3ressou.png',1)"><img src="data/navig/B3res.png" name="ressource" width="223" height="65" border="0" id="ressource" /></a></div>

<div class="menu1"><img src="data/icono/menu_fond.gif" /></div>
<div class="menu1"><img src="data/icono/menu_fond.gif" /></div>
<div class="menu_arron"><img src="data/icono/menu_arron.gif" /></div>
</div>
<div id="Layer2">
<table>
<tr>
<td height="137" > <p class="pc1"><span class="Style1">STAFAV<br />
ST</span>atistiques pour l'<span class="Style1">A</span>frique Francophone et <span class="Style1">A</span>pplications au

<span class="Style1">V</span>ivant </p>
<p class="pc2">Le STAFAV est un projet de développement des statistiques appliquées en particulier dans des domaines liés au vivant, ceci en collaboration avec l’Afrique francophone subsaharienne.<br>
Démarré il y a 4 ans, il s'appuie sur trois axes principaux:</td></tr></table></div>

<div id="Layer3">
<table cellpadding="25">
<tr>
<td > <p class="pc2">
<img src="data/icono/icono_1.png" alt="stafav" width="21" height="21" />  Un réseau de Masters de Statistiques Appliquées. <br />
<br />
      <img src="data/icono/icono_1.png" alt="stafav" width="21" height="21
" />  Le suivi de Doctorats de Statistiques. <br />
<br />

            <img src="data/icono/icono_1.png" alt="stafav" width="21" height="21
" />  Le développement de la Recherche en statistiques.<br />
<br />
<br /><br /></p></td></tr></table>
</div>

<div id="pendule_1">
<table border="0" cellspacing="0" cellpadding="0">

<tr><td align="center"><script type="text/javascript" src="http://www.worldtimeserver.com/clocks/embed.js"></script><script type="text/javascript" language="JavaScript">objFR=new Object;objFR.wtsclock="wtsclock001.swf";objFR.color="CC6600";objFR.wtsid="FR";objFR.width=70;objFR.height=70;objFR.wmode="transparent";showClock(objFR);</script></td></tr><tr><td align="center"><h3 class="Style2">Paris</h3></td>
</tr>
</table>
</div>

<div id="pendule_2">
<table border="0" cellspacing="0" cellpadding="0"><tr><td align="center"><h3 class="Style2">Antananarivo</h3></td></tr><tr><td align="center"><script type="text/javascript" src="http://www.worldtimeserver.com/clocks/embed.js"></script><script type="text/javascript" language="JavaScript">objMG=new Object;objMG.wtsclock="wtsclock001.swf";objMG.color="5f95ab";objMG.wtsid="MG";objMG.width=70;objMG.height=70;objMG.wmode="transparent";showClock(objMG);</script></td></tr></table>
</div>

<div class="droit">
<img src="data/icono/arrondi.gif" width="200" height="200"/>
<p>Actualites</p>
<p class="p1">Nouvelle école CIMPA 2009
<span class="p2">Après avril 2007 à Yaoundé, une nouvelle école CIMPA <a href="#">Lire la suite</a></span></p>

<p>Partenaires</p>
<p class="p1">Pour devenir partenaire ou mieux connaître...<a href="#">cliquez ici</a></p>
<div class="arbre"><img src="data/icono/arbol.gif" width="155" height="110" /></div>
</div>-->
<div class="centre"> </div>
</div>
<div class="pied";>
<p>Contactez-nous</p>
</div></td>
</tr>
</table>
</td>
</tr>
</table>
</body>

Ufffffff

merci....gracias...thanks...