- Meta tags in head
- Send for host/get hosted URL
- Fill out rest of meta tag information, generate link
I did a number of tests changing small things like adding a doctype; using <th>... the only thing that worked (in my short time of troubleshooting) was moving the align="right" from the parent table of the img to the <td> that contains that table.
Does the align need to be on the table for the fluid layout to work? That's my suspicion considering there is no content to the left of the image, though I am curious as to where that will fit in your code.
Our team focuses on making pretty literal code resulting in bulletproof emails, so we don't work with fluid layouts for this reason - sorry I'm not more helpful!
After some research, I found this fix listed here: http://www.emailonacid.com/images/blog_images/downloads/2014/wp_outlook.pdf
It's really complicated and kinda hacky... but got rid of rid of the tiny gap and replaced it with a border around the image with the color of whatever you define.
I would try being more literal with your width on tables and cells. Instead of nesting tables and relying on align on the <table> tag, I would instead throw two cells next to each other with the width defined on the cells. Here's the relevant code of that 600px table that I changed:
<table align="center" width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="ffffff">
<td width="350" bgcolor="ffffff"></td>
<td width="250" bgcolor="ffffff" style="padding: 50px 0;">
<img style="display: block;" src="http://placehold.it/250x200" width="250" height="200" border="0" alt="" />
This is straightforward and literal while being less code and nesting than before. If Outlook is still finding a way to mess that up, I would continue to define widths on all of your tables and cells (I personally try to define widths on every cell so that there is no room for Outlook to "assume" anything).
Hope this helps.
P.S. Don't forget to self-close your img tag!
I do this for the Yahoo advertising newsletter emails. It's fairly simple code but the process is a little awkward - it involves hosting a web version of the email. It goes like this:
Then you're ready to send.
Our meta tags look something like this:
<meta content="HOSTED URL" property="og:url">
<meta content="HOSTED IMAGE URL" property="og:image">
<meta content="Whatever Title You Want Facebook To Display!" property="og:title">
<meta content="Whatever Description You Want Facebook To Display!" property="og:description">
Keep in mind the image it pulls in has to be from the hosted HTML but the title does not.
The share URL you have is correct, though make sure to encode the url using an encoder like: http://meyerweb.com/eric/tools/dencoder/
Also, I recommend appending the URL with ?clear=true
Anyway, hope this helps!
Forwarding HTML emails can cause all sorts of rendering problems. If my memory serves, the already rendered email has it's styles re-rendered. Likely those cellpadding and spacing styles could be getting stacked on forward. Not sure there is much that can be done for this.
Are you sending tests to Litmus or live email inboxes, or are you turning images off manually in the browsers with a local test? If the latter is the case, alt tags will not display... If it is the former, is it happening across all email clients?
Feel free to post some code snippets.
This is a consistent issue for me with Gmail. My main client recycles the same social sharing footer, and for some reason Gmail changes the shade of grey used. Our team believes it has to do with Gmail's compression. My fix (in your case) would be to create a transparency for the white of the image and let the background color show through.