CW1
Small gap outside images in Outlook 07/10/13
I am seeing this gap in outlook. I have wrapped these tables in a parent table. Border is set to 0, as is cellpadding and cellspacing, but can't seem to get rid of it. Any one else seen or fixed this before?
<table class="devicewidth" width="576" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table class="devicewidth" width="576" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="reset" style="border-collapse: collapse; padding:30px 30px 0px 0px;">
<a href="https://www.evernote.com/market/feature/rucksack?sku=BAGS00103&utm_source=silverpop&utm_medium=email&utm_campaign=060814_enm_tls_en_usca">
<span class="notebook"></span>
<img src="http://evernote.com/media/img/email/2014/06/061014_notebook_left.jpg" width="275" height="282" style="display:block; border:none;" alt="Isar Rucksack" class="emailnomob"> </a>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
<td>
<![endif]-->
<table align="left" width="250" border="0" cellspacing="0" cellpadding="0" class="devicewidth">
<tr>
<td valign="top" align="left" style="color: #43c0d9; font-family: Helvetica, arial, serif; font-size: 17px; line-height: 21px; margin: 0; padding: 40px 50px 0 0px; font-weight:100;" class="subheadtextblue">Share meeting notes</td>
</tr>
<tr>
<td align="left" style="color: #65646a; font-family: Helvetica, arial, serif; font-size: 14px; line-height: 18px; margin: 0; padding:5px 25px 0 0px;" class="emailbodytext1">With the Moleskine Business Notebook's dedicated sections for public and personal notes, you capture a page once and it can automatically be shared with your team back home.</td>
</tr>
<tr>
<td class="button2" style="padding: 25px 95px 0 0px;">
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.evernote.com/market/feature/rucksack?sku=BAGS00103&utm_source=silverpop&utm_medium=email&utm_campaign=060814_enm_tls_en_usca" style="height:35px;v-text-anchor:middle;width:135px;" arcsize="15%" stroke="f" fillcolor="#3fae29">
<w:anchorlock/>
<center>
<![endif]-->
<a href="https://www.evernote.com/market/feature/rucksack?sku=BAGS00103&utm_source=silverpop&utm_medium=email&utm_campaign=060814_enm_tls_en_usca" style="background-color:#3fae29;border-radius:6px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:35px;text-align:center;text-decoration:none;width:100%;-webkit-text-size-adjust:none;">BUY NOW</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</div>
</td>
</tr>
<!--[if mso]>
<tr>
<td style="padding:10px 0 20px 0;">
</td>
</tr>
<![endif]-->
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="devicewidth" width="576" cellpadding="0" cellspacing="0" border="0"> <tr> <td> <table align="right" border="0" cellpadding="0" cellspacing="0" width="275" class="devicewidth" style="mso-table-lspace:0;mso-table-rspace:0;"> <tr>
<td align="right" style="padding:0; margin:0;"> <a href="https://www.evernote.com/market/feature/premium?sku=premium-1year&utm_source=silverpop&utm_medium=email&utm_campaign=060814_enm_tls_en_usca"> <span class="phoneright"></span> <img src="http://evernote.com/media/img/email/2014/06/061014_phone_right.jpg" width="275" height="314" style="display:block; border:none;" alt="Evernote Premium" class="emailnomob"> </a> </td>
</tr>
</table>
<table align="left" width="250" border="0" cellspacing="0" cellpadding="0" class="devicewidth">
<tr>
<td align="left" style="color: #43c0d9; font-family: Helvetica, arial, serif; font-size: 17px; line-height: 21px; margin: 0; padding: 50px 0px 0 50px; font-weight:100;" class="subheadtextblue">Your workspace on the go</td>
</tr>
<tr>
<td align="left" style="color: #65646a; font-family: Helvetica, arial, serif; font-size: 14px; line-height: 18px; margin: 0; padding:5px 0 0 50px;" class="emailbodytext1">Collaborate on the fly and present your best ideas on the road with the only workspace you need.</td>
</tr>
<tr>
<td class="button2" style="padding: 25px 0px 0 50px;"> <div> <!--[if mso]> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.evernote.com/market/feature/premium?sku=premium-1year&utm_source=silverpop&utm_medium=email&utm_campaign=060814_enm_tls_en_usca" style="height:35px;v-text-anchor:middle;width:235px;" arcsize="15%" stroke="f" fillcolor="#3fae29"> <w:anchorlock/> <center> <![endif]--> <a href="https://www.evernote.com/market/feature/premium?sku=premium-1year&utm_source=silverpop&utm_medium=email&utm_campaign=060814_enm_tls_en_usca" style="background-color:#3fae29;border-radius:6px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:35px;text-align:center;text-decoration:none;width:100%;-webkit-text-size-adjust:none;">GET EVERNOTE PREMIUM</a> <!--[if mso]> </center> </v:roundrect> <![endif]--> </div>
</td>
</tr>
</table>
</td></tr></table>
</td>
</tr>
</table>
````
Hi Chris,
I've sussed this. It's because inside your table the widths don't add up.
I fixed the top section only for you below. I added the space to the right of the text by adding a 20px cell. Then the leftover width from the 576px wide table (306px) I added to the table with the image inside it.
This works great for the top section. The reason i left extra space is because outlook has a tenancy to stack tables on top of each other if they are exact. Unfortunately that is what is happening for the table with the image on the left.
Imgur
I would use the MSO statement to close the tables just in outlook but i need to have the image table before the text table so when it goes responsive the image is on top. Using align I can force each to their respective sides. However if I use <!--[if gte mso 9]>
</td>
<td>
<![endif]-->
then the image and text will be reversed.
Better than where I was at before though! So much thanks!
In your TD containing the image, add a style tag with
and for good measure, make all the tags butt up to eachother in the containing td of the images. Thanks
This doesn't do anything for this code.
I'm a little late on this question but just in case someone comes across this by searching-
I don't think that this is a good idea to do- I think it's important to style your fonts even when the cell only contains an image- especially if that image contains text. When the image contains text (I try to avoid this across the board but sometimes it cannot be avoided), I will put that text into the alt tag, and then style it - ideally to closely match the look of the image, or at the very least provide some relief in terms of styling so the text isn't just whatever the context default happens to be. In this way, the person who receives the email will still get a feel for the email even if images are turned off- and hopefully it will encourage them to turn the images on to see what else the email wants to show & tell.
This works great for me. As for the alt text, the img element should contain a font-size and line-height definition with readable sizes.
Hi Chris,
Have you seen this article from Email on Acid? You should check out step three in the article it may solve the issue you are having. http://www.emailonacid.com/blog/details/C13/removing_unwanted_spacing_or_gaps_between_tables_in_outlook_2007_2010