IY
0
Right-aligned image has 1px gap on Outlook 2007, 2010, and 2013
In my email, there is a right-aligned image. And the problem is, its right side does not exactly stick to the right edge of parent table cell, in stead, there is a 1px gap. That only happens on Outlook 2007, 2010, and 2013, not on other versions of Outlook and other email agents.
Please copy the code at here and send it to Outlook 2007, 2010, or 2013 to see the problem.
I had tried many solutions such as border-collapes, mso-table-rspace, mso-line-height-rule, etc, and still had no luck.
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">
<tr>
<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="" />
</td>
</tr>
</table>
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!
Thanks Rowdy. That could be a solution.
However, what I need to achieve is a fluid layout so I have to keep the right-aligned table (which wraps the image) so that it can vertically stack with other contents when the screen width is narrower.
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!
EDIT:
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.
Thanks. I will check it.