Solved

HTML email template Issue: Table Border in Outlook 2007-10 when using align=left

Posted on 2014-01-19
14
1,608 Views
Last Modified: 2014-01-26
Hello

I would like to attract an expert who has experience with coding email html templates. I'm having trouble with the gutter table borders showing up in Outlook 07-10.

This post breaks down the issue I'm having pretty well. I know my code is not exactly like the example they present. I've tested 100 or more emails and though the table border is showing up in outlook the spacing remains the same in the popular email clients I've tested so far.
http://www.emailonacid.com/blog/details/C13/removing_unwanted_spacing_or_gaps_between_tables_in_outlook_2007_2010

Reference for css support in popular mobile, web and desktop email clients:
http://www.campaignmonitor.com/css/

Screen shot of issue
Gutter tables not respecting border color
Problem table
<table class="mobilehide" width="0" height="1" cellspacing="0" cellpadding="0" border="7" bordercolor="#FFFFFF" bgcolor="#FFFFFF" align="left" style="mso-table-lspace:0;mso-table-rspace:0; border-color:#FFFFFF; background-color:#FFFFFF"><tbody>
  <tr>
    <td bordercolor="#FFFFFF" bgcolor="#FFFFFF" width="4" height="1"><span style="mso-table-lspace:0;mso-table-rspace:0; background-color:#FFFFFF; display:block;">
    	<img width="4" height="1" border="0" style="background-color:#FFFFFF;" src="spacer.png"></span></td>
  </tr>
</tbody></table>

Open in new window



Complete Code for 3 column row using 2 tables as gutter
<table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
    <tbody>
        <tr><td class="w640" width="640" height="30" colspan="3"></td></tr>
        <tr>
            <td class="w30" width="30"></td>
            <td class="w580" width="580">


                    <table class="w580" width="580" cellpadding="0" cellspacing="0" border="0">
                        <tbody>
                            <tr>
                                <td class="col_180" width="180" valign="top">
                                    
                                    
                                    <table class="col_180" width="180" cellpadding="0" cellspacing="0" border="0" align="left" style="mso-table-lspace:0;mso-table-rspace:0;">
                                        <tbody>
                                            <tr>
                                                <td class="col_180" width="180"><span align="left" class="article-title" style="mso-table-lspace:0;mso-table-rspace:0;"><singleline label="Title">Add a title</singleline></span></td>
                                            </tr>
                                            <tr>
                                                <td class="col_180" width="180"><img editable="true" label="Image (180px)" class="col_180" width="180" height="" border="0"></td>
                                            </tr>
                                            <tr><td class="col_180" width="180" height="5"></td></tr>
                                            <tr>
                                                <td class="col_180" width="180">
                                                    <div align="left" class="article-content">
                                                        <multiline label="Description">Enter your description</multiline>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr><td class="col_180" width="180" height="20"></td></tr>
                                        </tbody>
                                    </table>
                                    
                                    
<table class="mobilehide" width="0" height="1" cellspacing="0" cellpadding="0" border="7" bordercolor="#FFFFFF" bgcolor="#FFFFFF" align="left" style="mso-table-lspace:0;mso-table-rspace:0; border-color:#FFFFFF; background-color:#FFFFFF"><tbody>
<tr>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF" width="4" height="1"><span style="mso-table-lspace:0;mso-table-rspace:0; background-color:#FFFFFF; display:block;">
<img width="4" height="1" border="0" style="background-color:#FFFFFF;" src="spacer.png"></span></td>
</tr>
</tbody></table>

                    
                                
                                    <table class="col_180" width="180" cellpadding="0" cellspacing="0" border="0" align="left" style="mso-table-lspace:0;mso-table-rspace:0;">
                                        <tbody>
                                            <tr>
                                                <td class="col_180" width="180"><span align="left" class="article-title" style="mso-table-lspace:0;mso-table-rspace:0;"><singleline label="Title">Add a title</singleline></span></td>
                                            </tr>
                                            <tr>
                                                <td class="col_180" width="180"><img editable="true" label="Image (180px)" class="col_180" width="180" height="" border="0"></td>
                                            </tr>
                                            <tr><td class="col_180" width="180" height="5"></td></tr>
                                            <tr>
                                                <td class="col_180" width="180">
                                                    <div align="left" class="article-content">
                                                        <multiline label="Description">Enter your description</multiline>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr><td class="col_180" width="180" height="20"></td></tr>
                                        </tbody>
                                    </table>
                                    
                                    
                                    
                                    
