Menu
Building an overly fancy HTML mail for a client. Code validates at http://validator.w3.org as XHTML 1.0 Transitional by direct input. Thing is Gmail displays gaps between each of the images.
Each image and its anchor have inline styles setting padding and margin to zero. There is no whitespace between the anchor tag and the enclosed image tag or between subsequent anchor tags. There are no newlines in the code.
Here it is pasted straight out of the received email:
<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> Here is the complete document. https://wserver.flc.losrios.edu/~vapa/email/20110203_email.html It's the left column that Gmail is showing gaps on.
Any advice?
561
If images aren't correctly displayed in the emails sent (you can send you a test email to try), it means your Gmail draft is partially broken. In that case, best is to create a new draft, and re-insert your image in this new draft.
Always show images On your computer, go to Gmail. See all settings. Scroll down to the "Images" section. Click Always display external images.
HTML. Line Height Property: The CSS line-height-property can be used to set the height of the line, whose value is set to normal, by default. By setting the height of the container at 0%, the white space can be removed.
There are three main reasons recipients may not see images in your emails: their email client is blocking externally hosted images, their email client doesn't support background images, or a firewall is blocking access to our image servers.
The specific answer to your question is that Gmail adds extra space to table cells which only contain an image. To fix this issue add to these images:
style="display:block"
Tip: Campaign Monitor is a great resource, as is MailChimp. Both provide several guides, template examples, etc.
145
For any image in its own table cell, use display: block and line-height: 50%
<img alt="some text" style="display: block;line-height: 50%" src="image.jpg" /> Set the padding to 0 and margin to 0, although setting margin to -1px might fix small gaps on iPhone/iPad.
stick: <style type="text/css"> img{display: block;}</style>
...within the body tag, not the head, as it'll get stripped out by some clients.
Don't get hung up on if your code validates, getting email templates working cross-browsers and clients results in some fugly code!
P.S. Watch out for Outlook 2007 (it uses the Word rendering engine) and Hotmail on Firefox.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
