CSS : Comment supprimer l'interligne entre les images

[Cochonou]

Hello tous l'monde,

J'ai fais un menu avec des boutons sous formes d'images. Le problème, est que j'ai un monstrueux interligne alors que je n'en veux aucun.

J'ai deja essayé avec le code :

line-height: ....

ça me le réduit bien mais il reste un espace. Si quelqu'un à une idée de la façon dont je pourrais corriger ça, ce serait sympa. Merci

Pour ceux qui désirent voir le code :

CSS

#gauche {
position: absolute;
left:0;
width: 185px;
background-color: #F0F0F0;
}
.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}

Ma Page

<div id="gauche"><?php include "inc_menu.php";?></div>

Mon Include

<ul class="menugauche">
<li><a href="http://www.f1-pictures.com/photos_f1_gp.php"><img src="http://www.f1-pictures.com/images/menu/f1_menu_gp_1.jpg" srcover="http://www.f1-pictures.com/images/menu/f1_menu_gp_2.jpg"></a></li>
<li><a href="http://www.f1-pictures.com/photos_f1_essais.php"><img src="http://www.f1-pictures.com/images/menu/f1_menu_essais_1.jpg" srcover="http://www.f1-pictures.com/images/menu/f1_menu_essais_2.jpg"></a></li>
<li><a href="http://www.f1-pictures.com/photos_f1_event.php"><img src="http://www.f1-pictures.com/images/menu/f1_menu_expo_1.jpg" srcover="http://www.f1-pictures.com/images/menu/f1_menu_expo_2.jpg"></a></li>

<li><a href="http://www.f1-pictures.com/photos_a1gp.php"><img src="http://www.f1-pictures.com/images/menu/mono_a1gp_1.jpg" srcover="http://www.f1-pictures.com/images/menu/mono_a1gp_2.jpg"></a></li>
<li><a href="http://www.f1-pictures.com/photos_f3000.php"><img src="http://www.f1-pictures.com/images/menu/mono_f3000_1.jpg" srcover="http://www.f1-pictures.com/images/menu/mono_f3000_2.jpg"></a></li>
<li><a href="http://www.f1-pictures.com/photos_formula_atlantic.php"><img src="http://www.f1-pictures.com/images/menu/mono_fatlantique_1.jpg" srcover="http://www.f1-pictures.com/images/menu/mono_fatlantique_2.jpg"></a></li>
<li><a href="http://www.f1-pictures.com/photos_cff1600.php"><img src="http://www.f1-pictures.com/images/menu/mono_fford_1.jpg" srcover="http://www.f1-pictures.com/images/menu/mono_fford_2.jpg"></a></li>
<li><a href="http://www.f1-pictures.com/photos_champcar.php"><img src="http://www.f1-pictures.com/images/menu/mono_champcar_1.jpg" srcover="http://www.f1-pictures.com/images/menu/mono_champcar_2.jpg"></a></li>

<li><a href="http://www.f1-pictures.com/photos_divers/autographes/autographes.php"><img src="http://www.f1-pictures.com/images/menu/divers_autographe_1.jpg" srcover="http://www.f1-pictures.com/images/menu/divers_autographe_2.jpg"></a></li>
<li><a href="http://www.f1-pictures.com/photos_circuits.php"><img src="http://www.f1-pictures.com/images/menu/divers_circuits_1.jpg" srcover="http://www.f1-pictures.com/images/menu/divers_circuits_2.jpg"></a></li>
</ul>

Merci

A+

[e-kiwi]

doctype xhtml strict ? ca fait quoi si tu le passes en transitional ?

[SIBELIUS]

Hello,

En précisant la hauteur de ligne, c'est ok chez moi :

Code: Tout sélectionner

.menugauche li {
margin: 0px;
height: 20px;
}

Ps : attention, tes balises image ne sont pas fermées si tu es en Strict

[Cochonou]

Hello,

En précisant la hauteur de ligne, c'est ok chez moi :

Code: Tout sélectionner

.menugauche li {
margin: 0px;
height: 20px;
}

Ps : attention, tes balises image ne sont pas fermées si tu es en Strict

Re,

Merci pour le coup de pouce c'était bien ça. Pour le strict a vrai dire je n'y ai pas encore prêter attention, je ferais ça après avoir fais ma page

Merci d'avance

A+

[e-kiwi]

hum, il vaut mieux faire sa page en ayant choisi son doctype que l'inverse

[Cochonou]

Rebonjour, c'est de nouveau moi et mon problème.

En fait, je croyais que la solution postée plus haut fonctionnait, mais ce n'est pas le cas. Enfin, si mais ça fonctionne uniquement sous Firefox. Sous internet Explorer j'ai toujours cet interligne entre mes images

Je remet mon code :

Ma page web:

<div id="gauche"><?include "inc_menu.php";?></div>

L'include :

<h2>Formule 1</h2>
<ul class="menugauche">
<li><a href="http://www.f1-pictures.com/photos_f1_gp.php" title="Photos de Grand Prix F1"><img src="http://www.histoiredelaf1.com/test/design/btg_f1_gp.jpg" alt="Photos de Grand Prix F1" /></a></li>
<li><a href="http://www.f1-pictures.com/photos_f1_essais.php" title="Photos des essais privés de F1"><img src="http://www.histoiredelaf1.com/test/design/btg_f1_test.jpg" alt="Photos des essais privés de F1" /></a></li>
<li><a href="http://www.f1-pictures.com/photos_f1_event.php" title="Photos de diverses expositions ou rassemblements de F1"><img src="http://www.histoiredelaf1.com/test/design/btg_f1_expo.jpg" alt="Photos de diverses expositions ou rassemblements de F1" /></a></li>
<li><img src="http://www.histoiredelaf1.com/test/design/btg_bas.jpg" /></li>
</ul>

Et pour finir, le CSS:

#gauche {
position: absolute;
left: -12px;
width: 210px;
background-color: transparent;
}
#gauche h2 {
background-image: url(http://www.histoiredelaf1.com/test/design/fondtitre.gif);
text-align: center;
font-size: 10pt;
font-weight: bold;
color: black;
text-transform: uppercase;
margin-top: 10px;
margin-left: 40px;
}
.menugauche li {
margin: 0px;
height: 28px;
list-style-type: none;
}
.menugauche a {
margin: 0px;
color: #000000;
text-decoration: none;
}
.menugauche a:hover {
text-decoration: none;
}

Si quelqu'un peut m'aider à résoudre les caprices de IE je lui en serais très reconnaissant. Merci

A+