Depuis mai 2010, Gmail affiche une marge sous chaque image. C’est bien embêtant puisqu’un e-mail est composé principalement d’images, de tableaux et d’offres pour du viagra. Heureusement, il y a une solution toute simple proposée entre autres par CampaignMonitor. Il suffit d’ajouter sur chaque image concernée un style="display:block;" directement dans votre balise img. Vous obtiendrez alors quelque chose comme ça : <img src="ch34p_v14gr4.jpg" style="display:block;" />. Tadam !
Ce problème n’est pas directement lié à Gmail, mais à HTML5. En effet, en passant une page en doctype HTML5, les navigateurs affichent différemment les images, probablement en prenant en compte une hauteur de ligne (line-height) différente.
Aurélien, le
Testé suite à tes conseils il y a quelques semaines.
Cela fonctionne parfaitement.
Merci
graphitruc, le
cool ^^
Vincent Voyer, le
Ce problème n’est pas lié à HTML5 ni à gmail.
Une balise est censée accompagner du texte, pas servir de balise pour mettre en forme une page. C’est pourquoi elle a naturellement le même comportement qu’un caractère : une petite marge en bas.
Si on veut se servir d’une image comme élément de mise en forme alors on la transforme en block, mais vaut mieux faire un avec un background-image.
Alors oui dans les mails on est limités car on ne peut pas simplement faire des background-images, mais gmail ne va pas changer la méthode « normale » d’affichage des images juste parce que des spammers veulent t’envoyer des beaux mails avec du viagra dessus.
vlan
Rémi, le
@Vincent : ça à tout à voir avec HTML5. Pour démonstration, le plus simple exemple possible. Une page HTML, une div avec un fond noir, une image. En XHTML1.0, la div fait la hauteur de l’image. En HTML5, il y a une marge sous l’image.
Je n’ai pas trouvé pour l’instant de documentation sur le pourquoi du comment de ce changement, mais si tu as des explications, je suis preneur.
ldzintegratore, le
Ah je suis content que ce sujet arrive (enfin !) sur la table.
Effectivement, depuis un bon moment déjà, pour les newsletters sur gmail il faut rajouter ce style en ligne display:block sur les images pour éviter cette marge blanche.
On s’aperçoit d’ailleurs que très peu de sociétés le font (à croire et c’est sur que gmail n’est pas vraiment conséquent en pourcentage d’utilisation dans le monde des clients mails)
La cause… gMail qui est passé en interprétation HTML5 donc du coup HTML5 est le responsable.
Maintenant, implémentant petit à petit le doctype HTML5, je suis confronté à lamême chose sur mes templates web et il faut donc rajouté via css un display:block sur les images de contenu.
J’avoue que c’est problématique de temps en temps et surtout très inhabituel.
Effectivement un article sur ce cas précis serait vivement apprécié…