5568 sujets

Sémantique web et HTML

Affichage IE:OK, FF:KO

Bonjour, j'ai réalisé un site qui s'affiche correctement avec IE par contre il ne s'affiche pas bien avec FF. Les zones ne sont plus au bon endroit et le texte sort des limites.

Voici la css:
/* CSS Document */

body{
font-family:Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
text-align:center;
background-color:#d8d8d8;
}


/* Zone de placement */
.page{
width: 780px;
margin-left:auto;
margin-right:auto;
position: relative;
}

.titre{
width: 780px;
height: 150px;
text-align:left;
background-image : url(images/page_Titre2.png) ;
}

.menuZone{
width:780px;
height:50px;
text-align:center;
background-image : url(images/page_corps.png) ;
position: relative;
}

.corps{
width: 780px;
height:300px;
text-align:center;
background-image : url(images/page_corps.png) ;
}

.finPage{
width:780px;
height:50px;
background-image : url(images/page_corps.png) ;
float:left;
}

.copyright{
width:780px;
height:50px;
text-align:center;
font-size:12px;
font-style:italic;
background-image : url(images/page_bas.png) ;
background-repeat: no-repeat;
}

.gauche{
width:180px;
float:left;
text-align:left;
}

.droite{
width:600px;
text-align:left;
float:left;
}

.droiteCorps{
width:600px;
padding-left:40px;
padding-right:40px;
padding-top:10px;
float:left;
background-image : url(images/titre_Droite2.png);
background-repeat: no-repeat;
}

.droiteCorpsNews{
width:600px;
float:left;
padding-top:10px;
background-image : url(images/titre_Droite2.png);
background-repeat: no-repeat;
}

.droiteImage{
text-align:center;
}

.evenementHaut{
width:180px;
height:59px;
background-image : url(images/evenement_haut.png) ;
background-repeat: no-repeat;
}

.evenementCorps{
width:180px;
background-image : url(images/evenement_corps.png) ;
padding-left:15px;
padding-top:10px;
}

.evenementBas{
width:180px;
height:23px;
background-image : url(images/evenement_bas.png) ;
background-repeat: no-repeat;
}

.sponsorHaut{
width:180px;
height:20px;
background-image : url(images/sponsors_haut.png) ;
}

.sponsorCorps{
width:180px;
padding-top:7px;
padding-left:7px;
text-align:center;
background-image : url(images/sponsors_corps.png) ;
}

.sponsorBas{
width:180px;
height:20px;
background-image : url(images/sponsors_bas.png) ;
}

.newsHaut{
width:600px;
height:45px;
background-image : url(images/news_haut.png) ;
padding-top:20px;
padding-left:60px;
}

.newsCorps{
width:600px;
padding-left:80px;
padding-top:10px;
background-image : url(images/news_corps.png) ;
}

.newsBas{
width:600px;
height:30px;
background-image : url(images/news_bas.png) ;
}

.monoHaut{
width:600px;
height:26px;
padding-left:60px;
background-image : url(images/moniteur_haut.png) ;
}

.monoCorps{
width:600px;
padding-left:60px;
background-image : url(images/moniteur_corps.png) ;
}

.monoBas{
width:600px;
height:25px;
background-image : url(images/moniteur_bas.png) ;
}



/* Texte */
#texteEvenement{
font-size:12px;
}

#texteCopyright{
font-size:12px;
font-style:italic;
}

#texteTitreCorps{
font-size:20px;
color:blue;
font-style:italic;
text-align:center;
}

#texteCorps{
font-size:12px;
text-align:justify;
}

#majuscule{
font-variant:small-caps;
font-size:14px;
}

#majuscule2{
font-variant:small-caps;
font-size:18px;
}


#titreNews{
font-size:13px;
color:blue;
}


et voici l'html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SSCA - Snow et Ski club ajoulot</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Site du snow et ski club ajoulot, qui se trouve dans le Jura, en Ajoie, à Fontenais. Le ski club organise des camps et des sorties durant toute la saison de ski. Il a créé une école de ski à Montvoie, et les cours sont donnés par des moniteurs J+S qualifié.">
<meta name="keywords" content="snow, snowboard, snowblad, ski, ski sur herbe, club, ski club, ski-club, ski club ajoulot, skiclubajoulot, ski-club ajoulot, ajoulot, ajoie, canton du jura, jurassien, jura, suisse, fontenais, porrentruy, comité, historique, inscription, tarif, moniteur, moniteur de ski, moniteur de snow, camp de ski, photo, camp, camps, sortie, pique-nique, Fontenais, activité, famille, jeune, vieux, détente, vacances, station, télésiège, arbalète, remontée mécanique">
<meta http-equiv="Content-Language" content="fr-ch">
<meta name="reply-to" content="ssca@ssca.ch">
<meta name="category" content="Sports">
<meta name="robots" content="all">
<meta name="distribution" content="global">
<meta name="revisit-after" content="7 days">
<meta name="copyright" content="© SSCA">
<meta name="identifier-url" content="http://www.ssca.ch">
<meta name="expires" content="never">
<link href="page.css" rel="stylesheet" type="text/css">
<link href="liens.css" rel="stylesheet" type="text/css">
<link href="menu.css" rel="stylesheet" type="text/css">

