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é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é</a></li>
<li><a href="">N'Zérékoré</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> 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> 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>