<table class="mobilehide" width="0" height="1" cellspacing="0" cellpadding="0" border="7" bordercolor="#FFFFFF" bgcolor="#FFFFFF" align="left" style="mso-table-lspace:0;mso-table-rspace:0; border-color:#FFFFFF; background-color:#FFFFFF"><tbody>
<tr>
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF" width="4" height="1"><span style="mso-table-lspace:0;mso-table-rspace:0; background-color:#FFFFFF; display:block;">
<img width="4" height="1" border="0" style="background-color:#FFFFFF;" src="spacer.png"></span></td>
</tr>
</tbody></table>
                                
                                
                                
                                
                                    <table class="col_180" width="180" cellpadding="0" cellspacing="0" border="0" align="left" style="mso-table-lspace:0;mso-table-rspace:0;">
                                        <tbody>
                                            <tr>
                                                <td class="col_180" width="180"><span align="left" class="article-title" style="mso-table-lspace:0;mso-table-rspace:0;"><singleline label="Title">Add a title</singleline></span></td>
                                            </tr>
                                            <tr>
                                                <td class="col_180" width="180"><img editable="true" label="Image (180px)" class="col_180" width="180" height="" border="0"></td>
                                            </tr>
                                            <tr><td class="col_180" width="180" height="5"></td></tr>
                                            <tr>
                                                <td class="col_180" width="180">
                                                    <div align="left" class="article-content">
                                                        <multiline label="Description">Enter your description</multiline>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr><td class="col_180" width="180" height="20"></td></tr>
                                        </tbody>
                                    </table>
                                    
                                    
                                </td>
                            </tr>
                        </tbody>
                    </table>

                                                                 

            </td>
            <td class="w30" width="30"></td>
        </tr>
    </tbody>
</table>

Open in new window


Thank you for the assistance!
Jules
0
Comment
Question by:Jules Webb
  • 7
  • 7
14 Comments
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
Just while I'm looking into this for you, I've always coded the page using the Campaign Monitor reference but also maintaining the right HTML structure.

I will then pass the "validated" HTML page through a preflight http://premailer.dialect.ca/ that will do what it needs to do to make it compatible with email clients.  Will also tell you of any issues in your code.

Have you got the FULL source for a sample email?
0
 
LVL 2

Author Comment

by:Jules Webb
Comment Utility
Hi Rob

Thanks for the fast reply!

RE: I've always coded the page using the Campaign Monitor reference but also maintaining the right HTML structure.
I added that because sometimes the assistance isn't' always as "expert" as I hope for. Coding for email is so much different than for browsers I didn't want someone to comeback with add margin X  ;)

RE: I will then pass the "validated" HTML page through a preflight...
Sounds great---I wan't familiar with that tool.

RE: Have you got the FULL source for a sample email?
Since it's so long I've attached it as a txt document
2014-01-19-MEC-template-WITH-COM.html
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
No problem and Yes, it's fun when Microsoft uses Word to render it's "web pages" X-)

I ran the code through the premailer and there are a few issues that may be affecting what you're seeing and may need attention first (see pdf attached)
Premailer--pre-flight-for-HTML-e.pdf
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
This is also a good read and handy resource to have around: http://www.email-standards.org/
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
Are you using Campaign Monitor? The template looks vaguely familiar
0
 
LVL 2

Author Comment

by:Jules Webb
Comment Utility
Hi Rob

RE: No problem and Yes, it's fun when Microsoft uses Word to render it's "web pages" X-)
Agreed!

RE: I ran the code through the premailer and there are a few issues that may be affecting what you're seeing and may need attention first
Yes I ran my code through when you initially shared the link. Nothing there seems like it's an issue to me.

Because some email clients add margins/padding I've reset them back to 0. The few instances where this doesn't work I'm willing to settle for their forced margins/padding. The other highlighted properties are either targeting specific issues in a certain mail client, or like the default cursor css rule for hovering over the phone #'s on desktops is fine if it's not supported, but great where it is.  Please correct me if you think I'm wrong, but none of these flagged items seem related to the outlook table border problem.

RE: http://www.email-standards.org/
Thank you!

RE: Are you using Campaign Monitor? The template looks vaguely familiar
Yep, you're spot on ;)

Cheers!
Jules
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
I'm using Outlook 2010 and can't see the issue with the full template you attached. This is what it looks like:
Microsoft-Outlook---Memo-Style.pdf
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 2

Author Comment

by:Jules Webb
Comment Utility
Hi Rob

I'm using Windows 7 pro | outlook 2010. I can see the the issue and have red arrows pointing to the problem tables in the screen shot below. They're 20px X 1px gutter tables.

screen shot with issue pointed out.
I find it curious that for you the 3 column layout is presenting as 3 rows.

