Gmail affichage d'écart entre les images
La construction d'un trop de fantaisie mail en HTML pour un client. Code valide à http://validator.w3.org XHTML 1.0 Transitional par entrée directe. Chose est Gmail affiche les écarts entre les différentes images.
Chaque image et son point d'ancrage ont des styles en ligne paramètre de remplissage et de marge à zéro. Il n'y a pas d'espace entre la balise d'ancrage et le joint de balise d'image ou entre les autres balises d'ancrage. Il n'existe pas de retours à la ligne dans le code.
Ici, il est collé tout droit sorti 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 que Gmail est de montrer les lacunes sur.
Des conseils?
- Peut-être que je suis juste fatigué, mais pourquoi le " shape="rect" chose"? (sans même en fournissant les coordonnées, laissant ainsi à l'utilisateur de l'agent)
- Que la forme='rect' est ajouté par l'CKeditor l'e-mail est généré par le biais de. Il aspire à de nombreux niveaux.
- avez-vous essayé de l'enlever? Et la conversion de margin et padding px au lieu de pt
- Mon code a de la marge:0 sans unité. CKeditor est d ' "aider" me il.
Vous devez vous connecter pour publier un commentaire.
La réponse précise à votre question, c'est que Gmail ajoute un espace supplémentaire pour les cellules de tableau qui contiennent seulement une image. Pour résoudre ce problème, ajoutez à ces images:
Astuce:
Suivi De La Campagne est une grande ressource, comme c'est MailChimp. Les deux fournissent plusieurs guides, des exemples de modèle, etc.
Pour n'importe quelle image dans sa propre cellule de tableau, utiliser display: block et line-height: 50%
Définir la marge intérieure de 0 et de la marge à 0, bien que la définition de la marge à -1px pourrait résoudre les petits écarts sur iPhone/iPad.
bâton:
<style type="text/css"> img{display: block;}</style>...à l'intérieur de la balise body, pas la tête, comme il va se dépouillés par certains clients.
Ne pas vous attardez sur si votre code valide, l'obtention de modèles d'e-mail de travail inter-navigateurs et clients de résultats dans certains fugly code!
P. S. Watch out for Outlook 2007 (il utilise le Mot moteur de rendu) et Hotmail sur Firefox.
Ne sais pas si ça aide, mais il est un guide complet de la prise en charge de CSS dans les différents clients de messagerie au http://www.campaignmonitor.com/css/
Dans mon html j'ai beaucoup de cellules du tableau qui contient plusieurs images de la même hauteur de l'autre côté. Le problème avec cette technique s'est avéré être que je ne pouvais pas faire mes images afficher le bloc parce que ce serait radicalement gâcher ma mise en page. S'est avéré la solution pour supprimer le compte gmail de l'écart est de simplement ajouter un style de ligne-hauteur: 50% à la table elle-même. Je l'ai testé dans tous les navigateurs, avec des résultats positifs. Pour être honnête, je ne suis pas 100% sûr de savoir pourquoi cela fonctionne ou si elle fonctionnera dans tous les cas, mais si votre situation est comme le mien, vous pourriez vouloir donner à cette solution un essai.
PS, grâce à @Jon et @Jason pour me donner l'idée.
Si vous avez une cellule de tableau ne contenant qu'une image et que vous voyez toujours l'espace supplémentaire sous vos images, la solution est d'ajouter
line-height:0;à la cellule du tableau. Par exemple,<td style="line-height:0;">.Si vous ne voulez pas utiliser du css, ajouter align="top" et border="0":
Je sais que c'est un vieux post, mais cela m'a aidé, pour ceux qui sont encore à la recherche:
<p style="margin: 0;font-size: 0;line-height: 0;"><img src="..." .../></p>Envelopper votre image(s) dans une balise de paragraphe avec de la marge, la police, la taille et la hauteur de la ligne définie sur "0". J'ai remarqué que Outlook et Gmail ont été l'ajout erronée alinéa, la durée, et de la police des tags. Espérons que cela aide quelqu'un d'autre.
J'ai résolu ce problème en frisson à l'aide de Dreamweaver et de l'image à l'aide de cartes. Je voudrais seulement suggérer cela si il n'y a pas d'autre moyen, mais il a fixé mon problème.