Petit décallage entre balise </tr>

endok · 25/08/2011, 14h14

Bonjour,
voilà je fais une newsletter avec des tableaux. Le soucis c'est que tout est nikel sur firefox, safari... mais sur ie après chaque balise </tr> il y a un décallage blanc:/ ET quand je l'envoie sur thunderbird en newsletter sur ootlook il y a toujours ce petit décalage blanc.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!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">
<head>
    <title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
 
<body>
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="text-align: center">
<tbody>
 
	<tr>
		<td colspan="2" style="vertical-align: top; color: #000000; font-family: Verdana; font-size: 9px; text-align: center;">
			<img src="http://www.fixeven.fr/maurad/images/Promod-01.jpg" alt="" /><img src="http://www.fixeven.fr/maurad/images/Promod-02.jpg" alt="" />
		</td>
	</tr>
	<tr>
		<td colspan="2" style="vertical-align: top; color: #000000; font-family: Verdana; font-size: 9px; text-align: center;">
			<img src="http://www.fixeven.fr/maurad/images/Promod-03.jpg" alt="" /><img src="http://www.fixeven.fr/maurad/images/Promod-04.jpg" alt="" /><img src="http://www.fixeven.fr/maurad/images/Promod-05.jpg" alt="" />
		</td>
	</tr>
 
	<tr>
		<td colspan="4" style="vertical-align: top; color: #000000; font-family: Verdana; font-size: 9px; text-align: center;">
			<img src="http://www.fixeven.fr/maurad/images/promod_06.jpg" alt="" /><img src="http://www.fixeven.fr/maurad/images/Promod-07.jpg" alt="" /><img src="http://www.fixeven.fr/maurad/images/promod-18.jpg" alt="" /><img src="http://www.fixeven.fr/maurad/images/promod-09.jpg" alt="" />		</td>
	</tr>
 
 
	<tr>
		<td colspan="4" style="vertical-align: top; color: #000000; font-family: Verdana; font-size: 9px; text-align: center;">
			<img src="http://www.fixeven.fr/maurad/images/Promod_11.jpg" alt="" /><img src="http://www.fixeven.fr/maurad/images/Promod_12.jpg" alt="" /><img src="http://www.fixeven.fr/maurad/images/Promod_19.jpg" alt="" /><img src="http://www.fixeven.fr/maurad/images/Promod_14.jpg" alt="" />
	</tr>
	<tr>
		<td colspan="1" style="vertical-align: top; color: #000000; font-family: Verdana; font-size: 9px; text-align: center;">
			<img src="http://www.fixeven.fr/maurad/images/Promod_17.jpg" alt="" />
	</tr>
 
 
 
 
 
    	</tbody>
	</table>
 
    </body>
</html>

Je vous montre mon code

Merci d'avance

Kaamo · 25/08/2011, 14h41

même problème qu'ici

Chaque retour à la ligne dans ton code est interprété. Même si tu ne fais pas un <br/> explicitement. Il faut donc mettre le code sur une seule ligne plutôt que sur plusieurs. Par exemple :

Au lieu de :

Code :

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

1
2
3
4
5
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

écrire :

Code :

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

<html xmlns="http://www.w3.org/1999/xhtml"><head><title>test</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>

Auteur · 25/08/2011, 15h00

bonjour,

cet espace sous les images vient du fait que la balise img est considérée comme une balise inline.

Pour le supprimer, il faut définir l'image comme un bloc en plus de supprimer les bordures des cellules du tableau :

Code :

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

<img src="tonImage.jpg" style="display:block"/>

Cela supprimera les espaces et il ne sera pas nécessaire d'écrire tout ton code HTML sur une ligne

25/08/2011, 15h00	#3
Auteur Expert Confirmé Sénior Inscription : avril 2004 Messages : 4 795 Détails du profil Informations personnelles : Localisation : France Informations forums : Inscription : avril 2004 Messages : 4 795 Points : 5 119 Points : 5 119	bonjour, cet espace sous les images vient du fait que la balise img est considérée comme une balise inline. Pour le supprimer, il faut définir l'image comme un bloc en plus de supprimer les bordures des cellules du tableau : Code : Sélectionner tout - Visualiser dans une fenêtre à part <img src="tonImage.jpg" style="display:block"/> Cela supprimera les espaces et il ne sera pas nécessaire d'écrire tout ton code HTML sur une ligne
	20

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email