28173 sujets

CSS et mise en forme, CSS3

[résolu]2 pixels de vide sous une image sous IE7 et FF2

Bonjour j'ai un petit soucis,

Je me suis aperçu qu'il y avait un pixel de vide sous mes images sous IE7 et FF2 donc j'ai appliqué le style suivant aux image :


img {
	display: block;
}


Ca règle le probleme sous FF2 mais sous IE7 ça ne l'enlève pas (ça ajoute 10px entre chaque image ce qui fait 12px de décalage! ) Smiley decu
Mes images sont entre des balises de lien (a) et sont des éléments d'une liste verticale (ul, li) donc les margin et padding ont été annulés.
Modifié par tankia (19 Nov 2006 - 11:22)
Il faut penser qu'une image (au moins par défaut, en affichage de type en-ligne) est une sorte de caractère de texte, et qu'il est donc logique de voir apparaître des espaces entre les lignes de texte.

Tiens, ta question me fait penser que l'intitulé de l'item de la FAQ nommé « Espaces indésirables sous les images » ne doit pas être suffisamment clair. Je ne doute pas un seul instant que tu aies parcouru la FAQ avant de poser cette question, et la réponse a du échapper à ta vigilance.

http://forum.alsacreations.com/faq/#item58
(voir les « autres solutions » indiquées).
Modifié par mpop (18 Nov 2006 - 14:13)
mpop a écrit :
Tiens, ta question me fait penser que l'intitulé de l'item de la FAQ nommé « Espaces indésirables sous les images » ne doit pas être suffisamment clair.


Alala je me sens l'âme samedÿste aujourd'hui Smiley biggrin

Peut être que cet item est traduit par "comment créer des espaces indésirables sous les images" au lieu de "comment éviter des espaces indésirables sous les images".

Auquel cas ce serait la polysémie du propos qui induirait les stratégies d'évitement dont il est victime...

... ...

... Bon ben vé me coucher moi...
mpop a écrit :
Tiens, ta question me fait penser que l'intitulé de l'item de la FAQ nommé « Espaces indésirables sous les images » ne doit pas être suffisamment clair. Je ne doute pas un seul instant que tu aies parcouru la FAQ avant de poser cette question, et la réponse a du échapper à ta vigilance.

http://forum.alsacreations.com/faq/#item58
(voir les « autres solutions » indiquées).


Merci, mais j'avais déjà consulté ce point de la foire au question et j'avais testé toutes les solutions énoncées (display: block; font-size: 1px; line-height: 1px; vertical-align: middle) tout ça sur la balise img, mais rien n'a fonctionné. Ensuite j'ai testé line-height: 1px sur l'élément li et là au lieu d'avoir 2pixel sous chaque image je n'en avais plus qu'1 pixel. Donc j'ai tout de suite testé line-height: 0px; et là ça a fonctionné parfaitement.

Voici le code html :
<body>
	  
	  <!-- début du menu -->	
		<div id="menu">
			<ul id="bouton">
				<li><a href="#" id="bouton1" title="Cliquez pour voir où mène ce lien n°1"><img src="img/img_bouton.png" alt="Image d'un bouton" height="30" width="155" /></a></li>
				<li><a href="#" id="bouton2" title="Cliquez pour voir où mène ce lien n°2"><img src="img/img_bouton.png" alt="Image d'un bouton" height="30" width="155" /></a></li>
				<li><a href="#" id="bouton3" title="Cliquez pour voir où mène ce lien n°3"><img src="img/img_bouton.png" alt="Image d'un bouton" height="30" width="155" /></a></li>
			</ul>
		</div>
	  <!-- fin du menu -->

</body>


Et le code css :

body {
	margin: 0;
}
img {
	border: none;
	display: block;
}

#menu {
	float: left;
	margin: 0;
	padding: 0;
}

#bouton {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#bouton li {
	line-height: 0;
}
tankia a écrit :
Merci, mais j'avais déjà consulté ce point de la foire au question et j'avais testé toutes les solutions énoncées (display: block; font-size: 1px; line-height: 1px; vertical-align: middle) tout ça sur la balise img, mais rien n'a fonctionné.

Donc tu l'avais lu (c'est bien !) mais de travers (ça c'est dommage, par contre). Smiley cligne
a écrit :
- font-size: 1px sur l'élément contenant l'image (la valeur "0" ne fonctionnant pas sur certains navigateurs)
- line-height: 1px sur l'élément contenant l'image
- vertical-align: middle pour modifier l'alignement par défaut de l'image.

Mais c'est vrai que pour la troisième suggestion ça n'est pas explicite. D'ailleurs, je suggèrerais plutôt d'utiliser vertical-align... mais c'est un détail.
Ah oui autant pour moi... "sur l'élément qui contient l'image" j'ai zappé ce passage qui m'aurait fait gagner pas mal de temps de recherche Smiley cligne
Sujet clos
Aller à