28172 sujets

CSS et mise en forme, CSS3

Problème affichage newsletter HTML sur Hotmail et Gmail

Bonjour tout le monde,
Voilà cela va bientôt faire 2 jours que je m'arrache les cheveux sur la création d'une newsletter (ma première Smiley cligne ), mon problème c'est que comme beaucoup il apparait des lignes horizontale blanche entre mes images, j'ai testé plusieurs solutions proposées sur votre forum mais cela ne change rien :

upload/36179-Capturenew.JPG

Voilà le code HTML de la page en question : 

<!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>newsletter Roissy Emballage</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>
<body bgcolor="#FFFFFF" style="margin:0;">
<!-- Save for Web Slices (Sans titre-1) -->
<table id="Tableau_01" border="0" cellpadding="0" cellspacing="0" style="width:530px; height:497px;">
	<tr>
		<td>
			<img src="http://www.roissy-emballage.com/newsletter/images/newsletter_01.jpg" alt="" style="width:530px; height:118px; display:block;"></img></td>
	</tr>
	<tr>
		<td>
			<img src="http://www.roissy-emballage.com/newsletter/images/newsletter_02.jpg" alt="" style="width:530px; height:147px; display:block;"></img></td>
	</tr>
	<tr>
		<td>
			<img src="http://www.roissy-emballage.com/newsletter/images/newsletter_03.jpg" width="530" height="141" alt="" style="display:block"></img></td>
	</tr>
	<tr>
		<td>
			<img src="http://www.roissy-emballage.com/newsletter/images/newsletter_04.jpg" width="530" height="5" alt="" style="display:block"></img></td>
	</tr>
	<tr>
		<td>
			<img src="http://www.roissy-emballage.com/newsletter/images/newsletter_05.jpg" width="530" height="86" alt="" style="display:block"></img></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>


Sous office, mail apple apparament pas de problème.
Merci d'avance
Hello
Je teste ca, mais en commencant par fermer correctement les images : 
<img src = '....' alt='...'[b]/>[/b]
Bonjour,

Essaie en mettant les balises IMG dans le même TD mais en les mettant les unes après les autres, sans faire de retours à la ligne.

Sam
Modifié par kodakgold (27 Jun 2012 - 16:14)
playmannba a écrit :
le problème est le même et le pire c'est que ma page est valide W3C je ne comprend pas :s


Rien a voir, ton code peut être "sain" et ta CSS, mauvaise.

essaye de mettre un style="margin: 0;" sur tes images
exactement le même problème avec ce code là :

<!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>newsletter Roissy Emballage</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>
<body bgcolor="#FFFFFF" style="margin:0;">
<!-- Save for Web Slices (Sans titre-1) -->
<table id="Tableau_01" border="0" cellpadding="0" cellspacing="0" style="width:530px; height:497px;">
	<tr>
		<td><img src="http://www.roissy-emballage.com/newsletter/images/newsletter_01.jpg" alt="" style="width:530px; height:118px; display:block;"/><img src="http://www.roissy-emballage.com/newsletter/images/newsletter_02.jpg" alt="" style="width:530px; height:147px; display:block;"/><img src="http://www.roissy-emballage.com/newsletter/images/newsletter_03.jpg" width="530" height="141" alt="" style="display:block"/><img src="http://www.roissy-emballage.com/newsletter/images/newsletter_04.jpg" width="530" height="5" alt="" style="display:block"/><img src="http://www.roissy-emballage.com/newsletter/images/newsletter_05.jpg" width="530" height="86" alt="" style="display:block"/></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>


a écrit :
essaye de mettre un style="margin: 0;" sur tes images

les lignes horizontales ne disparaissent pas non plus avec les margin: 0;
Modifié par playmannba (27 Jun 2012 - 16:22)
6l20 a écrit :
Bonjour,
img { vertical-align: bottom; }

résoud-il ton problème ?


Non plus Smiley bawling je vais me pendre Smiley lol
loicbcn a écrit :
Bonjour,
Essaie en faisant &quot;flotter&quot; tes images - float:left.


même problème et lorsque j'utilise l'outil de développeur intégré à google chrome il me dit que mon <tr> ou <td> font 123 px de hauteur alors qu'il sont spécifiés à 118 :

upload/36179-Capture.JPG
j'ai résolu mon problème en utilisant un modèle mailchimb et en ne gardant que une seule image et transformant le reste en td ou j'y ai appliqué les background-color:XXXX;

Merci de votre aide Smiley cligne
Sujet clos
Aller à