[Résolu] Supprimer l'interligne entre des images sous Iexplorer

Ami du soir, Bonsoir,

Plus sérieusement, après plusieurs tentatives je m'en remet à vous. J'ai donc fais un menu graphique avec des images. Alors que Firefox me les colles bien les une sous les autres, IExplorer me laisse un bel interligne entre deux. J'ai essayer de supprimer cet interligne mais sans grand succès.

Si quelqu'un qui à déjà été confronté à se problème pourrait m'aider, ce serait très sympa. Merci d'avance.

PS: J'oubliais le code des mes pages .....

Ma page

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

Mon 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>

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;
line-height: 0em;
list-style-type: none;
}
.menugauche a {
margin: 0px;
color: #000000;
text-decoration: none;
}
.menugauche a:hover {
text-decoration: none;
}

J'ajouterais, que à la palce de

a écrit :
line-height: 0em;

j'ai deja tenter de mettre la taille de mes boutons height: 28px mais ça ne change rien au problème.

Merci

A+
Modifié par Cochonou (06 Jul 2006 - 13:21)

bonjour,

tes images sont alignées sur l'interligne tout comme le texte et laissent un espace pour les jambes des j, p, f , etc ... un vertical-align:top, et hop plus de jambes hypothetiques pour les images.
++

Bonsoir,

Tu parles sans doute de faire ceci dans mon CSS

img {
border-width: 0;
border-style: none;
vertical-align: top;
}

Le problème, de cette méthode, c'est que ça me l'applique pour toute les images, alors que j'aimerais l'appliquer uniquement pour mon menu.

J'ai essayer de faire une classe, pour les balises IMG

.image {
vertical-align: top;
}

IExplorer me l'intérprete comme je voudrais, a savoir qu'il ne colle que les images seulement ou j'ai mis <img class="image" .... mais Firefox me laisse toute les images collées.

Est ce Ie ou Firefox qui intérprete le code correctement ? Y a t'il une méthode pour forcer l'un ou l'autre navigateur à afficher le contenu comme je le voudrais ?

Merci

A++

Cochonou a écrit :
Est ce Ie ou Firefox qui intérprete le code correctement ? Y a t'il une méthode pour forcer l'un ou l'autre navigateur à afficher le contenu comme je le voudrais ?

