1

I've build an email template that works fine in all clients, tested on Litmus. The problem is of course in 2007 Outlook. I have a two column and and three column layout that works 50% and then 50% it just breaks?

In the same email I will have one that works and then a few sections down with the exact same code it breaks?

Im using Campaign Monitor if that helps...

Two column Two column Three Column Three Column

Does anyone have any idea why that would happen? I mean if it works sometimes it must be coded correctly but then why would it randomly break other times?

*edit

Here is my code, nothing seems to be fixing it in 2007 and 2010.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width"/>
        <title>Email Template</title>
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>

        <style type="text/css">
            /*////// RESET STYLES //////*/
            body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
            table{border-collapse:collapse;}
            img, a img{border:0; outline:none; text-decoration:none;}
            h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
            p{margin:0!important;}

            /*////// CLIENT-SPECIFIC STYLES //////*/
            .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail/Outlook.com to display emails at full width. */
            .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height:100%;} /* Force Hotmail/Outlook.com to display line heights normally. */
            table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up. */
            #outlook a{padding:0;} /* Force Outlook 2007 and up to provide a "view in browser" message. */
            img{-ms-interpolation-mode: bicubic;} /* Force IE to smoothly render resized images. */
            body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;} /* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */

            /*////// FRAMEWORK STYLES //////*/
            .flexibleContainerCell{padding-top:30px; padding-Right:20px; padding-Left:20px;}
            .flexibleImage{height:auto;}
            .bottomShim{padding-bottom:30px;}
            .imageContent, .imageContentLast{padding-bottom:30px;}
            .nestedContainerCell{padding-top:30px; padding-Right:20px; padding-Left:20px;}

            /*////// FRAMEWORK STYLES EXTRA //////*/
            .ContainerCell{padding-top:0px; padding-Right:0px; padding-Left:0px;}
            .hero-imageContent, .heroimageContentLast{padding-bottom:0px;}

            /*////// GENERAL STYLES //////*/
            body, #bodyTable{background-color:#F5F5F5;}
            #bodyCell{padding-top:10px; padding-bottom:40px;}
            #emailBody{background-color:#FFFFFF; border:0px solid #DDDDDD; border-collapse:separate;}
            #emailHeader{background-color:#002855; border:0px solid #DDDDDD; border-collapse:separate;}
            h1, h2, h3, h4, h5, h6{color:#202020; font-family:'Open Sans',Arial,Helvetica,sans-serif; font-size:20px; line-height:125%; text-align:Left;}
            .textContent, .textContentLast{color:#404040; font-family:'Open Sans',Arial,Helvetica,sans-serif; font-size:12px; line-height:125%; text-align:Left; padding-bottom:30px;}
            .textContent a, .textContentLast a{color:#2C9AB7; text-decoration:underline;}
            .nestedContainer{background-color:#E5E5E5; border:1px solid #CCCCCC;}
            .emailButton{background-color:#2C9AB7; border-collapse:separate;}
            .buttonContent{color:#FFFFFF; font-family:'Open Sans',Arial,Helvetica,sans-serif; font-size:18px; font-weight:bold; line-height:100%; padding:15px; text-align:center;}
            .buttonContent a{color:#FFFFFF; display:block; text-decoration:none;}
            .emailCalendar{background-color:#FFFFFF; border:1px solid #CCCCCC;}
            .emailCalendarMonth{background-color:#2C9AB7; color:#FFFFFF; font-family:'Open Sans',Arial,Helvetica,sans-serif; font-size:16px; font-weight:bold; padding-top:10px; padding-bottom:10px; text-align:center;}
            .emailCalendarDay{color:#2C9AB7; font-family:'Open Sans',Arial,Helvetica,sans-serif; font-size:60px; font-weight:bold; line-height:100%; padding-top:30px; padding-bottom:30px; text-align:center;}

            /*////// MOBILE STYLES //////*/
            @media only screen and (max-width: 480px){          
                /*////// CLIENT-SPECIFIC STYLES //////*/
                body{width:100% !important; min-width:100% !important;} /* Force iOS Mail to render the email at full width. */

                table[id="emailBody"], table[id="emailHeader"], table[class="flexibleContainer"]{width:100% !important;}

                img[class="flexibleImage"]{height:auto !important; width:100% !important;}

                table[class="emailButton"]{width:100% !important;}
                td[class="buttonContent"]{padding:0 !important;}
                td[class="buttonContent"] a{padding:15px !important;}

                td[class="textContentLast"], td[class="imageContentLast"]{padding-top:30px !important;}

                /*////// GENERAL STYLES //////*/
                td[id="bodyCell"]{padding-top:10px !important; padding-Right:10px !important; padding-Left:10px !important;}
            }
        </style>
        <!--[if mso 12]>
            <style type="text/css">
                .flexibleContainer{display:block !important; width:100% !important;}
            </style>
        <![endif]-->
        <!--[if mso 14]>
            <style type="text/css">
                .flexibleContainer{display:block !important; width:100% !important;}
            </style>
        <![endif]-->
    </head>
    <body>
        <center>
            <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="background-color;#f3f3f3:">
                <tr>
                    <td align="center" valign="top" id="bodyCell" bgcolor="#f3f3f3">
                        <!-- EMAIL CONTAINER // -->

                        <table border="0" cellpadding="0" cellspacing="0" width="620" id="emailBody">

                            <repeater>

                            <layout label="Two Column">
                            <!-- MODULE ROW // -->
                            <tr>
                                <td align="center" valign="top">
                                    <!-- CENTERING TABLE // -->
                                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                        <tbody><tr>
                                            <td align="center" valign="top">
                                                <!-- FLEXIBLE CONTAINER // -->
                                                <table class="flexibleContainer" border="0" cellpadding="0" cellspacing="0" width="600">
                                                    <tbody><tr>
                                                        <td class="flexibleContainerCell" valign="top" width="600">


                                                            <!-- CONTENT TABLE // -->
                                                            <table class="flexibleContainer" align="Left" border="0" cellpadding="0" cellspacing="0" width="260">
                                                                <tbody><tr>
                                                                    <td class="imageContent" valign="top">
                                                                        <img src="http://placehold.it/350x150" class="flexibleImage" style="max-width:620px;" width="260" editable="true">
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="textContent" valign="top">
                                                                        <font face="'Open Sans', Arial, sans-serif"><multiline lable="Main Text">Erecab ium re plis nimaio quis utempos inullanis imo dent eseque pa id modipie nihitio mo offictasped quasinum re, ne occus denis nus, nosae.</multiline></font>

                                                                        <font face="'Open Sans', Arial, sans-serif"><multiline lable="Sub Text">
                                                                        Orita que poreseniae pelignimus imi, ipsus idunt et ant. Cabore omnient ommoditiur apit prorum harchic itatemporrum conet etusanda dolupist, sunt voluptae.
                                                                        </multiline></font>

                                                                        <font face="'Open Sans', Arial, sans-serif"><singleline lable="Read more"><a href="" style="color: #002855; font-size:12px; font-weight:900; text-decoration: none;">EN SAVOIR PLUS ›</a></singleline></font>
                                                                    </td>
                                                                </tr>
                                                            </tbody></table>
                                                            <!-- // CONTENT TABLE -->


                                                            <!-- CONTENT TABLE // -->
                                                            <table class="flexibleContainer" align="Right" border="0" cellpadding="0" cellspacing="0" width="260">
                                                                <tbody><tr>
                                                                    <td class="imageContentLast" valign="top">
                                                                        <img src="http://placehold.it/350x150" class="flexibleImage" style="max-width:620px;" width="260" editable="true">
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="textContent" valign="top">
                                                                        <font face="'Open Sans', Arial, sans-serif"><multiline lable="Main Text">Erecab ium re plis nimaio quis utempos inullanis imo dent eseque pa id modipie nihitio mo offictasped quasinum re, ne occus denis nus, nosae.</multiline></font>

                                                                        <font face="'Open Sans', Arial, sans-serif"><multiline lable="Sub Text">
                                                                        Orita que poreseniae pelignimus imi, ipsus idunt et ant. Cabore omnient ommoditiur apit prorum harchic itatemporrum conet etusanda dolupist, sunt voluptae.
                                                                        </multiline></font>

                                                                        <font face="'Open Sans', Arial, sans-serif"><singleline lable="Read more"><a href="" style="color: #002855; font-size:12px; font-weight:900; text-decoration: none;">EN SAVOIR PLUS ›</a></singleline></font>
                                                                    </td>
                                                                </tr>
                                                            </tbody></table>
                                                            <!-- // CONTENT TABLE -->

                                                        </td>
                                                    </tr>
                                                </tbody></table>
                                                <!-- // FLEXIBLE CONTAINER -->
                                            </td>
                                        </tr>
                                    </tbody></table>
                                    <!-- // CENTERING TABLE -->
                                </td>
                            </tr>
                            <!-- // MODULE ROW -->
                            </layout>


                            <layout label="Three Column">
                            <!-- MODULE ROW // -->
                            <tr>
                                <td align="center" valign="top">
                                    <!-- CENTERING TABLE // -->
                                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                        <tbody><tr>
                                            <td align="center" valign="top">
                                                <!-- FLEXIBLE CONTAINER // -->
                                                <table class="flexibleContainer" border="0" cellpadding="0" cellspacing="0" width="600">
                                                    <tbody><tr>
                                                        <td class="flexibleContainerCell" valign="top" width="600">


                                                            <!-- CONTENT TABLE // -->
                                                            <table class="flexibleContainer" align="Left" border="0" cellpadding="5" cellspacing="0" width="173">
                                                                <tbody><tr>
                                                                    <td class="imageContent" valign="top">
                                                                        <img src="http://placehold.it/350x150" class="flexibleImage" style="max-width:620px;" width="173" editable="true">
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="textContent" valign="top">
                                                                        <font face="'Open Sans', Arial, sans-serif"><multiline lable="Main Text">Erecab ium re plis nimaio quis utempos inullanis imo dent eseque pa id modipie nihitio mo offictasped quasinum re, ne occus denis nus, nosae.</multiline></font>

                                                                        <font face="'Open Sans', Arial, sans-serif"><multiline lable="Sub Text">
                                                                        Orita que poreseniae pelignimus imi, ipsus idunt et ant. Cabore omnient ommoditiur apit prorum harchic itatemporrum conet etusanda dolupist, sunt voluptae.
                                                                        </multiline></font>

                                                                        <font face="'Open Sans', Arial, sans-serif"><singleline lable="Read more"><a href="" style="color: #002855; font-size:12px; font-weight:900; text-decoration: none;">EN SAVOIR PLUS ›</a></singleline></font>
                                                                    </td>
                                                                </tr>
                                                            </tbody></table>
                                                            <!-- // CONTENT TABLE -->

                                                            <!-- CONTENT TABLE // -->
                                                            <table class="flexibleContainer" align="Left" border="0" cellpadding="5" cellspacing="0" width="173">
                                                                <tbody><tr>
                                                                    <td class="imageContent" valign="top">
                                                                        <img src="http://placehold.it/350x150" class="flexibleImage" style="max-width:620px;" width="173" editable="true">
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="textContent" valign="top">
                                                                        <font face="'Open Sans', Arial, sans-serif"><multiline lable="Main Text">Erecab ium re plis nimaio quis utempos inullanis imo dent eseque pa id modipie nihitio mo offictasped quasinum re, ne occus denis nus, nosae.</multiline></font>

                                                                        <font face="'Open Sans', Arial, sans-serif"><multiline lable="Sub Text">
                                                                        Orita que poreseniae pelignimus imi, ipsus idunt et ant. Cabore omnient ommoditiur apit prorum harchic itatemporrum conet etusanda dolupist, sunt voluptae.
                                                                        </multiline></font>

                                                                        <font face="'Open Sans', Arial, sans-serif"><singleline lable="Read more"><a href="" style="color: #002855; font-size:12px; font-weight:900; text-decoration: none;">EN SAVOIR PLUS ›</a></singleline></font>
                                                                    </td>
                                                                </tr>
                                                            </tbody></table>
                                                            <!-- // CONTENT TABLE -->

                                                            <!-- CONTENT TABLE // -->
                                                            <table class="flexibleContainer" align="Left" border="0" cellpadding="5" cellspacing="0" width="173">
                                                                <tbody><tr>
                                                                    <td class="imageContent" valign="top">
                                                                        <img src="http://placehold.it/350x150" class="flexibleImage" style="max-width:620px;" width="173" editable="true">
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td class="textContent" valign="top">
                                                                        <font face="'Open Sans', Arial, sans-serif"><multiline lable="Main Text">Erecab ium re plis nimaio quis utempos inullanis imo dent eseque pa id modipie nihitio mo offictasped quasinum re, ne occus denis nus, nosae.</multiline></font>

                                                                        <font face="'Open Sans', Arial, sans-serif"><multiline lable="Sub Text">
                                                                        Orita que poreseniae pelignimus imi, ipsus idunt et ant. Cabore omnient ommoditiur apit prorum harchic itatemporrum conet etusanda dolupist, sunt voluptae.
                                                                        </multiline></font>

                                                                        <font face="'Open Sans', Arial, sans-serif"><singleline lable="Read more"><a href="" style="color: #002855; font-size:12px; font-weight:900; text-decoration: none;">EN SAVOIR PLUS ›</a></singleline></font>
                                                                    </td>
                                                                </tr>
                                                            </tbody></table>
                                                            <!-- // CONTENT TABLE -->


                                                        </td>
                                                    </tr>
                                                </tbody></table>
                                                <!-- // FLEXIBLE CONTAINER -->
                                            </td>
                                        </tr>
                                    </tbody></table>
                                    <!-- // CENTERING TABLE -->
                                </td>
                            </tr>
                            <!-- // MODULE ROW -->
                            </layout>

                        </repeater>

                        </table>
                        <!-- // EMAIL CONTAINER -->
                    </td>
                </tr>
            </table>
        </center>
    </body>
</html>
oOPurple_HazeOo
  • 27
  • 1
  • 1
  • 8

2 Answers2

0

Use nested table to define padding, you can code like below:

Edited code, always use nested tables(try to avoid stack tables ), here I have showed for two column layout. Use similar way for 3 column layout.

<!-- FLEXIBLE CONTAINER // -->

<table class="flexibleContainer" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td class="flexibleContainerCell" valign="top">
<table class="flexibleContainer" align="left" border="0" cellpadding="0" cellspacing="0" width="560">
<tr>

<!-- left container // -->
<td align="left" valign="top" class="drop_col" style="padding-right:40px;">
<table class="flexibleContainer" border="0" cellpadding="0" cellspacing="0" width="260">
<tr>
left container
</tr>
</table>
</td>
<!-- end of left container // -->
<!-- right container // -->
<td align="left" valign="top" class="drop_col">
<table class="flexibleContainer" border="0" cellpadding="0" cellspacing="0" width="260">
<tr>
right container
</tr>
</table>
</td>
<!-- end of right container // -->

</tr>
</table>
</td>
</tr>
</table>

CSS: 

@media only screen and (max-width: 480px){  
 td[class="drop_col"]{width:100%;float:left;padding-right:0px !important;}
}
Arun Kumar M
  • 1,607
  • 1
  • 12
  • 24
0

I removed all padding and replaced with margin-left and margin-right, repeated in all td elements and that seemed to work.

oOPurple_HazeOo
  • 27
  • 1
  • 1
  • 8