<style type="text/css">
<!--
/******** Feuille de styles du menu ************/
.menu{
 float: left;
 margin: 2px;
 margin-left:12px;
 padding: 2px;
 font-size:13px;
 font-family:Tahoma, Verdana, Arial;
 border:0px;
}
 
.titreMenu, .contenuMenu, .lienMenu{
 color: blue;
}
 
.titreMenu, .contenuMenu{
 border: 1px  outset blue;
 width: 110px;
 text-align: center;
 margin: 0px;
 padding: 0px;
}
 
.contenuMenu{
 display: none;
 position: absolute;
 background-color: #FFFFFF;
}
 
.menuOverflow{
 overflow: auto;
 height: 150px;
}
 
.itemOver{
 background-color: #AAAAFF;
}
 
.itemOut{
 background-color: #d8d8d8;
}
 
.lienMenu{
 text-decoration: none;
}
 
.crlf{
 clear: both;
 /*visibility: hidden;*/
}
 
/******** Fin de la feuille de styles du menu ************/
//-->
</style>
<script type="text/javascript">
<!--
/******** Debut du script du menu ************/
var timer = null;
var objOut = null;
 
function mouseOut(obj)
{
   var elmt = document.getElementById(obj.id+"Item");
   elmt.style.display = "none";
   
   document.getElementById(obj.id+"Titre").className="titreMenu itemOut";
 
   //instruction a placer a la fin de la fonction
   timer = null;
}
 
function fout(obj)
{
   objOut = obj;
   if (timer==null)
   {
      timer = setTimeout("mouseOut(objOut)","10");
   }
}
 
 
function fover(obj)
{
   var elmt;
   clearTimeout(timer);
   timer = null;
 
   elmt = document.getElementById(obj.id+"Item");
   elmt.style.display = "block";
 
   document.getElementById(obj.id+"Titre").className="titreMenu itemOver";
 
   if (objOut!=obj && objOut!=null)
   {
      mouseOut(objOut);
   }
}
/******** Fin du script du menu ************/
//-->
</script>

</head>

<body>
<div class="page"> 
  <div class="titre"></div>
  <div class="menuZone" >
 <!-- Debut code HTML du menu -->
<!-- Debut Menu 1 -->
<div class="menu" id="Menu1" onmouseout="fout(this)" onmouseover="fover(this)">
  <div class="titreMenu itemOut" id="Menu1Titre"><a href="accueil.html" class="lienMenu">Accueil</a></div> 
</div>
<!-- Fin Menu 1 -->
<!-- Debut Menu 2 -->
<div class="menu" id="Menu2" onmouseout="fout(this)" onmouseover="fover(this)">
  <div class="titreMenu itemOut" id="Menu2Titre"><a href="#" class="lienMenu">Le club</a></div>
 
  <div class="contenuMenu" id="Menu2Item">
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="historique.html" class="lienMenu">Historique</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="organisation.html" class="lienMenu">Organisation</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="tarifs.html" class="lienMenu">Tarifs</a></div>
  </div>
 
</div>
<!-- Fin Menu 2 -->
<!-- Debut Menu 3 -->
<div class="menu" id="Menu3" onmouseout="fout(this)" onmouseover="fover(this)">
  <div class="titreMenu itemOut" id="Menu2Titre"><a href="#" class="lienMenu">Ski et Snow</a></div>
 
  <div class="contenuMenu" id="Menu3Item">
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="moniteurs.html" class="lienMenu">Moniteurs</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="ecoleSki.html" class="lienMenu">Ecole de ski</a></div>
  </div>
 
</div>
<!-- Debut Menu 4 -->
<div class="menu" id="Menu4" onmouseout="fout(this)" onmouseover="fover(this)">
  <div class="titreMenu itemOut" id="Menu1Titre"><a href="agenda.html" class="lienMenu">Agenda</a></div> 
