Discussion :

[feralp]

bonjour

Je developpe un site, heberger ici pour l'instant : http://www.in-web.net/dev/museodirect/

j'ai un espace (environ 4 pixels) en dessous des liens images, ça le fait sous firefox, ie8, pas sur opéra (on le remarque bien en sélectionnant l'image avec firefox).

doctype : XHTML 1.0 Strict

dans ma feuille de style j'ai mit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

img{margin: 0; padding: 0; border: none;}

J'ai testé de chercher des erreurs via le validateur w3c mais ça me dit que tout est valide.

Auriez-vous une idée ? merci.

[baroutch]

au lieu de mettre img{...}, essaye avec img a{...}

[feralp]

ça ne change rien.

si je rajoute : display: block; ça fonctionne mais ça ne m'arrange pas car du coup la propriété text-align n'a plus d'effet sur les images.

y'a t'il une autre solution ?

(Du coup, faudrais déplacer ce sujet dans le forum CSS )

[feralp]

J'ai trouvé :

je ne sais pas pourquoi mais en rajoutant : vertical-align:middle;, ça fonctionne.

Du coup :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

img{border: none; vertical-align: middle;}

[FoxLeRenard]

Bonjour,
Oui c'est plus a sa place en CSS
Juste une remarque, si tu avais eu tes images dans le body,
tu n'aurais pas eu ce probléme.

En effet ce ne sont pas les images qui étaient en causes , mais
les héritages de tout les DIV

[Candygirl]

J'ai trouvé :

je ne sais pas pourquoi mais en rajoutant : vertical-align:middle;, ça fonctionne.

Du coup :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

img{border: none; vertical-align: middle;}

Par défaut ton image est positionnée sur la baseline de son parent. L'espace au-dessous est l'espace nécessaire pour afficher les jambages des lettres (il augmente donc avec le font-size). Le vertical-align:middle aligne le milieu de ton image sur cette même ligne de base. L'espace que tu visualisais avant est donc à présent caché derrière ton image pour autant que sa taille soit supérieure au line-height.

Dans le cas d'une très petite image tu pourrais très bien te retrouver encore confronté à cet "espacement parasite" aussi bien au-dessous qu'au-dessus de ton image.

Si tu veux conserver ton centrage des images malgré un display:block, tu peux leur appliquer un margin: 0 auto;

En effet ce ne sont pas les images qui étaient en causes , mais
les héritages de tout les DIV

Je ne comprends pas ce que tu veux dire ?

[Macmillenium]

Par défaut ton image est positionnée sur la baseline de son parent. L'espace au-dessous est l'espace nécessaire pour afficher les jambages des lettres (il augmente donc avec le font-size). Le vertical-align:middle aligne le milieu de ton image sur cette même ligne de base. L'espace que tu visualisais avant est donc à présent caché derrière ton image pour autant que sa taille soit supérieure au line-height..

Ne pas oublier de préciser, CandyGirl, que c'est dû au mode de rendu standard déclenché par la DTD Strict, ce comportement est absent dans le mode de rendu Almost standard déclenché par une DTD Transitional (On peut dire que ce mode a été conçu pour éviter ce genre de comportement).

[FoxLeRenard]

Envoyé par FoxLeRenard
En effet ce ne sont pas les images qui étaient en causes , mais
les héritages de tout les DIV Je ne comprends pas ce que tu veux dire ?

Juste que l'image étant dans une suite d'éléments DIV etc.. il y a héritage des espaces naturels de ces éléments

[Candygirl]

Ne pas oublier de préciser, CandyGirl, que c'est dû au mode de rendu standard déclenché par la DTD Strict

En faite ce n'est pas un oubli mais une omission volontaire ^^

Je l'avais noté puis j'ai juste fait un petit test pour m'ôter un doute, et, euh, j'ai du rafraîchir genre la mauvaise fenêtre puisque je n'ai pas fait apparaître ce que je voulais alors que maintenant si. De plus il me semblait vaguement que cette problèmatique pouvait parfois apparaître sur les anciens IE hors doctype strict ? du coup j'ai préféré ne rien dire à ce sujet

Merci pour la précision

[feralp]

Par défaut ton image est positionnée sur la baseline de son parent. L'espace au-dessous est l'espace nécessaire pour afficher les jambages des lettres (il augmente donc avec le font-size). Le vertical-align:middle aligne le milieu de ton image sur cette même ligne de base. L'espace que tu visualisais avant est donc à présent caché derrière ton image pour autant que sa taille soit supérieure au line-height.

Merci Candygirl pour ces explications.

Juste que l'image étant dans une suite d'éléments DIV etc.. il y a héritage des espaces naturels de ces éléments.

Les blocs DIV n'ont par défaut aucun espace, non ?