Compatibilité IE / Firefox

Question

sven30

22 Jan 2008 à 16:46

Bonjour,
J'ai créé mes pages web avec dreamweaver et mon site s'affiche correctement sous IE. Les internautes utilisant firefox s'étant plaint de problèmes d'affichages du texte, j'ai essayé moi même. En effet le texte ne s'affiche pas au même endroit sous Firefox. Comment faire pour que cela puisse être correct sur les 2 ?
la page d'acceuil de mon site : http://www.mielcevenol.com
et le code correspondant :

<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Miel des C&eacute;vennes - Nathalie &amp; Sven Jordy - Miels - Pollen - Gel&eacute;e Royale - Propolis - Sp&eacute;cialit&eacute;s au miel ...</title>
<style type="text/css">
<!--


#cadre {
	position:relative;
	width:770px;
	height:590px;
	z-index:1;
	background-color: #750c1b;
	margin-left: auto;
	margin-right: auto;
	left: 12px;
}
#titre {
	position:absolute;
	left:-43px;
	top:0px;
	width:653px;
	height:81px;
	z-index:1;
}
#principal {
	position:absolute;
	left:0px;
	top:81px;
	width:772px;
	height:486px;
	z-index:2;
	background-color: #f5c781;
}
#adresse {
	position:absolute;
	left:-34px;
	top:571px;
	width:843px;
	height:24px;
	z-index:3;
}
#menu {
	position:absolute;
	left:0px;
	top:0px;
	width:772px;
	height:39px;
	z-index:1;
	background-color: #4e0712;
}
#nous {
	position:absolute;
	left:113px;
	top:10px;
	width:56px;
	height:24px;
	z-index:1;
}
#produits {
	position:absolute;
	left:200px;
	top:10px;
	width:119px;
	height:21px;
	z-index:2;
}
#ou {
	position:absolute;
	left:352px;
	top:10px;
	width:182px;
	height:27px;
	z-index:3;
}
#info {
	position:absolute;
	left:422px;
	top:10px;
	width:128px;
	height:23px;
	z-index:4;
}
#commander {
	position:absolute;
	left:563px;
	top:10px;
	width:66px;
	height:26px;
	z-index:5;
}
#Layer7 {
	position:absolute;
	left:395px;
	top:8px;
	width:70px;
	height:28px;
	z-index:6;
}
.Style5 {font-family: Verdana, Arial, Helvetica, sans-serif; color: #ffffff; font-weight: bold; }
.Style6 {
	font-size: 19px;
	color: #f5c781;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
}
a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #FFFFFF;
}
a:link {
	text-decoration: none;
	color: #FFFFFF;
}
a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover {
	text-decoration: none;
	color: #FFFFCC;
}
a:active {
	text-decoration: none;
	color: #FFFFCC;
}
#drengl {
	position:absolute;
	left:635px;
	top:-1px;
	width:50px;
	height:34px;
	z-index:4;
}
#drd {
	position:absolute;
	left:693px;
	top:-1px;
	width:42px;
	height:31px;
	z-index:5;
}
#drnl {
	position:absolute;
	left:750px;
	top:-1px;
	width:43px;
	height:31px;
	z-index:6;
}
#Chat {
	position:absolute;
	left:18px;
	top:61px;
	width:102px;
	height:32px;
	z-index:2;
}
#Layer1 {
	position:absolute;
	left:26px;
	top:61px;
	width:126px;
	height:31px;
	z-index:2;
}
#BOUTCHAT {
	position:absolute;
	left:15px;
	top:61px;
	width:170px;
	height:35px;
	z-index:2;
}
#boutaca {
	position:absolute;
	left:15px;
	top:102px;
	width:170px;
	height:35px;
	z-index:3;
}
#boutcev {
	position:absolute;
	left:15px;
	top:143px;
	width:170px;
	height:35px;
	z-index:4;
}
#boutrom {
	position:absolute;
	left:15px;
	top:184px;
	width:170px;
	height:35px;
	z-index:5;
}
#boutprin {
	position:absolute;
	left:15px;
	top:225px;
	width:170px;
	height:35px;
	z-index:6;
}
#boutmont {
	position:absolute;
	left:15px;
	top:266px;
	width:170px;
	height:35px;
	z-index:7;
}
#boutarb {
	position:absolute;
	left:15px;
	top:307px;
	width:170px;
	height:35px;
	z-index:8;
}
#cadchat {
	position:absolute;
	left:202px;
	top:61px;
	width:549px;
	height:406px;
	z-index:9;
	border: medium solid #750c1b;
	background-color: f5c781;
	visibility: visible;
}
#Layer3 {
	position:absolute;
	left:11px;
	top:9px;
	width:283px;
	height:394px;
	z-index:1;
}
#Layer4 {
	position:absolute;
	left:204px;
	top:61px;
	width:559px;
	height:418px;
	z-index:9;
}
#photochat {
	position:absolute;
	left:12px;
	top:10px;
	width:258px;
	height:394px;
	z-index:1;
	visibility: visible;
}
#textechat {
	position:absolute;
	left:277px;
	top:9px;
	width:273px;
	height:395px;
	z-index:2;
	visibility: visible;
}
#photo {
	position:absolute;
	left:199px;
	top:61px;
	width:561px;
	height:416px;
	z-index:9;
}
#textecoffret {
	position:absolute;
	left:0px;
	top:344px;
	width:562px;
	height:62px;
	z-index:1;
}
#Layer5 {
	position:absolute;
	left:1px;
	top:20px;
	width:561px;
	height:55px;
	z-index:2;
}
#photous {
	position:absolute;
	left:17px;
	top:53px;
	width:250px;
	height:420px;
	z-index:2;
}
#texteus {
	position:absolute;
	left:286px;
	top:46px;
	width:465px;
	height:424px;
	z-index:3;
}
#alveolevide {
	position:absolute;
	left:17px;
	top:64px;
	width:347px;
	height:400px;
	z-index:14;
}
#miel {
	position:absolute;
	left:380px;
	top:57px;
	width:107px;
	height:49px;
	z-index:3;
}
#pollen {
	position:absolute;
	left:380px;
	top:128px;
	width:242px;
	height:49px;
	z-index:4;
}
#specialité {
	position:absolute;
	left:380px;
	top:200px;
	width:381px;
	height:49px;
	z-index:5;
}
#gelee {
	position:absolute;
	left:380px;
	top:271px;
	width:265px;
	height:49px;
	z-index:6;
}
#propolis {
	position:absolute;
	left:379px;
	top:342px;
	width:170px;
	height:49px;
	z-index:7;
}
#vinaigre {
	position:absolute;
	left:380px;
	top:413px;
	width:334px;
	height:49px;
	z-index:8;
}
#Layer8 {
	position:absolute;
	left:1px;
	top:0px;
	width:99px;
	height:408px;
	z-index:1;
}
#alveolemiel {
	position:absolute;
	left:17px;
	top:64px;
	width:347px;
	height:400px;
	z-index:9;
	visibility: hidden;
}
#alveolepol {
	position:absolute;
	left:17px;
	top:64px;
	width:347px;
	height:400px;
	z-index:1;
	visibility: hidden;
}
#Layer6 {
	position:absolute;
	left:22px;
	top:61px;
	width:278px;
	height:257px;
	z-index:10;
}
#alveolspec {
	position:absolute;
	left:17px;
	top:64px;
	width:347px;
	height:400px;
	z-index:10;
	visibility: hidden;
}
#alveolegel {
	position:absolute;
	left:17px;
	top:64px;
	width:347px;
	height:400px;
	z-index:11;
	visibility: hidden;
}
#alveoleprop {
	position:absolute;
	left:17px;
	top:64px;
	width:347px;
	height:400px;
	z-index:12;
	visibility: hidden;
}
#alveolevin {
	position:absolute;
	left:17px;
	top:64px;
	width:347px;
	height:400px;
	z-index:13;
	visibility: hidden;
}
#Layer9 {
	position:absolute;
	left:125px;
	top:153px;
	width:100px;
	height:112px;
	z-index:14;
	visibility: hidden;
}
#Layer10 {
	position:absolute;
	left:710px;
	top:10px;
	width:54px;
	height:23px;
	z-index:6;
}
#Layer11 {
	position:absolute;
	left:366px;
	top:207px;
	width:54px;
	height:67px;
	z-index:2;
}
#Layer12 {
	position:absolute;
	left:11px;
	top:302px;
	width:752px;
	height:150px;
	z-index:3;
}
#Layer13 {
	position:absolute;
	left:10px;
	top:10px;
	width:73px;
	height:25px;
	z-index:7;
}
#Layer14 {
	position:absolute;
	left:572px;
	top:48px;
	width:192px;
	height:256px;
	z-index:2;
}
#Layer15 {
	position:absolute;
	left:572px;
	top:304px;
	width:192px;
	height:42px;
	z-index:3;
	background-color: #660000;
}
#Layer16 {
	position:absolute;
	left:572px;
	top:308px;
	width:192px;
	height:41px;
	z-index:5;
}
.Style13 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
}
#Layer17 {
	position:absolute;
	left:9px;
	top:49px;
	width:549px;
	height:48px;
	z-index:6;
}
.Style14 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #330000;
}
#Layer18 {
	position:absolute;
	left:571px;
	top:363px;
	width:192px;
	height:114px;
	z-index:8;
}
#Layer19 {
	position:absolute;
	left:572px;
	top:353px;
	width:189px;
	height:120px;
	z-index:7;
	border: thin inset #660000;
}
.Style16 {color: #330000}
#Layer20 {
	position:absolute;
	left:7px;
	top:382px;
	width:556px;
	height:95px;
	z-index:9;
	background-color: #660000;
}
#Layer21 {
	position:absolute;
	left:7px;
	top:77px;
	width:269px;
	height:294px;
	z-index:13;
}
#Layer22 {
	position:absolute;
	left:329px;
	top:143px;
	width:231px;
	height:206px;
	z-index:11;
}
#Layer23 {
	position:absolute;
	left:10px;
	top:392px;
	width:554px;
	height:15px;
	z-index:12;
	vertical-align: middle;
}
#Layer24 {
	position:absolute;
	left:319px;
	top:24px;
	width:230px;
	height:68px;
	z-index:1;
	background-color: #660000;
}
.Style17 {
	font-size: 14px;
	font-weight: bold;
}
.Style18 {font-size: 16px}
#Layer25 {
	position:absolute;
	left:10px;
	top:415px;
	width:551px;
	height:48px;
	z-index:11;
}
.Style19 {
	font-size: 32px;
	font-weight: bold;
}
#Layer26 {
	position:absolute;
	left:3px;
	top:6px;
	width:267px;
	height:38px;
	z-index:1;
}
#Layer27 {
	position:absolute;
	left:8px;
	top:457px;
	width:552px;
	height:15px;
	z-index:10;
}
.Style21 {font-size: 12px}
#Layer28 {
	position:absolute;
	left:7px;
	top:40px;
	width:181px;
	height:55px;
	z-index:1;
}
#Layer29 {
	position:absolute;
	left:7px;
	top:95px;
	width:181px;
	height:14px;
	z-index:2;
}
.Style23 {font-size: 12px; font-weight: bold; }
#Layer30 {
	position:absolute;
	left:279px;
	top:289px;
	width:274px;
	height:36px;
	z-index:1;
}
#Layer31 {
	position:absolute;
	left:280px;
	top:29px;
	width:273px;
	height:42px;
	z-index:2;
}
.Style27 {font-size: 18px}
.Style28 {font-size: 14px}
#Layer32 {
	position:absolute;
	left:303px;
	top:125px;
	width:248px;
	height:208px;
	z-index:14;
}
#Layer33 {
	position:absolute;
	left:303px;
	top:125px;
	width:248px;
	height:208px;
	z-index:14;
}
.Style29 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #330000;
}
.Style30 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #330000;
}
.Style31 {color: #750c1b}
#xiti {
	position:absolute;
	left:10px;
	top:10px;
	width:39px;
	height:25px;
	z-index:7;
}
.Style32 {	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
}
-->
</style>
<SCRIPT LANGUAGE="JavaScript">
/*
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
 http://www.editeurjavascript.com
 
*/
imgPath = new Array;
SiClickGoTo = new Array;
version = navigator.appVersion.substring(0,1);
if (version >= 3)
	{
	i0 = new Image;
	i0.src = 'une/cocoune.jpg';
	SiClickGoTo[0] = "http://www.mielcevenol.com/coco.html";
	imgPath[0] = i0.src;
	i1 = new Image;
	i1.src = 'une/delices.jpg';
	SiClickGoTo[1] = "http://www.mielcevenol.com/delices.html";
	imgPath[1] = i1.src;
	i2 = new Image;
	i2.src = 'une/ceze.jpg';
	SiClickGoTo[2] = "http://www.mielcevenol.com";
	imgPath[2] = i2.src;
	i3 = new Image;
	i3.src = 'une/gourmandises.jpg';
	SiClickGoTo[3] = "http://www.mielcevenol.com/painepices.html";
	imgPath[3] = i3.src;
	i4 = new Image;
	i4.src = 'une/tronc.jpg';
	SiClickGoTo[4] = "http://www.mielcevenol.com";
	imgPath[4] = i4.src;
	i5 = new Image;
	i4.src = 'une/coffret.jpg';
	SiClickGoTo[5] = "http://www.mielcevenol.com/coffret.html";
	imgPath[5] = i4.src;
	i6 = new Image;
	i4.src = 'une/abeilles.jpg';
	SiClickGoTo[6] = "http://www.mielcevenol.com";
	imgPath[6] = i4.src;
	}
