Firefox : Problème d'alignement du site

Question

twin

15 Sep 2007 à 11:59

Bonjour à tous,

Sur mon site, j'ai un problème pour aligner mon site...Je souhaite centrer mon site; ce qui est chose faite sur IE. En revanche, sous Firefox, il se colle sur la gauche.
Mon problème, c'est que le site doit-être terminé pour Janvier 2008 et que pour l'instant, je ne peu plus avancé car je suis bloqué depuis 2 semaines sur le débugage.

Voici ma feuille de style :

/*Début Menu header */
*{
	padding: 0;
	margin: 0;
	border: 0;
	
	}


body {
  background-image: url("fond.gif" );
  background-repeat: repeat;
  background-color: #DEDBDB;
  	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding: 0px;
}
/*
.reflet-g {
	background-image: url("IMG/graphisme/reflet-g.jpg");
}
*/
ul#menu
{
	list-style-type: none ;
margin: 0;

padding: 0;
}
	
/* Suppression du margin, du padding et des puces du <ul> */
.lien_menu {
	font-family: verdana;
	font-size: 13px;
	font-weight: bold;
}


ul#menu li
{
	vertical-align: baseline;
	float: left;
	
	
}

ul#menu li a
{
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 135px ;
	line-height: 23px ;
	color: #000 ;
	text-align: center ;
	text-decoration: none ;
	background: url(IMG/graphisme/bouton_gris.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}

ul#menu li a:hover
{
	background: url(IMG/graphisme/bouton_vert.jpg) no-repeat 0 0px ; 
}
/*Fin Menu header */

/*Debut menu gauche*/
.lien_menu_gauche {
	font-family: verdana;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	color:#000;
	text-transform: uppercase;
}
.lien_menu_centre {
	font-family: verdana;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	color:#FF0000;
	text-transform: uppercase;
}
#navlist li
{
display: inline;
/* for IE5 and IE6 */
}

#navlist
{

width: 135px;
/* to display the list horizontaly */
font-family: verdana;
margin: 0 0 0 0em;
padding: 0;
}
.lien_menu_g {
	font-family: verdana;
	font-size: 12px;
}

#navlist a
{
/* extend the sensible area to the maximum with IE5 */
padding:2px;
display: block;
border-bottom: 1px #999 solid;
text-align: left;
text-decoration: none;
color: #000;
}

#navlist a:hover { background-color: #CCCCCC; }
#navlist a:visited { color: #000; }

/*Fin menu gauche*/

/*Début menu droite*/
.cat_droite {
	font-family: verdana;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
	font-variant: small-caps;
}
.cat2_droite {
	font-family: verdana;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
	font-variant: small-caps;
	color:#E8E6E6;
}
.jour {
	font-family: verdana;
	font-size: 12px;
	font-style: italic;
	font-weight: bold;
	font-variant: small-caps;
}

.liste_essais {
	font-family: verdana;
	font-size: 10px;
}
.newsletter {
	font-family: verdana;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
	font-style: normal;
}

input {
	border:1px solid black;
	background-color:white;
	font-family:"verdana";
	font-size:12px;
	color:black;
		}
select, option {
background-color:white;
color:black;
}
textarea {
border:1px solid black;
background-color:white;
font-family:"trebuchet ms",sans-serif;
color:black;
}
/*Fin menu droite*/
/*Début Lien images*/
a img {
 border:0px;
}
a:hover img {
 border:0px;
}
picto {
border: 0;
padding : 0;
margin : 0;
display: block;
background: url(IMG/graphisme/carre.jpg);
font-size: 1px 
}

/*Fin Lien images*/
/*Copyright*/
copyright {
	font-family: verdana;
	font-size: 9px;
	color: #666666;
}
/*Contenu accueil*/
.ssactu_principale {
	width: 97%;
	background-position: left bottom;
	border: solid 1px #CCCCCC;
	line-height: 13px;
	margin: 6px;
}
.titre_home {
	font-family: verdana;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
	font-variant: small-caps;
	color: #8DC63F;
}

a.lien_home {
	font-family: verdana;
	font-size: 11px;
	color: black;
	text-decoration: none;
	font-style: normal;
}
a:hover.lien_home {
    color: white;
	font-family: verdana;
	font-size: 11px;
}
a.sslien_home {
	font-family: verdana;
	font-size: 11px;
	color: black;
	text-decoration: none;
	font-style: normal;
}
a:hover.sslien_home {
    color: #707070;
	font-family: verdana;
	font-size: 11px;
}
.dates {
	font-family: verdana;
	font-size: 11px;
	color: #8DC63F;
	text-decoration: none;
	font-style: normal;
}

/*Tableau avec Firefox*/
.firefox {
	line-height: 14px;
}
.IE {
	line-height: 12px;
}
.correction {
	line-height: 20px;
}
/*Footer*/
.copyright {
	font-family: verdana;
	font-size: 11px;
	color: #454544;
	text-decoration: none;
	font-style: normal;
}
/*Forum*/
.lien_menu_gauche2 {
	font-family: verdana;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	color:#000;
	text-transform: uppercase;
}

#navlist2
{

width: 298px;
/* to display the list horizontaly */
font-family: verdana;
margin: 0 0 0 0px;
padding: 0;
}

#navlist2 a
{
/* extend the sensible area to the maximum with IE5 */
padding:2px;
display: block;
border-bottom: 1px #999 solid;
text-align: left;
text-decoration: none;
color: #000;
}

#navlist2 a:hover { background-color: #CCCCCC; }
#navlist2 a:visited { color: #000; }

/*article en em*/
.article {
	font-family: verdana;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
	font-style: normal;
	margin: 0;
    padding: 0;
}
.article2 {
  font-family: "Trebuchet MS";
  font-size: 12px;
  color: #1B3307;
  	font-weight: bold;
}
.bloc {
padding:3px
}
/*page archives */
.annee {
	font-family: verdana;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
	font-variant: small-caps;
	color: black;
}
.header {
	margin: 2px;
}

.test {
  font-family: "Trebuchet MS";
  font-size: 11px;
  color: #1B3307;
  letter-spacing: 1px;
  	font-weight: bold;
  }
  .test2 li{
list-style: none;
background : url(IMG/graphisme/carre.jpg) no-repeat 3px;
padding-left : 15px;
line-height: 14px;
}

Et ma page source :

#CACHE{7200}
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html dir="#LANG_DIR" lang="#LANG">
<head>
<title>[(#NOM_SITE_SPIP|textebrut)]</title>
[<meta name="description" content="(#DESCRIPTIF_SITE_SPIP|couper{150}|textebrut)" />]
<meta http-equiv="Content-Type" content="text/html; charset=#CHARSET">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="dist/favicon.ico" />
</head>
<body>

<table width="947" border="0" align="center" cellpadding="0" cellspacing="0"  bgcolor="#999999">
  <tr>
    <td>
<table width="945" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="4"><INCLURE{fond=header}{style}></td>
  </tr>

  <tr>
    <td width="135" valign="top" background="IMG/graphisme/mg_fond.jpg" bgcolor="#ECECEA"><INCLURE{fond=menu_gauche}{style}></td>
    <td colspan="2" valign="top" bgcolor="#FFFFFF">
	<!--Début Info principale-->
	<div class="ssactu_principale">
	<span class="titre_home"> &nbsp; <img src="IMG/graphisme/carre.jpg" width="8" height="8">&nbsp;<BOUCLE_importante (ARTICLES) {titre_mot=Actu_importante} {0,1}> [(#TITRE)]</span><br> 
	<span class="liste_essais">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Le [(#DATE|nom_jour)] [(#DATE|affdate)] &agrave; [(#DATE|affdate{"H:i"})] </span>
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="60%">[(#LOGO_ARTICLE|left|#URL_ARTICLE)]</td>
    <td width="40%" valign="top" bgcolor="#8DC63F" class="firefox"><a href="#URL_ARTICLE" class="lien_home">[(#INTRODUCTION|couper{350})]</a></BOUCLE_importante></td>
  </tr>
</table>
	
	</div>
	<!--Fin Info principale-->
	<!--Fin Infos sous principale-->
	<div class="ssactu_principale">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="2" background="IMG/graphisme/fond_vert.jpg">&nbsp;<img src="IMG/graphisme/md_fleche_noir.png" width="5" height="8">
      <BOUCLE_article (ARTICLES) {0,1}{par date}{inverse}>      &nbsp;<span class="jour">[(#TITRE)]</span> </td>
    </tr>
  <tr>
    <td width="100">#LOGO_RUBRIQUE</td>
    <td width="468"> <span class="copyright"><img src="IMG/graphisme/carre.jpg" width="8" height="8">&nbsp;[(#DATE|jour)].[(#DATE|mois)].[(#DATE|annee)] -</span><a href="#URL_ARTICLE" class="sslien_home"> [(#INTRODUCTION|couper{160})] </a></BOUCLE_article></td>
  </tr>
</table>
	</div>
		<div class="ssactu_principale">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="2" background="IMG/graphisme/fond_vert.jpg">&nbsp;<img src="IMG/graphisme/md_fleche_noir.png" width="5" height="8">
      <BOUCLE_article2 (ARTICLES) {0,2}{par date}{inverse}{n-1,1}>      &nbsp;<span class="jour">[(#TITRE)]</span> </td>
    </tr>
  <tr>
    <td width="100">#LOGO_RUBRIQUE</td>
    <td width="468"> <span class="copyright"><img src="IMG/graphisme/carre.jpg" width="8" height="8">&nbsp;[(#DATE|jour)].[(#DATE|mois)].[(#DATE|annee)] - <a href="#URL_ARTICLE" class="sslien_home">[(#INTRODUCTION|couper{160})] </a></BOUCLE_article2></td>
  </tr>
</table>
	</div>
		<div class="ssactu_principale">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="2" background="IMG/graphisme/fond_vert.jpg">&nbsp;<img src="IMG/graphisme/md_fleche_noir.png" width="5" height="8">
      <BOUCLE_article3 (ARTICLES) {0,3}{par date}{inverse}{n-1,3}>      &nbsp;  <span class="jour">[(#TITRE)]</span></td>
    </tr>
  <tr>
    <td width="100">#LOGO_RUBRIQUE</td>
    <td width="468"> <span class="copyright"><img src="IMG/graphisme/carre.jpg" width="8" height="8">&nbsp;[(#DATE|jour)].[(#DATE|mois)].[(#DATE|annee)] - <a href="#URL_ARTICLE" class="sslien_home">[(#INTRODUCTION|couper{160})] </a></BOUCLE_article3></td>
  </tr>
</table>
	</div>
			<div class="ssactu_principale">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="2" background="IMG/graphisme/fond_vert.jpg">&nbsp;<img src="IMG/graphisme/md_fleche_noir.png" width="5" height="8">
      <BOUCLE_article4 (ARTICLES) {0,4}{par date}{inverse}{n-1,4}>      &nbsp;  <span class="jour">[(#TITRE)]</span></td>
    </tr>
  <tr>
    <td width="100">#LOGO_RUBRIQUE</td>
    <td width="468"> <span class="copyright"><img src="IMG/graphisme/carre.jpg" width="8" height="8">&nbsp;[(#DATE|jour)].[(#DATE|mois)].[(#DATE|annee)] - <a href="#URL_ARTICLE" class="sslien_home">[(#INTRODUCTION|couper{160})] </a></BOUCLE_article4></td>
  </tr>
</table>
	</div>
	<!--Fin Infos sous principale-->
	<!--Début Liste actualités-->
	<div class="ssactu_principale">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="4%" background="IMG/graphisme/fond_vert.jpg">&nbsp;<img src="IMG/graphisme/md_fleche_noir-inv.png" width="8" height="8"></td>
    <td width="96%" background="IMG/graphisme/fond_vert.jpg"  class="jour"> Suite des actualit&eacute;s </td>
  </tr>
  <tr>
    <td colspan="2">
 <BOUCLE_articlem(ARTICLES){par date}{inverse}{0,20}> <BOUCLE_premierdujour(ARTICLES){id_article}{doublons}>
<br><ul class="test2">
<li><span class="dates"><strong>[(#DATE|jour)]/[(#DATE|mois)] :</strong> </span> <a href="#URL_ARTICLE" title="[(#TITRE)]" class="sslien_home">[(#TITRE|couper{80})]</a> </li> 
</BOUCLE_premierdujour>
        <BOUCLE_JOUR(ARTICLES) {jour_relatif=0}{doublons}{par date}{inverse} > 
            <li><span class="dates"><strong>[(#DATE|jour)]/[(#DATE|mois)] :</strong></span> <a href="#URL_ARTICLE" title="[(#TITRE)]" class="sslien_home">[(#TITRE|couper{80})]</a></li>
        </BOUCLE_JOUR>
    </ul>
  </BOUCLE_articlem>
  <br><a href="#"><img src="IMG/graphisme/home_centre_archives.jpg" width="488" height="21" border="0" align="right"></a></td>
    </tr>
</table>
	</div>
	<!--Fin Liste actualités-->
	</td>
    <td width="300" valign="top" background="IMG/graphisme/fond_infogp.jpg" bgcolor="#ECECEA"><INCLURE{fond=menu_droite}{style}></td>
  </tr>
  <tr>
    <td background="IMG/graphisme/fond_footer.jpg" bgcolor="#CECFD1"><INCLURE{fond=rss}{style}></td>
    <td width="469" valign="middle" background="IMG/graphisme/fond_footer.jpg" bgcolor="#CECFD1" class="copyright"><div align="center">Droits de reproduction et de diffusion r&eacute;serv&eacute;s &copy;<a href="/" class="sslien_home" title="Formule 1 - Toile F1"> ToileF1 - Formule 1</a></div></td>
    <td width="41" background="IMG/graphisme/fond_footer.jpg" bgcolor="#CECFD1">&nbsp;</td>
    <td valign="bottom" background="IMG/graphisme/fond_footer.jpg" bgcolor="#CECFD1"></td>
  </tr>
</table>
	</td>
  </tr>
</table>

</body>
</html>

Merci d'avance pour votre aide Smiley cligne

Modifié par twin (15 Sep 2007 - 12:00)

niuxe

Modérateur

15 Sep 2007 à 12:23

Salut,

Fait un petit tour par là Smiley cligne

++

Sujet clos

CSS et mise en forme, CSS3

Firefox : Problème d'alignement du site