</div>
<!-- Fin Menu 4 -->
<!-- Debut Menu 5 -->
<div class="menu" id="Menu5" onmouseout="fout(this)" onmouseover="fover(this)">
  <div class="titreMenu itemOut" id="Menu1Titre"><a href="galerie.html" class="lienMenu">Galerie photos</a></div> 
</div>
<!-- Fin Menu 5 -->
<!-- Debut Menu 6 -->
<div class="menu" id="Menu6" onmouseout="fout(this)" onmouseover="fover(this)">
  <div class="titreMenu itemOut" id="Menu2Titre"><a href="#" class="lienMenu">Inscriptions</a></div>
 
  <div class="contenuMenu" id="Menu6Item">
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="inscription.html" class="lienMenu">Club</a></div>
      <div class="itemOut" onmouseout="this.className='itemOut'" onmouseover="this.className='itemOver'"><a href="inscription_sortie.html" class="lienMenu">Leysin</a></div>
      
  </div>
 
</div>
<div><br /><br /></div>
<hr class="crlf" />
<!-- Fin code HTML du menu --> 
</div>
  <div class="corps"> 
    <div class="gauche"> 
      <div id="texteEvenement"> 
        <div class="evenementHaut"></div>
        <div class="evenementCorps"> <strong>24-25.02.2007</strong> <br>
          &nbsp;&nbsp; Sortie &agrave; Leysin <br>
          <br>
          <strong>03.03.2007</strong> <br>
          &nbsp;&nbsp; Sortie OJ aux Savagnières</div>
        <div class="evenementBas"></div>
      </div>
      <div class="sponsorHaut"></div>
      <div class="sponsorCorps"><a href="http://www.novicar.ch" target="blank"><img src="images/novicar.png" alt="Novicar" border="0"/></a><br>
        <br>
        <a href="http://www.les-cj.ch" target="blank"><img src="images/cj.png" alt="Chemins de fer du Jura" border="0"/></a></div>
      <div class="sponsorBas"></div>
     <div id="texteEvenement"> 
		<div class="sponsorHaut"></div>
		<div class="sponsorCorps">Nombre de visites depuis le 01.02.07 :<br>
          <br>
			<script type="text/javascript" language="javascript" src="http://www.i-services.net/membres/compteur/compteur.php?user=101216&idcpt=81707&cache=0&read_only=0"></script></div>
		<div class="sponsorBas"></div>
	</div>
	</div>
    <div class="droite">
		<div class="droiteCorpsNews">
				
        <div id="texteTitreCorps">Accueil</div><br>
			
        <div class="newsHaut">
          <div id="titreNews"><strong>06.02.07</strong> : Camp de No&euml;l &agrave; 
            Warth</div>
        </div>
			<div id="texteEvenement">
				<div class="newsCorps">
				Les photos du camp de Noël sont disponibles dès à présent en cliquant ICI !
				</div>
			</div>
			<div class="newsBas"></div>
		
        
				
          
        </div>
		</div>
	</div>
  </div> 

  <div class="copyright">
    
  </div>
  <div id="texteCopyright">Copyright &copy; Tous droits réservés - SSCA 2004-2007
    <br><a href="mailto:ssca@ssca.ch">ssca@ssca.ch</a></div>
</div>
</body>
</html>


Si jamais le site est visible sur www.ssca.ch

Merci pour votre aide
Bonjour,

Tu devrais "coloriser" les backgrounds de tes blocs pour visualiser pouquoi tu as ces problèmes, ça te permettrait de voir que tu as aussi un peu trop de div!! et que tu peux faire sûrement plus simple. Vite fait ton bloc centre si tu lui donnes un height, il ne pourra plus s'allonger avec son contenu, juste un overflow: hidden par exemple devrais suffire.

Bon courage

<edit> base toi sur la mise en page obtenue sur FF et non sur IE comme critére de portabilité </edit>
Modifié par ghost (08 Feb 2007 - 23:53)
a écrit :
<edit> base toi sur la mise en page obtenue sur FF et non sur IE comme critére de portabilité </edit>


Mieux vaut effectivement utiliser firefox ou Opéra et pour gérer les différences ie firefox, utiliser les commentaires conditionnels.

ie n'est pas nul mais simplement différent.

arnaud
Modifié par art_no (14 Feb 2007 - 09:15)
Salut,
Moi je te conseillerais d'abord de completer ton doctype.
Ca devrais donner quelque chose comme çà:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">


Et puis surtout, surtout... évite les frames.
C'est vraiment pas conseillé.
Sujet clos
Aller à