a = 0;
function StartAnim()
	{
	if (version >= 3)
		{
		document.write('<A HREF="#" onClick="ImgDest();return(false)"><IMG SRC="une/cev1.jpg" BORDER=0 ALT=Menu NAME=defil></A>');
		defilimg()
		}
	else
		{
		document.write('<A HREF=""><IMG SRC="une/cev1.jpg" BORDER=0></A>')
		}
	}
function ImgDest()
	{
	document.location.href = SiClickGoTo[a-1];
	}
function defilimg()
	{
	if (a == 7)
		{
		a = 0;
		}
	if (version >= 3)
		{
		document.defil.src = imgPath[a];
		tempo3 = setTimeout("defilimg()",5000);
		a++;
		}
	}
</SCRIPT>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body bgcolor="#750C1B" background="" onload="MM_preloadImages('images/ruche.jpg')">
<div id="xiti"><a href="http://www.xiti.com/xiti.asp?s=300189" title="WebAnalytics">
<script type="text/javascript">
<!--
Xt_param = 's=300189&p=accueil';
try {Xt_r = top.document.referrer;}
catch(e) {Xt_r = document.referrer; }
Xt_h = new Date();
Xt_i = '<img width="39" height="25" border="0" alt="" ';
Xt_i += 'src="http://logv4.xiti.com/hit.xiti?'+Xt_param;
Xt_i += '&hl='+Xt_h.getHours()+'x'+Xt_h.getMinutes()+'x'+Xt_h.getSeconds();
if(parseFloat(navigator.appVersion)>=4)
{Xt_s=screen;Xt_i+='&r='+Xt_s.width+'x'+Xt_s.height+'x'+Xt_s.pixelDepth+'x'+Xt_s.colorDepth;}
document.write(Xt_i+'&ref='+Xt_r.replace(/[<>"]/g, '').replace(/&/g, '$')+'" title="Internet Audience">');
//-->
</script>
<noscript>
Mesure d'audience ROI statistique webanalytics par <img width="39" height="25" src="http://logv4.xiti.com/hit.xiti?s=300189&p=accueil" alt="WebAnalytics" />
</noscript></a>
</div>
<div id="cadre">
  <div id="titre"><img src="images/titre.jpg" width="652" height="80" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="565,56,621,77" href="mailto:svenjordy@wanadoo.fr" />
</map></div>
  <div id="principal">
    <div id="Layer27">
      <div align="right"><a href="http://www.mielcevenol.com/archives.html" class="Style21">TOUTES LES FICHES THEMATIQUES EN ARCHIVES </a></div>
    </div>
    <div id="Layer25">
      <div align="center"><a href="http://www.mielcevenol.com/them6.html" class="Style19">L'EXTRACTION </a></div>
    </div>
    <div id="Layer23">
      <div align="center">
        <p class="Style17"><a href="http://www.mielcevenol.com/them5.html" class="Style18">TOUT CE QUE VOUS AVEZ TOUJOURS VOULU SAVOIR SUR ... </a></p>
      </div>
    </div>
    <div id="Layer21">
      <div align="center">
        <SCRIPT LANGUAGE="JavaScript">
StartAnim();
      </SCRIPT>
      </div>
    </div>
    <div id="Layer18">
      <div id="Layer28">
        <div align="center"><a href="http://www.mielcevenol.com/espadon.html" class="Style28" style="color:#330000;"><u><span class="Style32">LONGE D'ESPADON A L'ORANGE ET AU MIEL DE GARRIGUE </span></u></a></div>
      </div>
      <div id="Layer29">
        <div align="center"><a href="http://www.mielcevenol.com/recettes.html" class="Style23" style="color:#750c1b">TOUTES LES RECETTES </a></div>
      </div>
      <div align="center">
        <p><a href="http://www.mielcevenol.com/carottes.html"><span class="Style16"><strong><span class="Style31">CUISINE AU MIEL</span><br />
        </strong><span class="Style31">LA RECETTE DU MOIS</span></span></a></p>
      </div>
    </div>
    <div id="menu">
      <div id="nous"><span class="Style5"><a href="http://www.mielcevenol.com/nous.html">Nous</a></span></div>
      <div class="Style5" id="produits"><a href="http://www.mielcevenol.com/produits.html">Nos Produits </a></div>
      <div class="Style5" id="ou"><a href="http://www.mielcevenol.com/ou.html">O&ugrave; nous trouver ? </a></div>
      <div class="Style5" id="commander"><a href="http://www.mielcevenol.com/commander.html">Commander</a></div>
      <div id="Layer10"><a href="http://www.mielcevenol.com/liens.html" class="Style5">Liens</a></div>
      <div id="Layer13"><a href="http://www.mielcevenol.com/index.html"><strong>Accueil</strong></a></div>
    </div>
    <div id="Layer14"><a href="http://www.mielcevenol.com/visiteruche.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ruche','','images/ruche.jpg',1)"><img src="images/ruche2.jpg" name="ruche" width="192" height="256" border="0" id="ruche" /></a></div>
    <div id="Layer15"></div>
    <div id="Layer16">
      <div align="center">
        <p class="Style13"><a href="http://www.mielcevenol.com/visiteruche.html">Visite guid&eacute;e<br />
          de nos ruches</a></p>
      </div>
    </div>
    <div id="Layer17">
      <div id="Layer30">
        <div align="center" class="Style30">
          <p><span class="Style28">Atterrissage sur fleur de roquette <br />
          Vendredi 2 Novembre 2007 </span><span class="Style28">             </span></p>
        </div>
      </div>
      <div id="Layer31">
        <div align="center" class="Style29">JOUR APRES JOUR<br />
          <span class="Style27">LE FESTIN DES ABEILLES</span></div>
      </div>
      <marquee behavior="scroll" direction="left" loop="infini" width="100%" height="19" scrollamount="4" scrolldelay="0" Class="Scroller Style1 Style14" onmouseover="this.stop()" onmouseout="this.start()">
    Bienvenue sur <strong>mielcevenol.com - NOUVEAUTE</strong> : D&eacute;couvrez nos Boules Coco Pur Miel, sans lactose ni gluten, en cliquant <a href="http://www.mielcevenol.com/coco.html">ici
      </a>
      </marquee>
    </div>
    <div id="Layer19"></div>
    <div id="Layer20"></div>
    <div id="Layer33">
      <div align="center"><img src="/images/roquette.jpg" alt="atterissage d'abeille sur fleur de roquette" width="248" height="208" /></div>
    </div>
  </div>
  <div id="adresse">
    <div align="center" class="Style6">Nathalie &amp; Sven Jordy - Mallenches - 30450 S&eacute;n&eacute;chas - T&eacute;l : 04 66 56 78 41 </div>
  </div>
  <div id="drengl"><a href="http://www.mielcevenol.com/sommaireuk.html"><img src="images/uk.gif" name="uk" width="50" height="34" border="0" id="uk" /></a></div>
  <div id="drd"><a href="http://www.mielcevenol.com/sommaired.html"><img src="images/D.gif" name="d" width="50" height="34" border="0" id="d" /></a></div>
  <div id="drnl"><a href="http://www.mielcevenol.com/sommairenl.html"><img src="images/nl.gif" name="nl" width="50" height="34" border="0" id="nl" /></a></div>
</div>
  <div id="Layer2"></div>
</div>
<div></div>
</body>
</html>

[/i][/i][/i][/i][/i][/i]

sven30

22 Jan 2008 à 16:56

Il semblerait qu'en enlevant les balises <p> et </p> cela fonctionne. Je n'ai plus ce décalage vers le bas. Donc je pense que le problème est résolu. Sorry de vous avoir embette pour rien.
Merci

Sujet clos

CSS et mise en forme, CSS3

Compatibilité IE / Firefox