Le problème, c'est que l'on ne sait pas exactement quel est ton code (on n'a que des petits bouts), et on n'a qu'une vague description du rendu que tu obtiens. Tu n'aurais pas une page en ligne, pour faire simple ? C'est un réflexe à prendre, la page en ligne. Un petit espace Free ou autre, un client FTP tout léger, et hop en envoie ça en ligne pour aller demander de l'aide sur Alsacréations.

Sinon, le sélecteur normalement adapté à ton problème est le suivant :

ul.menugauche img {vertical-align: top;}

Au fait, pourquoi vertical-align à top et pas à bottom ? J'ai dû louper une partie de l'explication moi…

bonjour,

heu, sans utiliser de class tu peut cibler directement les images du menu comme ceci.

.menugauche li a img {
border: 0;
vertical-align: top /* ou bottom mais pas baseline*/;
}

Cet interligne supplementaire a "eliminé" n'apparait generalement que dans IE (sauf erreur de ma part), ce qui revient a dire que l'absence de marge inferieur ajouté aux images dans firefoxe serait le comportement "normal" .

Si tu souhaite une marge inferieur aux images tu peut essayer un

img {
padding-bottom:2px;/* effectif dans ff et pas dans IE */
}

++

edit

a écrit :
Au fait, pourquoi vertical-align à top et pas à bottom ? J'ai dû louper une partie de l'explication moi…

IE applique a cet element un "vertical-align: baseline;" par defaut et gere l'image comme un element de type inline-block.
il suffit d'elimener cette valeur appliquer par defaut
L'histoire de la petite jambe aide a s'en rappeler , et top c'est plus court que bottom.

grillé par mpop !
++
Modifié par gcyrillus (06 Jul 2006 - 00:34)

B'jour,

J'ai essayé vos solutions à tous les deux mais le problème persiste, ou alors c'est que j'ai un sérieux problème d'ordre mental.

mpop a écrit :

Le problème, c'est que l'on ne sait pas exactement quel est ton code (on n'a que des petits bouts), et on n'a qu'une vague description du rendu que tu obtiens. Tu n'aurais pas une page en ligne, pour faire simple ? C'est un réflexe à prendre, la page en ligne. Un petit espace Free ou autre, un client FTP tout léger, et hop en envoie ça en ligne pour aller demander de l'aide sur Alsacréations.

Desolé, c'est vrai que sur ce coup je suis pas bien futé .

Ma page index

<!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" xml:lang="fr" lang="fr">
<head>
<title>F1-Pictures | Photos haute résolutions de F1 et monoplaces</title>
<meta name="description" content="Photos Formule 1 et monoplaces hautes résolutions" />
<meta name="keywords" content="photos foto photo fotos f1 formule un monoplace monoplaces ferrari mclaren renault schumacher villeneuve raikkonen montoya" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>

<div id="conteneur">
<div id="header"><?include "inc_header.php";?></div>
<div id="gauche"><?include "inc_menu.php";?></div>
<div id="droite"><?include "inc_partenaires.php";?></div>
<div id="centre">
<h1>Accueil</h1>
<?include "http://www.f1-pictures.com/bp_news.php";?>
</div>
<div id="pied" class="pieddepage"><?include "inc_footer.php";?></div>
</div>
	  

</body>
</html>

L'include de mon menu gauche

<h2>Photos 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>
</ul>
<h2>Photos Monoplaces</h2>
<ul class="menugauche">
<li><a href="http://www.f1-pictures.com/photos_a1gp.php" title="Photos des A1 GP"><img src="http://www.histoiredelaf1.com/test/design/btg_mono_a1gp.jpg" alt="Photos des A1 GP" /></a></li>
<li><a href="http://www.f1-pictures.com/photos_champcar.php" title="Photos des Champcar World Series"><img src="http://www.histoiredelaf1.com/test/design/btg_mono_champcar.jpg" alt="Photos des Champcar World Series" /></a></li>
<li><a href="http://www.f1-pictures.com/photos_formula_atlantic.php" title="Photos Formule Atlantique"><img src="http://www.histoiredelaf1.com/test/design/btg_mono_fatlantique.jpg" alt="Photos Formule Atlantique" /></a></li>
<li><a href="http://www.f1-pictures.com/photos_cff1600.php" title="Photos Formule Ford Canadienne 1600"><img src="http://www.histoiredelaf1.com/test/design/btg_mono_fford.jpg" alt="Photos Formule Ford Canadienne 1600" /></a></li>
</ul>
<h2>Photos Divers</h2>
<ul class="menugauche">
<li><a href="http://www.f1-pictures.com/photos_divers/autographes/autographes.php" title="Autographes de pilotes de F1"><img src="http://www.histoiredelaf1.com/test/design/btg_divers_signs.jpg" alt="Autographes de pilotes de F1" /></a></li>
<li><a href="http://www.f1-pictures.com/photos_circuits.php" title="Photos de circuits automobiles"><img src="http://www.histoiredelaf1.com/test/design/btg_divers_circuits.jpg" alt="Photos de circuits automobiles" /></a></li>
</ul>

Mon CSS

body {
font-family: 'Arial';
font-size: 10pt;
background-color: #CCCCCC;
}
#header {
background-image: url(http://www.histoiredelaf1.com/test/design/banniere.jpg);
width: 954px;
height: 230px;
margin-left: 23px;
}
.menuheader {
position: absolute;
background-color: transparent;
margin-top: 28px;
margin-left: -25px;
padding-left: 35px;
width: 120px;
}
.menuheader li {
margin: 0;
height: 25px;
list-style-type: none;
}
.menuheader a {
margin: 0px;
color: #000000;
text-decoration: none;
}
.menuheader a:hover {
text-decoration: none;
}
#conteneur {
position: absolute;
width: 1000px;
left: 50%;
margin-left: -500px;
background-image: url(http://www.histoiredelaf1.com/test/design/fond.jpg);
}
#centre {
background-color:#F0F0F0;
width: 629px;
margin-left: 208px;
margin-right: 163px;
text-align: center;
}
div#centre
{
height: 420px ; /*hauteur mini pour IE*/
}
html>body div#centre
{
height: auto;
min-height: 420px; /*hauteur mini pour les autres*/
} 
#centre h1 {
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-bottom: 5px;
}
#gauche {
position: absolute;
left: -12px;
width: 210px;
background-color: transparent;
text-align: center;
}
#gauche h2 {
background-image: url(http://www.histoiredelaf1.com/test/design/fondtitre.gif);
text-align: center;
font-weight: bold;
font-size: 10pt;
color: black;
text-transform: uppercase;
margin-left: 40px;
margin-top: 10px;
margin-bottom: -10px;
}
.menugauche li {
list-style-type: none;
height: 20px;
}
.menugauche li a img {
border: 0;
vertical-align: top;
}
#droite {
position: absolute;
right:28px;
width: 125px;
background-color:#F0F0F0;
text-align: center;
}
#droite h2 {
background-image: url(http://www.histoiredelaf1.com/test/design/fondtitre.gif);
text-align: center;
font-weight: bold;
font-size: 10pt;
color: black;
text-transform: uppercase;
margin-top: 10px;
margin-bottom: 5px;
}
#pied {
width: 954px;
height: 55px;
margin-left: 23px;
margin-right: 23px;
margin-top: 10px;
background-image: url(http://www.histoiredelaf1.com/test/design/fondfooter.jpg);
text-align: right;
}
.footer p {
margin-top: 10px;
margin-right: 5px;
color: #000000;
}
.pieddepage {
line-height: 3px;
}
img {
border-width: 0;
border-style: none;
padding-bottom:2px;
}

