Forum d'entraide PHPFrance

Bonjour,

J'ai fais un template de site avec css qui s,affiche parfaitement comme je veux, mais sous firefox j'ai des spaces de trop. Mes menus sont dans des box et il y a de grands espaces en les boites sous firefox et dans IE c'est parfait. Quelqu'un pourrait me dire ce qui ne va pas merci d.avance. je joinds mon code

Code : Tout sélectionner

<!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=uft-8" />
<title>infoguinée.com</title>
<style type="text/css">
body {
font-family:"Courier New", Courier, monospace;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#conteneur 
{

position: relative;
width: 800px;
height: 1100px;
margin: 0 auto; 
background:#FFFFFF;
}
#centre
{
position: absolute;
border: 1px solid #c5d4f3;
display: block;
width: 489px;
height: 250px;
margin-top: 5px;
margin-left: 155px;
margin-right: 155px;
}
#centre1
{
position: absolute;
border: 1px solid #c5d4f3;
display: block;
width: 489px;
height: 240px;
margin-top: 262px;
margin-left: 155px;
margin-right: 155px;
}
#box1{
position: absolute;
border: 1px solid #c5d4f3 ;
left:0;
display: block ;
width: 150px;
height: 220px ;
margin-top: 5px;

}
#box2
{
position:absolute;
border: 1px solid #c5d4f3 ;
right:0;
display: block ;
width: 150px;
height: 140px;
margin-top: 5px;
}
#box3{
position: absolute;
border: 1px solid #c5d4f3 ;
left:0;
display: block ;
width: 150px;
height: 215px ;
margin-top: 5px;

}
#box4{
position: absolute;
border: 1px solid #c5d4f3 ;
left:0;
display: block ;
width: 150px;
height: 240px ;
margin-top: 253px;

}
#box5{
position: absolute;
border: 1px solid #c5d4f3 ;
left:0;
display: block ;
width: 150px;
height: 170px ;
margin-top: 539px;

}
#box6{
position: absolute;
border: 1px solid #c5d4f3 ;
left:0;
display: block ;
width: 150px;
height: 170px ;
margin-top: 759px;

}
#box7{
position: absolute;
border: 1px solid #c5d4f3 ;
right:0;
display: block ;
width: 150px;
height: 120px ;
margin-top: 193px;

}
#box8{
position: absolute;
border: 1px solid #c5d4f3 ;
right:0;
display: block ;
width: 150px;
height: 120px ;
margin-top: 341px;

}
#box9{
position: absolute;
border: 1px solid #c5d4f3 ;
right:0;
display: block ;
width: 150px;
height: 120px ;
margin-top: 373px;

}
#pied {
position:absolute;
height: 30px;
width: 489px;
margin-top: 890px;
margin-left: 155px;
margin-right: 155px;
display: block ;
border: 1px solid #c5d4f3 ;

}
#boxheader
{
position: absolute;
background:url(images/box_bg_1.png);
border: 1px solid #c5d4f3 ;
left:0;
display: block ;
width: 150px;
height: 20px ;
margin-top: 5px;
}
#boxheader1
{
position: absolute;
background:url(images/box_bg_1.png);
border: 1px solid #c5d4f3 ;
right:0;
display: block ;
width: 150px;
height: 20px ;
margin-top: 5px;
}
#header {
display: block ;
border: 1px solid #c5d4f3 ;
margin-top: 8px;
width: 800px;
height: 80px;

}
#haut {
height: 70px;
width: 800px;
display: block ;
border: 1px solid #c5d4f3 ;
margin-top: 5px;
}
#boxheader2
{
position: absolute;
background:url(images/box_bg_1.png);
border: 1px solid #c5d4f3 ;
display: block ;
width: 489px;
height: 20px ;
margin-top:5px;
margin-left: 155px;
margin-right: 155px;
}
#boxheader3
{
position: absolute;
background:url(images/box_bg_1.png);
border: 1px solid #c5d4f3 ;
display: block ;
width: 489px;
height: 20px ;
margin-top:262px;
margin-left: 155px;
margin-right: 155px;
}
#boxheader4
{
position: absolute;
background:url(images/box_bg_1.png);
border: 1px solid #c5d4f3 ;
left:0;
display: block ;
width: 150px;
height: 20px ;
margin-top: 253px;
}
#boxheader5
{
position: absolute;
background:url(images/box_bg_1.png);
border: 1px solid #c5d4f3 ;
left:0;
display: block ;
width: 150px;
height: 20px ;
margin-top: 517px;
}
#boxheader6
{
position: absolute;
background:url(images/box_bg_1.png);
border: 1px solid #c5d4f3 ;
left:0;
display: block ;
width: 150px;
height: 20px ;
margin-top: 739px;
}
#boxheader7
{
position: absolute;
background:url(images/box_bg_1.png);
border: 1px solid #c5d4f3 ;
right:0;
display: block ;
width: 150px;
height: 20px ;
margin-top: 172px;
}
#boxheader8
{
position: absolute;
background:url(images/box_bg_1.png);
border: 1px solid #c5d4f3 ;
right:0;
display: block ;
width: 150px;
height: 20px ;
margin-top: 320px;
}
#boxheader9
{
position: absolute;
background:url(images/box_bg_1.png);
border: 1px solid #c5d4f3 ;
right:0;
display: block ;
width: 150px;
height: 20px ;
margin-top: 370px;
}
p {margin: 0 0 0 5px;
	color:#0e3673;}

#menu a:hover 
{
  background: #e3effb;
  text-decoration: none;
     
}
a
{
	text-decoration: none;
}
ul
{
	margin-top: 30px;
	list-style:;
}
</style>
</head>

<body>
<div id="conteneur">

	  <div id="header">header de largeur fixe : 750px <a href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">(voir tous les modèles)</a>

</div>
	  <div id="haut">
			<!-- Google CSE Search Box Begins  -->
			<!--  Champ de recherche Google -->
<center>
<FORM method=GET action="http://www.google.fr/search">
<TABLE bgcolor="#FFFFFF"><tr><td>
<A HREF="http://www.google.fr">
<IMG SRC="http://www.google.com/logos/Logo_40wht.gif" border="0" 
ALT="Google" align="absmiddle"></A>
<INPUT TYPE=text name=q size=31 maxlength=255 value="">
<INPUT TYPE=hidden name=hl value=fr>
<INPUT type=submit name=btnG VALUE="Recherche Google">
</td></tr></TABLE>
</FORM>
</center>
<!-- Google -->
<!-- Google CSE Search Box Ends -->

	  </div>
	  <div id="boxheader">
		<center><font color="#0e3673"><b>Nouvelles</b></font></center>	
	  </div>
	  <div id="box1">
			<ul id="menu">
			<li><a href="">Actualité</a></li>
			<li><a href="">Politique</a></li>
			<li><a href="">Économie</a></li>
			<li><a href="">Société</a></li>
			<li><a href="">International</a></li>
			<li><a href="">Analyse</a></li>
			<li><a href="">Santé</a></li>
			<li><a href="">Environnement</a></li>
			<li><a href="">Arts et Culture</a></li>
			<li><a href="">Sport</a></li>
			<li><a href="">Faits Divers</a></li>
			</ul>
  </div>
	   <div id="boxheader4">
		<center><font color="#0e3673"><b>La Presse</b></font></center></div>
		<div id="box4">
			<ul class="menu">
			<li><a href="">Le Lynx</a></li>
			<li><a href="">Jeune Afrique</a></li>
			<li><a href="">Horoya</a></li>
			<li><a href="">La Lance</a></li>
			<li><a href="">L'Indépendant</a></li>
			<li><a href="">Libération</a></li>
			<li><a href="">La vérité</a></li>
			<li><a href="">L'Enquêteur</a></li>
			<li><a href="">L'Économiste</a></li>
			<li><a href="">Le diplomate</a></li>
			<li><a href="">3P-Plus</a></li>
			<li><a href="">La Nouvelle Tribune</a></li>
			</ul>
			
  </div>
  	  <div id="boxheader1">
  	     <center><font color="#0e3673"><b>Le Pays </b></font></center>
  	   </div>
	  <div id="box2">
			<ul class="menu">
			<li><a href="">Pr&eacute;sentation</a></li>
			<li><a href="">Gouvernement</a></li>
			<li><a href="">Histoire</a></li>
			<li><a href="">Conakry</a></li>
			<li><a href="">Kankan</a></li>
			<li><a href="">Lab&eacute;</a></li>
			<li><a href="">N'Z&eacute;r&eacute;kor&eacute;</a></li>
			</ul>
			
  </div>
  <div id="boxheader7">
		<center><font color="#0e3673"><b>Multimédia</b></font></center></div>
	  <div id="box7">
			<ul class="menu">
			<li><a href="">RFI</a></li>
			<li><a href="">TV5</a></li>
			<li><a href="">VOA</a></li>
			<li><a href="">BBC</a></li>
			</ul>
			
  </div>
  <div id="boxheader8">
		<center><font color="#0e3673"><b>Lu pour vous</b></font></center></div>
	  <div id="box8">
			<ul class="menu">
			<li><a href="">rien</a></li>
			<li><a href="">rien</a></li>
			<li><a href="">rien</a></li>
			<li><a href="">rien</a></li>
			</ul>
			
  </div>
  <div id="boxheader5">
		<center><font color="#0e3673"><b>Services</b></font></center></div>
  <div id="box5">
			<ul class="menu">
			<li><a href="">Convertisseur de devise</a></li>
			<li><a href="">Hôtels et Restaurants</a></li>
			<li><a href="">Annuaire diplomatique</a></li>
			<li><a href="">Écoles de formations</a></li>
			<li><a href="">Universités</a></li>
			</ul>
			
  </div>
  <div id="boxheader6">
		<center><font color="#0e3673"><b>Partenaires</b></font></center></div>
  <div id="box6">
			<ul class="menu">
			<li><a href="">Convertisseur de devise</a></li>
			<li><a href="">Hôtels et Restaurants</a></li>
			<li><a href="">Annuaire diplomatique</a></li>
			<li><a href="">Écoles de formations</a></li>
			<li><a href="">Universités</a></li>
			</ul>
			
  </div>
  <div id="boxheader2"><font color="#0e3673"><b>&nbsp;&nbsp;Actualité</b></font></div>
  	<div id="centre">
	  <br />
	  <br />
  	  <p>partie centrale qui "pousse" les colones vers le bas.<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />

  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />

  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br /></p>
  </div>
  <div id="boxheader3"><font color="#0e3673"><b>&nbsp;&nbsp;Analyse</b></font></div>
  <div id="centre1">
	  <br />
	  <br />
	  <p>
  	  partie centrale qui "pousse" les colones vers le bas.<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />

  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />

  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br /></p>
  </div>
	  
	  <div id="pied">pied de page de largeur fixe : 750px </div>
</div>
</body>
</html>

Salut, je ne suis pas un expert en css mais il me semble que tu a défini des id et tu utilises des valeur telles que "0.8em". Préfère les unités en px ou en pts pour firefox, ainsi que l'utilisation de classes plutôt que d'id. C'est une suggestion mais ça n'a peut être rien à voir, essaye ça quand même.

il te faudrait etre plus explicite quant a la nature de ton probleme car personnellement j'ai testé ton code sous IE et FF et je ne vois aucune différence....

Merci pour vos reponses rapides.

Jed avait raison, je crois que le problème se situe au niveau du em. Je l'ai changé pour px et rearrangé la grosseur du texte et ca fonctionne.

Guilt92 : le problème en fait était que l'espace entre les boites de menus sous explorer était environs de 5 ppx alors que sous firefox c'était p-e de 10 à 15 pixel.

Merci encore

Forum d'entraide PHPFrance

css fonctionnant sur IE mais pas sur firefox

css fonctionnant sur IE mais pas sur firefox