Décalage dans FF pas dans IE

Question

Blaze

6 Aug 2008 à 14:39

Bonjour, j'en appelle à votre aide ayant essayé tout ce qui était possible et imaginable. Smiley sweatdrop

Je suis en train de construire un nouveau site. Je l'ai complètement fait sous IE 7. Il s'affiche 'plus ou moins' bien par contre sous Firefox, la troisième colonne se décale complètement et vient s'afficher en-dessous des autres contenus. J'ai cru que le div était trop grand mais queneni.

Pouvez-vous y jeter un oeil et voir s'il y a quelque chose d'anormal. Je vous préviens de suite, je ne suis pas expert, la mise en forme du code est sans doute donc quelque peu hasardeuse.

Merci

L'adresse en question : http://tournai.celeonet.fr/v4


<div id="blocalaune">
</div>
<div id="titreprinc">
<?php
include 'actu.php';
?>

</div>
<div id="webtv">
<center><script type="text/javascript" src="swfobject.js"></script> <div id="player">This text will be replaced</div> <script type="text/javascript">var so = new SWFObject('player.swf','mpl','280','280','9');so.addParam('allowscriptaccess','always');so.addParam('allowfullscreen','true');so.addParam('flashvars','&file=intrompg2.flv');so.write('player');</script>
</div></center>
<div id="championnat">
<h1>Championnat</h1>
<?php
	include 'miniclassement.php';
	?>
</div>
<div id="autreactu">
<h1>Autres nouvelles</h1>
<?php
include 'autre_actu.php';
?>
</div>
<div id="titre_webtv">

</div>
<div id="matchs">
<?php include 'bloc_matchs.php';?>
</div>
<div id="presse">
<h1>Dans les journaux</h1>
</div>
<div id="special">
<h1>A savoir...</h1>
<?php
include 'infos_pratiques.php';
?>
</div>
<div id="toutesnews">
<div id="jeunes">
<?php
include 'newsjeunes_index.php';
?>
</div>
<div id="feminines">
<?php
include 'newsfems_index.php';
?>
</div>
<div id="site">
<?php
include 'news_site_index.php';
?>
</div>
<div id="divers_news">
<?php
include 'news_divers_index.php';
?>
</div>
</div>

mon css


body
{
   margin: 0; 
   background-color: #aa0a21;
   width: 900px;
   margin: auto; /* Pour centrer notre page */
   margin-top: 50px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 20px;    /* Idem pour le bas du navigateur */

}

p
{
   font-size: 14px; /* Paragraphes de 14 pixels */
}
h1
{
   font-size: 22px; /* Titres de 22 pixels */
   color:#d2b349;	
   padding-top:5px;
   padding-left:5px;
}

a
{
   text-decoration: none; /* Les liens ne seront plus soulignés */
   color: red; /* Les liens seront en rouge au lieu de bleu */
   font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */
}
a:hover /* Quand le visiteur pointe sur le lien */
{
   text-decoration: underline; /* Le lien deviendra souligné quand on pointera dessus */
   color: green; /* Le lien sera écrit en vert quand on pointera dessus */
}

a:active /* Quand le visiteur clique sur le lien */
{
   background-color: #FFCC66;
}

#header
{
   position:relative; 
   width:902px; 
   height:100px;
   background-image: url("header.png");
   background-repeat: no-repeat;
   
}

#header img
{
   position:absolute; 
   bottom:0;
   padding-left:5px;
   padding-bottom:5px;
   }
   
#blocalaune
{
margin: 0; 
float: left; 
border-right:1px solid #d2b349;
border-bottom:1px solid #d2b349;
width: 270px;
height: 330px;
background-image: url(alaune.png);
background-attachment: no-repeat ;	
}

#titreprinc
{
margin: 0; 
float: left; 
border-right:1px solid #d2b349;
border-bottom:1px solid #d2b349;
width: 318px;
height: 320px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;	
}

#titreprinc a
{
text-decoration: none;
color: #d2b349;
}

#titreprinc a:hover
{
   text-decoration: underline; /* Le lien deviendra souligné quand on pointera dessus */
   color: white; /* Le lien sera écrit en vert quand on pointera dessus */
}

#titreprinc h1
{
font-size: 22px;
margin:0;
padding-top:5px;
padding-bottom:5px;
}