L'url de la page test http://www.histoiredelaf1.com/test/

Merci de votre aide
Modifié par Cochonou (06 Jul 2006 - 09:57)

.menugauche li a img {
margin: 0;
padding:0;
border: 0;
display: block;
}

plus de marge par default , de plus le vertical-align ne s'applique qu'avec la propriete display: table-cell; et IE n'interprete pas cette propriete

Hello,

C'est bon, j'ai réussi

Il suffisait "simplement" de mettre

.menugauche li a img {
margin: 0;
padding:0;
border: 0;
vertical-align: top;
}

Merci à tous pour votre aide Ô combien précieuse.

A++

Pour info: en français sur : vertical-align qui S’applique à : Tous les éléments en ligne et les cellules de tableaux.(IE implemente en partie ces valeurs ): http://wiki.media-box.net/documentation/css/vertical-align
++

alignement top et left sont les alignements par default.
nul besoin d'aller le programmer.
Par contre ce sont des marges qui sont mises par default qu'il faut supprimer.

Salut gcyrillus

a écrit :
Cet interligne supplementaire a "eliminé" n'apparait generalement que dans IE (sauf erreur de ma part), ce qui revient a dire que l'absence de marge inferieur ajouté aux images dans firefoxe serait le comportement "normal" .

Si dans ce cas Firefox ou Opera ne laissent aucun espace sous l'image (c'est à dire que celle ci ne se place pas sur la ligne de base), c'est qu'il y a un doctype transitional et qu'alors Firefox ou Opera interprète le document en mode « quasi-standard ». En mode standard (avec un doctype strict, HTML ou XHTLM) Firefox et Opera placeront bien l'image sur la ligne de base.

Concernant IE c'est plus compliqué et pas vraiment standard. Normalement IE n'ajoute pas cet espace si la boîte ne contient qu'une image ou plusieurs, que ce soit en mode strict ou en quirks mode. Sauf s'il y a un espace (ou de tabulation, retour à la ligne..) après la balise IMG...
Par exemple avec ce code, IE ne va pas créer de ligne :