I've considered just dropping this 3 column layout, but I wanted to give it a good effort before I gave up on it. The 2 column layout works because the left column is aligned left and the right is aligned right. By making the table widths less than 50% there is a natural gutter in the middle and thus no need for a gutter table, or issues with outlook's borders.

Even if the gutter table borders are visible in outlook 2007 - 10 I'm not sure if that's a deal breaker, but them not presenting in one row on a desktop device is a deal breaker.
I have more testing I want to do, but it will cost $'s and I wanted to try and do as much free testing and revisions before I started paying.

The beauty of campaign monitors system is that you can reuse, mix and delete the various modules/layouts from each campaign, giving the user a very versatile and flexible template.

Appreciate whatever feedback you think would be of value.
thanks!
Jules
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
I find it curious that for you the 3 column layout is presenting as 3 rows.
How are you viewing the template? Are you updating via CM and sending a test email to yourself?


Even if the gutter table borders are visible in outlook 2007 - 10 I'm not sure if that's a deal breaker, but them not presenting in one row on a desktop device is a deal breaker.
I have more testing I want to do, but it will cost $'s and I wanted to try and do as much free testing and revisions before I started paying.
I agree, not on one row is a deal breaker.  The testing you're talking about, are you using the CM test system where they test on all platforms?


The beauty of campaign monitors system is that you can reuse, mix and delete the various modules/layouts from each campaign, giving the user a very versatile and flexible template.
Couldn't agree more, it's so easy to use, especially for the non-tech environment.

I'm not sure how much more value I can add.  There's only so much banging your head against the wall before you decide to go around it :).  When I've encountered this situation in the past, I reduced the complexity of the layout and enticed the user to click to the online version as I know it will always display as I want there.  Especially moved this way as a lot of my clients had hotmail and gmail accounts, which destroy quite a lot of layout and presentation.  Just a thought.  Still happy to look through the template but given how I'm seeing it differently I do need to know how you're testing to replicate the exact issue
0
 
LVL 2

Author Comment

by:Jules Webb
Comment Utility
Hi Rob

RE: How are you viewing the template? Are you updating via CM and sending a test email to yourself?
Yes. I have accounts with all major cloud clients and outlook on my computer. Once issues are cleared up on these then I pay for email testing on other platforms. I don't create enough templates to actually subscribe to a service so I just pay when I need to test.

RE: The testing you're talking about, are you using the CM test system where they test on all platforms?
I will, but haven't yet. Also testing via https://litmus.com/email-testing
0
 
LVL 2

Accepted Solution

by:
Jules Webb earned 0 total points
Comment Utility
Hi Rob

Well believe it or not I think I found an answer that works.  

I didn't think I could align left a div element, I thought the align parameter was for table elements only. Anyways I tested the codebit below and it works just fine.  The only rub is that the gutter is suppose to be 20px, but I still have to accommodate 3px worth of Outlooks border issue. This means that in "normal" software ;) the row is 3px short on the right. Doubtful that many people would ever notice that discrepancy

<div class="mobilehide" align="left">
    	<img align="left" width="17" height="1" border="0" style="background-color:#FFFFFF;" src="spacer.png">
</div>

Open in new window


I found a few other more easily resolved issues and am happy with the email template. Of course if the email client doesn't support media queries then it's a bit awkward, but I don't know of anyway around that. Do you?

I've enjoyed and found your participation very helpful. Thank you! When I accept a solution I will highlight this post so future visitor will be able to take advantage of the codebit above and give you your well deserved points.

Cheers!
Jules
0
 
LVL 42

Assisted Solution

by:Rob Jurd, EE MVE
Rob Jurd, EE MVE earned 500 total points
Comment Utility
Hi Jules,
I'm glad you've found an acceptable answer.
As for the media queries, the ones that don't support it, ignore it so don't rely too heavily on them.  The only way around this that I've found is to have an online version with all the bells and whistles while your email (and template) is more focused on luring the recipient into viewing the online version. Your email may just be a bit of text and an image such as "view our latest product range" or in your case "view the profiles of our team". I'll admit though I had more help from our design and marketing team on the content! But they listened to having the cut down version :-)
0
 
LVL 2

Author Comment

by:Jules Webb
Comment Utility
Hi Rob

Thanks for your input.

In the past I've added a link to the web version in the top, but it never got much click through so I didn't include it this time. I wasn't thinking of the email clients that didn't support media queries.

I go back and forth about catering to the small percentage that won't view it perfectly, whether email or website. At lease we don't have to cater to IE6 anymore. Thank goodness those days are over ;)

Cheers!
Jules
0
 
LVL 2

Author Closing Comment

by:Jules Webb
Comment Utility
Rob ROCKS! ;)

Thanks!
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Resolve Outlook connectivity issues after moving mailbox to new Exchange 2016 server
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now