Solved

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

Posted on 2014-01-19
14
1,815 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 7
14 Comments
 
LVL 43

Expert Comment

by:Rob
ID: 39793365
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
ID: 39793388
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 43

Expert Comment

by:Rob
ID: 39793419
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
NEW Veeam Agent for Microsoft Windows

Backup and recover physical and cloud-based servers and workstations, as well as endpoint devices that belong to remote users. Avoid downtime and data loss quickly and easily for Windows-based physical or public cloud-based workloads!

 
LVL 43

Expert Comment

by:Rob
ID: 39793422
This is also a good read and handy resource to have around: http://www.email-standards.org/
0
 
LVL 43

Expert Comment

by:Rob
ID: 39793423
Are you using Campaign Monitor? The template looks vaguely familiar
0
 
LVL 2

Author Comment

by:Jules Webb
ID: 39793495
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 43

Expert Comment

by:Rob
ID: 39793678
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
 
LVL 2

Author Comment

by:Jules Webb
ID: 39795685
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 43

Expert Comment

by:Rob
ID: 39795696
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
ID: 39796146
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
ID: 39798722
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 43

Assisted Solution

by:Rob
Rob earned 500 total points
ID: 39798836
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
ID: 39799248
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
ID: 39809866
Rob ROCKS! ;)

Thanks!
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Many people use more than one email account and so it becomes difficult for them to manage them when they use separate accounts,  so, in this article, I have shared an easy way to add Other Mail Accounts in your Google Inbox. It helps to combine all…
How to resolve IMCEAEX NDRs in Exchange or Exchange Online related to invalid X500 addresses.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
To add imagery to an HTML email signature, you have two options available to you. You can either add a logo/image by embedding it directly into the signature or hosting it externally and linking to it. The vast majority of email clients display l…

732 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