<div><img src="img.jpg" alt="" /></div>

En revanche avec celui-ci, où un espace est inséré après l'image, ce ne sera plus le cas :

<div><img src="img.jpg" alt="" /> </div> 

Comportement que ne reproduisent pas Firefox ou Opera en mode quasi-standard.
(A noter en passant que ce n'est pas parce que IE créé la ligne qu'on pourra utiliser line-height. Mais bon, ça c'est une autre histoire)

Le cas des listes (ou éléments avec display:list-item) me semble encore bien particulier.
IE va créer une ligne par défaut, même si l'élément LI est complètement vide. (alors qu'avec Firefox il n'y aura pas de ligne, juste la hauteur des puces. Et si on supprime ces puces, plus de hauteur du tout)
L'ajout d'une image, avec ou sans espace dans le code n'y change rien. Elle vient simplement se placer sur une ligne qui existe déjà.
Ce qui a pour conséquence qu'en spécifiant display:block à l'image, il y aura toujours cette ligne de base (alors que dans un autre élément ça l'aurait supprimée) et qu'il faut alors recourir soit à vertical-align, soit à line-height et font-size (valeur 0 ou 1px), soit à passer directement l'élément LI en display inline et l'image en display block. (d'ailleurs, autre bug d'IE : display:block appliqué à LI ne semble pas annuler le list-item qu'il y a par défaut)
Modifié par Alan (06 Jul 2006 - 17:12)

Salut Jp,

jp94 a écrit :
alignement top et left sont les alignements par default.
nul besoin d'aller le programmer.

Pas du tout : par défaut le bas de l'image s'aligne verticalement sur la ligne de base (vertical-align: baseline).

jp94 a écrit :
Par contre ce sont des marges qui sont mises par default qu'il faut supprimer.

Je ne connais pas un seul navigateur qui applique par défaut des marges ou padding aux images ?
Modifié par Alan (06 Jul 2006 - 16:04)

bonsoir, merci pour les rectification et toutes ces informations supplementaires !
++

alors je dois avoir les seuls navigateurs, FF , Opera, Nscape qui mettent des marges aux images.
Regarde la difference l'image "GROS TITRES" positionnée sans margin:0; et
"A LA UNE AUJOURD'HUI" avec margin: 0;
img
Si je ne reve pas , c'est bien une marge qui est attribuée en haut et a gauche
Modifié par jp94 (07 Jul 2006 - 06:07)

Non ce n'est pas une marge. Dans le second cas, ce qui fait la différence ce n'est pas le margin:0, qui n'a aucun effet, mais le display: block.
Et dans le premier cas je ne vois d'ailleurs pas de margin:0, mais s'il n'y a pas cet écart, c'est du fait du font-size de 12px sur H1 (qui contient l'image).

Comme dit dans mon premier message, en mode standard (le rendu serait différent avec un doctype transitional pour Firefox et Opera au moins), même si une boîte ne contient qu'une image, cela créé une ligne, et donc une hauteur de ligne. Dans ce cas l'image est dans un un élément H1 qui a par défaut une grande taille de texte et une grande hauteur de ligne. Si bien que l'image n'est plus ici assez haute. Si tu diminues la taille du texte de H1 (ou son line-height), l'image sera assez haute.

Sinon en passant l'image en block, plus de ligne évidemment. Ou, avec la hauteur de 26px appliquée à H1, un vertical-align top sur l'image donnerait le même résultat.
Modifié par Alan (07 Jul 2006 - 09:18)

Ok ce que toi tu appelle une hauteur de ligne moi je l'appelle margin .
dans l'absolu c'est toi qui as raison ce n'est pas a proprement parler une marge mais c'est quand meme un espace créé par default pour un element inline
Modifié par jp94 (07 Jul 2006 - 09:44)

jp94 a écrit :
ce n'est pas a proprement parler une marge mais c'est quand meme un espace

oui mais ça n'a rien à voir du tout, c'est pourquoi il est parfaitement inutile de spécifier margin 0 ou padding 0