[Résolu] Problème avec les bordure d'un bloc par SouCaline - page 1

Salut tout le monde!

J'ai un p'tit soucis. J'ai acheté un kit graphique sur le net et je me suis aperçu qu'il n'était pas valide xHTML et CSS alors je me suis dit que j'allais faire ma version valide.

Malheureusement j'ai un p'tit soucis.
En effet sous IE, mon design fonctionne très bien (pour une fois que IE ça fonctionne :lol:

)
Sous FF, quand je ne met pas de bordure sur mon dernier bloc il me fait un énorme espacement et quand je met une bordure il n'y a plus cet espacement. Bien sur je souhaiterais ne pas avoir cette bordure et que mon bloc soit collé à celui qui est au dessus.

Je vous fournis quelques images:
Sans bordure. Le bloc est décalé en dessous:
Image utilisateur

Avec bordure. Le bloc n'est pas décalé:
Image utilisateur

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Mon super site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <style type="text/css">
BODY
{
width:767px;
margin:auto;
margin-top:20px;
margin-bottom:20px;
background-image:url("images/fond.jpg");
font-family: Verdana, serif;
}

#header
{
width: 767px;
height: 94px;
background-image: url("images/header.jpg");
background-repeat: no-repeat;
}

#headerMenu
{
width: 767px;
height: 75px;
background-image: url("images/menu.jpg");
background-repeat: no-repeat;
}

#menu
{
float: left;
width: 132px;
background-image: url("images/fondgauche.jpg");
}

P.menuTitre
{
background-image: url("images/gauche.jpg");
background-repeat: no-repeat;
width: 132px;
height: 27px;
text-align: center;
font-size: 0.7em;
font-weight: bold;
color: rgb(51,51,51);
margin-bottom: 0px;
margin-top: 15px;
}

UL.menuLiens
{
padding: 0px;
margin: 0px;
text-align: center;
list-style-type: none;
}

A.menuLiens
{
color: #000000;
text-decoration: none;
font-size: 0.7em;
font-weight: bold;
font-family: Verdana, serif;
}

A:hover.menuLiens
{
color:#476070;
text-decoration:none;
}

P.log
{
background-image: url("images/log.jpg");
background-repeat: no-repeat;
width: 132px;
height: 156px;
}

#corps
{
margin-left: 132px;
margin-bottom: 0px;
padding: 5px;

background-color: #a5b7c3;
background-image: url("images/corpsdroit.jpg");
background-repeat: repeat-y;
background-position: top right;
}

#footer
{
width: 767px;
height: 59px;
margin-top:0px;
text-align: center;

background-image: url("images/footer.jpg");
background-repeat: no-repeat;
border: 1px dotted green;
}
</style>
</head>

<body>



<div id="header">

</div>
   <div id="headerMenu">

   </div>



<div id="menu">
<p class="log"></p>
<p class="menuTitre">RUBRIQUE</p>
<ul class="menuLiens">
<li><a href="page1.html" class="menuLiens">Menu</a></li>
<li><a href="page2.html" class="menuLiens">Menu</a></li>
<li><a href="page3.html" class="menuLiens">Menu</a></li>
</ul>

<p class="menuTitre">Titre menu</p>
<ul class="menuLiens">
<li><a href="page1.html" class="menuLiens">Lien</a></li>
<li><a href="page2.html" class="menuLiens">Lien</a></li>
<li><a href="page3.html" class="menuLiens">Lien</a></li>
</ul>
</div>



<div id="corps">
<h1>Mon super site</h1>

<p>
Bienvenue sur mon super site !<br />
Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D
</p>

<h2>A qui s'adresse ce site ?</h2>
<p>
A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br />
Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
</p>

<h2>L'auteur</h2>
<p>
L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.<br />
Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
</p>
</div>



<div id="footer">
<p>Copyright "Tout pourri Corporation" 2005, tous droits réservés</p>
</div>

</body>
</html>

SouCaline

24 juin 2006 à 10:42:05