Marge en haut en bas dans une table

Version imprimable

Bonjour,

Question bête (et surement simple) mais je galère dessus depuis plusieurs heures et je m'en sort pas...
J'ai un code html tout simple que voilà :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <html> <head> <title>Test</title> </head> <body> <table border="1" cellpadding="0" cellspacing="0"> <tr> <td> <img src="ligne.gif" width="985" height="4" border="0" /> </td> </tr> </table> </body> </html>
Je ne comprend pas pourquoi sous IE6/IE7 la hauteur de la "ligne" de ma table ne correspond pas à la hauteur de mon image (4 pixels)
Il y a un espacement en haut et en bas, comme si j'avais défini des marges... (La bordure de ma table n'encadre pas ma ligne.gif)
Si je rajoute un valign="top", ma ligne remonte mais j'ai toujours cette marge.

En revanche, cela fonctionne très bien sous Firefox...

Merci
Steph

Ne sachant pas ce que tu souhaites faire, voici deux solutions :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<!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>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Untitled</title>
    <style type="text/css" title="text/css">
/* <![CDATA[ */
* { margin:0; padding:0; }
#cadre { width:985px; height:4px; border:1px solid black; }
img { border:none; }
/* ]]> */
</style>
</head>
<body>
<div id="cadre">
         <img src="ligne.gif" />
</div>
</body>
</html>

ou encore plus simple:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<!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>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Untitled</title>
    <style type="text/css" title="text/css">
/* <![CDATA[ */
* { margin:0; padding:0; }
#cadre { width:985px; height:4px; border:1px solid black; background-color:red;}
img { border:none; }
/* ]]> */
</style>
</head>
<body>
<div id="cadre"></div>
</body>
</html>

02/03/2007, 22h17
Steph4fun

Merci pour ta réponse Blueice, mais ça me donne le même résultat (avec l'exemple 1). J'ai toujours une sorte de marge dans la table avec IE...
Ca m'énerve car je sais pas trop pourquoi...
J'ai rien à faire de précis, c'est juste une sorte de test...
Merci
03/03/2007, 08h07
blueice

Il n'y a pas de table dans l'exemple que je t'ai donné... 8O
05/03/2007, 09h12
Steph4fun

Houps, pardon..
Je voulais dire que le cadre défini "n'entoure" pas l'image au pixel près...
Le cadre entoure l'image mais avec une sorte de marge...