Gmail affichant les écarts entre les images
Création d'un courrier HTML trop sophistiqué pour un client. Le code est validé à http://validator.w3.org comme XHTML 1.0 Transitional par entrée directe. Le truc c'est que Gmail affiche les écarts entre chacune des images.
Chaque image et son ancre ont des styles en ligne définissant le remplissage et la marge à zéro. Il n'y a aucun espace entre la balise d'ancrage et la balise d'image incluse ou entre les balises d'ancrage suivantes. Il n'y a pas de nouvelle ligne dans le code.
Ici, il est collé directement à partir de l'e-mail reçu:
<a href="https://www.threestages.net/Online/default.asp?doWork::WScontent::loadArticle=Load&BOparam::WScontent::loadArticle::article_id=8D916F3F-E119-4746-A4AB-010F99CE901C&sessionlanguage=&menu_id=007F7A77-97DB-4601-9691-CB7AA4ED7950" style="margin: 0pt; padding: 0pt;" shape="rect"><img alt="Buy Tickets" border="0" height="55" src="https://wserver.flc.losrios.edu/~vapa/email/20110203_buy_tickets.jpg" style="margin: 0pt; padding: 0pt;" width="180"></a><a href="https://www.threestages.net/Online/default.asp?doWork::WScontent::loadArticle=Load&BOparam::WScontent::loadArticle::article_id=1768A54F-7E43-474A-B18A-4BBF04F14E92" style="margin: 0pt; padding: 0pt;" shape="rect"><img alt="Three Stages Presents" border="0" height="182" src="https://wserver.flc.losrios.edu/~vapa/email/20110203_presents.jpg" style="margin: 0pt; padding: 0pt;" width="180"></a><a href="https://www.threestages.net/Online/default.asp?doWork::WScontent::loadArticle=Load&BOparam::WScontent::loadArticle::article_id=CE8BDACE-EB4C-4785-BA41-9B9FF6A87D03" style="margin: 0pt; padding: 0pt;" shape="rect"><img alt="Partners of Three Stages" border="0" height="181" src="https://wserver.flc.losrios.edu/~vapa/email/20110203_partners.jpg" style="margin: 0pt; padding: 0pt;" width="180"></a><a href="https://www.threestages.net/Online/default.asp?doWork::WScontent::loadArticle=Load&BOparam::WScontent::loadArticle::article_id=63DB284F-02DE-4A30-A48C-F03E619E59CA" style="margin: 0pt; padding: 0pt;" shape="rect"><img alt="Productions of Three Stages" border="0" height="176" src="https://wserver.flc.losrios.edu/~vapa/email/20110203_productions.jpg" style="margin: 0pt; padding: 0pt;" width="180"></a><a href="http://www.vcstar.com/news/2011/jan/20/hats-off-to-a-chorus-line-the-high-kicking-in-an/" shape="rect"><img alt="The national tour of "A Chorus Line"--opening at Three Stages 2/11--receives a rave review in Ventura. " border="0" height="134" src="https://wserver.flc.losrios.edu/~vapa//email/20110203_three_bits_1.jpg" width="180"></a><a href="http://www.nytimes.com/2011/01/13/books/13book.html?_r=2" shape="rect"><img alt="Mr. Rosanne Cash’s new memoir" border="0" height="44" src="https://wserver.flc.losrios.edu/~vapa//email/20110203_three_bits_2.jpg" width="180"></a><a href="http://www.archive.org/details/Insight_080403_a" shape="rect"><img alt="An interview with Jeffrey Siegel on KXJZ's "Insight" (He's the second guest on the show). Originally recorded April, 2008." border="0" height="68" src="https://wserver.flc.losrios.edu/~vapa//email/20110203_three_bits_3.jpg" width="180"></a><a href="http://www.tampabay.com/news/humaninterest/magic-stretches-minds-grins-muscles-of-handicapped-children-in-largo/1148482 " shape="rect"><img alt="Twenty years after his own accident, Kevin Spencer, of Spencers Theatre of Illusion teaches magic to kids—as therapy. " border="0" height="81" src="https://wserver.flc.losrios.edu/~vapa//email/20110203_three_bits_4.jpg" width="180"></a><a href="http://www.facebook.com/pages/Three-Stages-at-Folsom-Lake-College/169056696438709" style="margin: 0pt; padding: 0pt;" shape="rect"><img alt="Follow us on Facebook" border="0" height="92" src="https://wserver.flc.losrios.edu/~vapa/email/20110203_facebook.jpg" style="margin: 0pt; padding: 0pt;" width="180"></a>
Voici le document complet. https://wserver.flc.losrios.edu/~vapa/email/20110203_email.html C'est la colonne de gauche sur laquelle Gmail affiche des lacunes.
Aucun conseil?
La réponse spécifique à votre question est que Gmail ajoute de l'espace supplémentaire aux cellules du tableau qui ne contiennent qu'une image. Pour résoudre ce problème, ajoutez à ces images:
style="display:block"
Astuce: Campaign Monitor est une excellente ressource, tout comme MailChimp . Les deux fournissent plusieurs guides, exemples de modèles, etc.
Pour toute image dans sa propre cellule de tableau, utilisez display: block et line-height: 50%
<img alt="some text" style="display: block;line-height: 50%" src="image.jpg" />
Réglez le remplissage à 0 et la marge à 0, bien que la définition de la marge à -1px puisse corriger de petits écarts sur iPhone/iPad.
bâton: <style type="text/css"> img{display: block;}</style>
... à l'intérieur de l'étiquette du corps, pas de la tête, car certains clients l'enlèveront.
Ne vous bloquez pas si votre code est validé, obtenir des modèles d'e-mail fonctionnant sur plusieurs navigateurs et clients entraîne un code erroné!
P.S. Attention à Outlook 2007 (il utilise le moteur de rendu Word) et Hotmail sur Firefox.
Je ne sais pas si c'est une aide, mais il existe un guide complet de prise en charge CSS dans les différents clients de messagerie à www.campaignmonitor.com/css/
Dans mon html, j'ai beaucoup de cellules de tableau qui contiennent plusieurs images côte à côte de la même hauteur. Le problème avec cette technique s'est avéré être que je ne pouvais pas faire afficher mes images car cela gâcherait considérablement ma mise en page. Il s'est avéré que la solution pour supprimer l'écart gmail était simplement d'ajouter un style de hauteur de ligne: 50% à la table elle-même. J'ai testé dans tous les navigateurs avec des résultats positifs. Pour être honnête, je ne suis pas sûr à 100% pourquoi cela fonctionne ou si cela fonctionnera dans tous les cas, mais si votre situation est comme la mienne, vous voudrez peut-être essayer cette solution.
PS, merci à @Jon et @Jason de m'avoir donné l'idée.
Si vous ne souhaitez pas utiliser le CSS en ligne, ajoutez align = "top" et border = "0":
`<img src="" width="100" height="100" alt="" align="top" border="0" />`
Si vous avez une cellule de tableau contenant uniquement une image et que vous voyez toujours l'espace supplémentaire sous vos images, la solution consiste à ajouter line-height:0; à la cellule du tableau. Par exemple, <td style="line-height:0;">.
Je sais que c'est un article plus ancien, mais cela m'a aidé, pour tous ceux qui recherchent toujours: <p style="margin: 0;font-size: 0;line-height: 0;"><img src="..." .../></p>
Enveloppez vos images dans une balise de paragraphe avec une marge, une taille de police et une hauteur de ligne définies sur "0". J'ai remarqué qu'Outlook et Gmail ajoutaient des balises de paragraphe, de plage et de police erronées. J'espère que ceci aide quelqu'un d'autre.
J'ai résolu ce problème en shudder en utilisant Dreamweaver et en utilisant des cartes d'images. Je ne suggérerais cela que s'il n'y a pas d'autre moyen, mais cela a résolu mon problème.