#titreprinc h2
{
font-size: 13px;
margin:0;
padding-top:5px;
padding-bottom:5px;
}

#titreprinc h3
{
font-size: 11px;
color:white;
margin:0;
padding-top:5px;
padding-bottom:5px;
}

#titreprinc hr
{
color: #a29f9a;
background-color: #a29f9a;
height: 1px;
border: 0;
}

#bloc_news
{
margin: 0; 
float: left; 
width: 650px;
min-height: 320px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
color:#ffffff;		
}

#bloc_news h1
{
color:#d2b349;	
}

#bloc_news p
{
font-size: 11px;
}

#bloc_news_droite
{ 
width: 210px;
padding-top:35px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;	
color:#ffffff;	
}

#bloc_news_droite a
{
text-decoration: none;
color: #d2b349;
}

#bloc_news_droite a:hover
{
   text-decoration: underline; /* Le lien deviendra souligné quand on pointera dessus */
   color: white; /* Le lien sera écrit en vert quand on pointera dessus */
}

#bloc_news_droite h1
{ 
border-right:1px solid #d2b349;
border-bottom:1px solid #d2b349;
}

#bloc_news_droite p
{ 

}

#bloc_news_droite img
{ 
padding-top:5px;
padding-bottom:5px;
}

#webtv
{

margin:0;
width: 290px;
height: 331px;	
}

#championnat
{
margin: 0; 
float: left; 
border-right:1px solid #d2b349;
width: 270px;
height: 400px;	
}

#championnat h1
{
margin:0;
background-color: #900519;
border-bottom:1px solid #d2b349;
margin-bottom:5px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
color:#d2b349;	
font-size: 11px;
}

#championnat td
{
color:#ffffff;	
font-size: 10px;
}

#championnat table
{
color:#ffffff;	
font-size: 10px;
}

#autreactu
{
margin: 0; 
float: left; 
border-right:1px solid #d2b349;
border-bottom:1px solid #d2b349;
width: 328px;
height: 400px;	
font-size: 11px;
}

#autreactu h1
{
margin:0;
background-color: #900519;
border-bottom:1px solid #d2b349;
padding-top:5px;
padding-bottom:5px;
padding-right:5px;
padding-left:5px;
margin-bottom:15px;
color:#d2b349;	
font-size: 11px;
}

#autreactu h2
{
font-size: 12px;
margin:0;
padding-top:5px;
padding-bottom:5px;
padding-right:5px;
}

#autreactu a
{
text-decoration: none;
color: white;
}

#autreactu a:hover
{
   text-decoration: underline; /* Le lien deviendra souligné quand on pointera dessus */
   color: white; /* Le lien sera écrit en vert quand on pointera dessus */
}

#autreactu li
{
list-style-type: none;
background-image: url(images/site/puce_li.gif);
background-repeat: no-repeat;
background-position: 2% 65%;
padding-top:5px;
padding-left : 20px;
padding-bottom:5px;
padding-right:5px;
}

#titre_webtv
{
margin: 0; 
border-bottom:1px solid #d2b349;
width: 290px;
height: 400px;	
}

#matchs
{
margin: 0; 
float: left; 
border-right:1px solid #d2b349;
border-bottom:1px solid #d2b349;
width: 270px;
height: 150px;	
}

#matchs h1
{
margin:0;
background-color: #900519;
border-top:1px solid #d2b349;
border-bottom:1px solid #d2b349;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
color:#d2b349;	
font-size: 11px;
}

.matchs_equipe
{
float: left;
width: 100px;
height: 40px;
color:#ffffff;	
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
}

.element_matchs_equipe
{

}

.matchs_info
{
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
color:#ffffff;
}

#matchs p
{
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
color:#d2b349;	
font-size: 11px;
}

#presse
{
margin: 0; 
float: left; 
border-right:1px solid #d2b349;
border-bottom:1px solid #d2b349;
width: 328px;
height: 150px;	
}

#presse h1
{
background-color: #900519;
border-bottom:1px solid #d2b349;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
color:#d2b349;	
font-size: 11px;
}

#special
{
margin: 0; 
border-bottom:1px solid #d2b349;
width: 290px;
height: 150px;	
}

#special h1
{
margin:0;
background-color: #900519;
border-bottom:1px solid #d2b349;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
color:#d2b349;	
font-size: 11px;
}

