28220 sujets

CSS et mise en forme, CSS3

j'ai un petit probleme sous netscape avec ce source

http://gazette.hc.free.fr/HC/_mod_map.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
lang="fr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>map</title>
	<link rel="StyleSheet" href="test.css" type="text/css" />
	
</head>
<body>

<table>
<tr>
	<td ><div class="plante"><img src="vide.gif" alt=" "/></div></td>
</tr>
</table>
</body>
</html>


* {
padding: 0; 
margin: 0;
}

body {
	background-color:grey;
}

table{
	border-spacing:0;
	border-width:0;
	padding:20px;
}


table td div{
	height:60px;
	width:60px;
	padding: 0; 
	margin: 0;
}

div{background-color:#00f; }

td{  
background-color:#f00; 
padding: 0; 
margin:0;
}

.plante{
	width:60px;
	height:60px;
}


j'ai un espace qui apparait entre le bas du div et la bordure de la cellule

et vraiment je n'arrive pas à trouver à quelle propriété il est lié
Modifié par Chatissimus (15 Aug 2005 - 20:35)
Bonjour Chatissimus,

A priori, la réponse complète est dans cet ancien article d'Eric Meyer: Images, Tables, and Mysterious Gaps (en anglais) et se résume à :
- appliquer un display:block aux images
- ou appliquer un vertical-align: bottom; aux images

(Le problème étant que les images sont par défaut alignées verticalement sur la ligne de base du texte, que celui-ci soit présent ou non dans la cellule. Cette ligne de base du texte laisse une place de quelques pixels en-dessous pour les jambages des lettres comme p g etc.)
Modifié par Laurent Denis (15 Aug 2005 - 16:18)
merci effectivement ca passe mieux maintenant Smiley lol

par contre je comprend pas pourquoi l'espace est en dessous du div qui encadre l'image :? et pas entre l'image et le bord du div