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.

 
   
Table doesn’t line up correctly only in Outlooks

SquareBalloonEoin

Avatar
Newbie
Total Posts:  22
Posted: 08 November 2016 05:22 AM

Hi there,

I’ve been trying to create quite a complicated grid.  The tables aren’t lining up correctly, but only in Outlook.  Outlook 2003 looks pretty bad as it moves everything a pixel or two to the left (or adds a pixel or two to the right).

Outlook 2007 gets worse as it seems to add something to the top or bottom as well.

2011 works, and 2016 is the same as 2007.

As it’s difficult to explain I attach screenshots as well as my code.  I’ve used

<!--[if (gte mso 9)|(IE)]>
    <
style type="text/css">
        
table {border-collapsecollapse;}
        table td {border
-collapsecollapse;}
    
</style>
    <!
[endif]--> 

I have padding set to 0 too.  It works in all of the other desktop browsers with no issue.

Image Attachments
events-section.pngoutlook-2007.png

 

Geoff Phillips

Avatar
Sr. Member
Total Posts:  386
Posted: 08 November 2016 10:51 AM
[ # 1 ]

SquareBalloonEoin,
Thanks for posting! This looks like a really interesting email, but it may be very challenging to make it work the way you want it to.

A good start would be to add this to all of the tables in the email:

border="0" cellpadding="0" cellspacing="0" 

That will help you with some of the spacing issues you’re seeing. I also took a look at Outlook 2003, and I determined that the spacing issue you saw was caused by the word “technology” being too long for its cell and breaking the layout a bit. I shortened it to “Techno” and it looks perfect. So you may want to change the copy there or edit the font size.

As far as the rest of the Outlooks, I think you’re going to find it very difficult to get them all to play well with this complex code. You may want to create a fallback version of the email for outlook only, or carefully control outlook display using conditional code like this: https://www.emailonacid.com/blog/article/email-development/using-ghost-columns-to-fix-alignment-problems-in-outlook

I see you’re already using some conditional code, but Outlook may require a lot more attention on that in order to get the display looking good.

I hope that helps!


 

SquareBalloonEoin

Avatar
Newbie
Total Posts:  22
Posted: 09 November 2016 05:07 AM
[ # 2 ]

That didn’t seem to do anything with the problem I had.  I did think about doing that yesterday, but I thought that was already covered by border-collapse and padding:0.

Anyway, having done it there still an issue.


 

SquareBalloonEoin

Avatar
Newbie
Total Posts:  22
Posted: 10 November 2016 02:03 PM
[ # 3 ]

This was caused by Outlook adding additional padding or calculating the padding incorrectly on the

<td

, I think it was changing the width.

Either it was adding it on top, or it was adding it to the child

<td

‘s.  I hope this helps someone.