#special h2
{
margin:0;
padding-top:3px;
padding-bottom:3px;
padding-left:5px;
padding-right:5px;
}

#special a
{
color:#d2b349;	
font-size: 11px;
}

#toutesnews
{
   min-height: 400px;
   width: 900px;
}

#jeunes
{
   float: left; 
   min-height: 120px;
   width: 400px;
  padding-top:25px;
padding-bottom:5px;
padding-left:50px;
padding-right:5px;
color:#ffffff;
}

#jeunes h1
{
margin:0;
padding-bottom:5px;
color:#d2b349;	
font-size: 12px;
}

#jeunes a
{
color:#ffffff;	
font-size: 11px;
}

#jeunes li
{
color:#ffffff;	
font-size: 11px;
list-style-type: none;
background-image: url(images/site/puce_li.gif);
background-repeat: no-repeat;
background-position: 0% 65%;
padding-left: 5px;

}

#feminines
{
   width: 400px;
  padding-top:25px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
color:#ffffff;
}

#feminines h1
{
margin:0;
padding-bottom:5px;
color:#d2b349;	
font-size: 12px;
}

#feminines a
{
color:#ffffff;	
font-size: 11px;
}

#feminines li
{
color:#ffffff;	
font-size: 11px;
list-style-type: none;
background-image: url(images/site/puce_li.gif);
background-repeat: no-repeat;
background-position: 0% 65%;
padding-left: 5px;

}

#site
{
float: left; 
min-height: 180px;
width: 400px;
padding-top:25px;
padding-bottom:5px;
padding-left:50px;
padding-right:5px;
color:#ffffff;
}

#site h1
{
margin:0;
padding-bottom:5px;
color:#d2b349;	
font-size: 12px;
}

#site a
{
color:#ffffff;	
font-size: 11px;
}

#site li
{
color:#ffffff;	
font-size: 11px;
list-style-type: none;
background-image: url(images/site/puce_li.gif);
background-repeat: no-repeat;
background-position: 0% 65%;
padding-left: 5px;

}

#divers_news
{
width: 400px;
padding-top:25px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
color:#ffffff;
}

#divers_news h1
{
margin:0;
padding-bottom:5px;
color:#d2b349;	
font-size: 12px;
}

#divers_news a
{
color:#ffffff;	
font-size: 11px;
}

#divers_news li
{
color:#ffffff;	
font-size: 11px;
list-style-type: none;
background-image: url(images/site/puce_li.gif);
background-repeat: no-repeat;
background-position: 0% 65%;
padding-left: 5px;

}

#centre
{
   border-width:1px;
   border-color:#d2b349;
   border-style:solid;
   min-height: 800px;
   width: 900px;
}

#footer
{
   width: 900px;
   height: 100px;
   
}

Modifié par Blaze (06 Aug 2008 - 14:39)

Blaze

6 Aug 2008 à 15:00

Il fallait que je poste sur ce forum pour trouver la solution. Désolé du dérangement Smiley confused

fvsch

6 Aug 2008 à 15:02

Bonjour,

Blaze a écrit :
j'en appelle à votre aide ayant essayé tout ce qui était possible et imaginable.

Apparemment, tu n'as pas imaginé qu'un code HTML invalide pouvait te poser quelques problèmes. Le validateur donne plus de 200 erreurs HTML pour cette page. Ce n'est pas forcément l'origine de ton problème, mais tant que ta page n'est pas valide (ou que toutes les erreurs ne sont pas identifiées clairement), tu ne peux pas en être sûr. Smiley cligne

Je dirais que tu dois avoir des problèmes d'imbrication. Comme tu utilises un certain nombre de DIV et que:
1. ton code n'est pas indenté;
2. les </div> qui ferment les principaux blocs ne sont pas identifiés (sous la forme </div>, par exemple);
le risque d'erreur est grand.

Pour information, Opera présente le même rendu que Firefox pour cette page.

Edit: même si tu as pu régler le problème, mes remarques ci-dessus tiennent toujours. Smiley cligne

Modifié par Florent V. (06 Aug 2008 - 15:03)

Blaze

6 Aug 2008 à 15:05

Merci Florent, je vais m'atteler à corriger les erreurs.

Sujet clos

CSS et mise en forme, CSS3

Décalage dans FF pas dans IE