Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Outlook 2010 (120 dpi) gap between two nested tables

hcrgives

Newbie
Total Posts:  2
Posted: 08 February 2017 06:25 AM

I am not a coder, but can understand most of the html.  I read this Email on Acid article https://www.emailonacid.com/blog/article/email-development/horizontal_spacing_issues_in_outlook_2007_and_2010 as well as this one from James White - https://blog.jmwhite.co.uk/2014/03/28/solving-dpi-scaling-issues-with-html-email-in-outlook/.  I downloaded the Outlook tips and tricks whitepaper from Email on Acid resources. 

I have tried all the fixes, but nothing will get rid of the white space between the two nested tables that flow from two columns and look like one image to one column in mobile.  The top image is just a single column image.

Only has the gap in Outlook 2010 (120 dpi), regular Outlook 2010 with no scaling is fine.
https://www.emailonacid.com/app/acidtest/display/summary/jhyGCuaIteH4Y2RwG7dvIqFkLKkO8tZzm5Rel8QqaV5qG/shared

My code is attached and was exported originally from Bee Editor.  Many of the Outlook fixes such as if statements and cellpadding attributes were already present.

I have hit a brick wall after two days and I am crying uncle.  Any help would be really appreciated.  This split image design is the basis for our nonprofit fundraising campaign so fixing this is really important.  The target email client is Outlook 2010 almost exclusively.

File Attachments
EOA_Editor_Project.txt  (File Size: 14KB - Downloads: 86)

 

hcrgives

Newbie
Total Posts:  2
Posted: 08 February 2017 08:22 AM
[ # 1 ]

Eureka!  Not sure if this is the right solution, but it did work.

1. I added the Microsoft namespace to the <HTML> tag
2. I just changed the Align attribute on the <img> tag for each image from align=“center” to left and right.  The left image align=“right” and the right image align=“left”

AMENDED THE ROOT HTML TAG
<html >

LEFT COLUMN
https://eoa-editor.s3.amazonaws.com/c06b26b1cc1e4df75489013bfe5bc438be4df2f4/ZIP_Upload_20170208041559/images/5a234926-2b7c-4564-88b9-739347c1e865.png

RIGHT COLUMN
https://eoa-editor.s3.amazonaws.com/c06b26b1cc1e4df75489013bfe5bc438be4df2f4/ZIP_Upload_20170208041559/images/8ab6eb75-6a02-47be-9860-ae08a94df855.png

Let me know if that seems like the best practice solution or a hack.  I ran a test from my ESP to EOA and everything looked good on all clients.

***The Post Stripped The Code Snippets***