28173 sujets

CSS et mise en forme, CSS3

[Résolu] Quelques pixels trop haut


<table border="0" cellspacing="0" cellpadding="0">
	<colgroup>
	<col width="120">
	<col width="660">
	<col width="251">
	</colgroup>
	  <tr>
           <td style="background-image:url(images/chef_16.jpg)">
               <img width="120" height="180" alt="chef12" src="images/chef_12.jpg">
           </td>
           <td rowspan="2">
               <?php include("./textes/texte2-$page$ext[$page]"); ?>
           </td>
           <td style="background-image:url(images/chef_17.jpg)">
     		 <img width="251" height="180" alt="chef14" src="images/chef_14.jpg">
           </td>
       </tr>
       <tr>
           <td style="background-image:url(images/chef_16.jpg);vertical-align:bottom;"><img
		   width="120" height="180" alt="chef18" src="images/chef_18.jpg"></td>
           <td style="background-image:url(images/chef_17.jpg);vertical-align:bottom;"><img
		   width="251" height="180" alt="chef19" src="images/chef_19.jpg"></td>
       </tr>
	</table>


Bonjour,

Le problème est que mes deux imagettes (chef_18 et chef_19) sont placées quelques pixels au-dessus de la bordure sur firefox. deux soirées sans succès, une idée ?
Modifié par deca05 (28 Jun 2006 - 20:54)
Bonsoir,

En restant avec un Doctype Strict, il faut utiliser pour ces images {vertical-align: bottom;} ou {display:block;}

L'espace sous les images correspond à l'espace sous la ligne de base (ou ligne de pied) réservé pour les lettre à jambage inférieur (ou hampe descendante. Comme: p; q; j; y etc..) ou d'autres caractères.
avec {display:block;}, les images n'étant plus « inline », il n'y aura plus cette ligne de base.
avec {vertical-align bottom;}, les images vont se placer en bas, mais si l'image est petite, il faudra peut être diminuer le line-height.

En mode standard, même si un élément (comme TD ici) ne contient qu'une image ou plusieurs images, mais sans texte, alors cet espace sous la ligne de base est quand même conservé.

En revanche, avec un Doctype transitional, des navigateurs comme Opera ou Firefox seront en mode « quasi standard » et ne conserveront plus cet espace dans ce cas.

Plutôt que de changer de Doctype, il est mieux d'utiliser vertical-align ou display:block; car rien n'oblige les navigateurs à avoir un mode « quasi standard » et rien n'oblige ce mode « quasi standard » d'être comme ceci ou cela.
Modifié par Alan (28 Jun 2006 - 00:17)
Bonjour et merci de vos réponses,

Super détaillée comme explication. Je t'engage tout de suite comme webmaster. Zut je n'ai pas les moyens de mes ambitions.

J'essaye ça ce soir et je vous tiens au courant.

Je regarde aussi le lien vers la faq mais avant de poster, j'ai essayé en vain pendant deux soirs J'ai aussi cherché sur ce site et ailleurs sans succès. D'où mon post.

a+
<img style="display:block;" width="251" height="180" alt="chef19" src="images/chef_19.jpg">


Merci, merci, merci.

Cela marche au poil.

Deca
Sujet clos
Aller à