Problème de bordure avec display:inline;

Bonjour à tous,

tout d'abord je tiens à préciser que cela ne fait pas longtemps que je découpe en CSS et je n'ai pas encore le niveau !

Alors mon problème est plutôt complexe (enfin à mes yeux ^^) :

Pour ma découpe actuelle mais également pour l'avant dernière version de mon site, j'ai été obligé de mettre sur l'ensemble du contenu une valeur display:inline; car certains élements (images...) ne se centraient pas sous FireFox (alors que sur IE oui) et y'a que çà qui marchait

Le problème c'est que quand je rajoute çà, çà me met des bordures sur les images ! Constatez par vous même : http://kirjava83.free.fr/v3 (entre les 2 parties du header et sur l'image de fin du menu où l'image est légèrement trop haute)

Alors ma question est : comment je peux faire pour garder la valeur display:inline; (pour ne pas perdre l'alignement central de certains élements sous FF) tout en évitant les marges...

Voila j'espère que vous pourrez m'aider, je joint mes sources (vous trouverez surement que c'est mal organisé et qu'il y a pleins de trucs inutiles...!), merci d'avance !!

"Source HTML" a écrit :
<div id="contenu">
<img src="images/header_alba-jessica.gif" alt="Header" />
<img src="images/cine_alba-jessica.gif" alt="Photos de Jessica Alba" />


<div class= "separateur"></div>

<div class="gauche">

<div class="langue">
<img src="images/langue.gif" alt="" />

<div class="drapeaux">
<img src="images/drap_fr.gif" alt="" /> &nbsp;&nbsp;&nbsp; <a href="#"><img

src="images/drap_en.gif" alt="" /></a>
</div>

</div>

<div class= "separateur2"></div>

<div class="menu_gauche">

<img src="images/menu.gif" alt="" />

<div class= "separateur"></div>

<div class="texte_menu">
<?php
include('menu.php');
?>
</div>

<img src="images/bas_menu.gif" alt="" />
</div>

</div>

<div class="centre">
// LE RESTE N'EST PAS IMPORTANT

"Source CSS" a écrit :
body {
background-color:#3070B0; /*Couleur de fond de la page Web*/
color:#FFFFFF; /*Couleur du texte*/
font-family:Verdana, Arial, Helvetica, sans-serif; /*Polices d’écriture*/
font-size:9pt; /*Taille d’écriture*/
padding:0; /*Pour que la page n’ai aucune marge*/
margin:0; /*Pour que la page n’ai aucune marge*/
text-align:center;
}

div#contenu {
width:800px; /*Largeur du design*/
margin:0 auto 0 -400px; /*Marges du design ( la 4eme marge représente la moitié de la

largeur du div*/
position:absolute;
top:25px; /*25px entre le coin supérieur de l’écran et le design*/
left:50%;/*50% de marge ( cela centrera le design )*/
border:1px solid #000000; /* Bordure encadrant le design */
}

div#contenu img {
display:inline;
border:0;
padding:0; /*Pour que la page n’ai aucune marge*/
margin:0; /*Pour que la page n’ai aucune marge*/
}

/* Reglages personnels : */

img.center { display:inline; }

table { margin:auto; }

ul , li { margin:0; padding:0; list-style-type:none; } /* Pas de marges automatique dans les

listes, ni de puces */

a { color:#FFFFFF; text-decoration:none; }/*Paramètres des liens*/
a:hover { color:#2B7FCD; }/*Paramètres des liens quand le pointeur est sur ceux-ci*/

h1 { text-align:center; margin:0; }/*Le texte des balises h1 est centré ( car il est souvent

utilisé pour les titres), et cette balise n’a plus de marge automatique */
p { margin:0; padding:0; }/*Pas de marges automatiques sur les <p> */

img { display:block ; border:0; }/*Aucune bordure sur les <img>*/
a img { display:block ; border:0; }/*Aucune bordure sur les liens <img>*/

div.clear { clear:both; }/*Annule les paramètres précédent */


div.gauche {
width:170px;
height:auto;
float:left;
margin-left:20px !important;
margin-left:10px;
}

div.langue {
background-image:url('images/fond_langue.gif') ;
width:170px;
height:68px;
}

div.drapeaux {
margin-top:6px !important;
margin-top:3px;
}

div.separateur {
height :14px ;
}

div.separateur2 {
height :21px ;
}

div.menu_gauche {
background-image:url('images/fond_menu.gif') ;
background-repeat:repeat-y ;
width:170px;
}
//LE RESTE N'EST PAS IMPORTANT

Modifié par kirjava (16 Jun 2006 - 19:14)