I am about to lose my mind. PLEASE HELP with my HTML newsletter

**ronpat** · Oct 11, 2012 23:38

milkandhoney, are you willing to look at a "seriously" hacked version of your html? I think the bugginess can be worked around by changing the structure, but it's early yet <smile>. Obviously, it will not be a plug-n-play fix. Just an example of how to change the widths and table layout to make it work in spite of Microsoft... which means, you'll have to adapt and style my hack to work with you cms <smile>. I'll give it a try if you're interested. Your structure as indicated by the comment marks will be altered.

If I use a bit of css, will mailchimp turn it into in-line code for you? (I've never heard of mailchimp, sorry.)

**benbob** · Oct 12, 2012 01:23

Have you validated it?
I'm no star in coding, but it gives the impression that some things are defined more than once like "externalclass" appearing twice, plus "externalclass *". If you are determined to use the existing code, maybe renaming parts in such a way that they are more intuitively indicative of what they do and more clearly different will help to narrow down where the bug is.

Code:

.ReadMsgBody{
			width:100%;
		}
		.ExternalClass{
			width:100%;
		}
		.ExternalClass *{
			line-height:120%;
		}
		body{
			width:100%;
			background-color:#DDDDDD;
			padding:0;
			margin:0;
			-webkit-text-size-adjust:none;
		}
		span.yshortcuts{
			color:#000;
			background-color:none;
			border:none;
		}
		span.yshortcuts:hover,span.yshortcuts:active,span.yshortcuts:focus{
			color:#000;
			background-color:none;
			border:none;
		}
		.ReadMsgBody{
			width:100%;
		}
		.ExternalClass{
			width:100%;
		}
		body{
			width:100%;
			background-color:#DDDDDD;
			padding:0;
			margin:0;
			-webkit-text-size-adjust:none;

**ronpat** · Oct 12, 2012 19:09

By the way, and this question applies to all, can you really ever have a perfectly rendered newsletter? Or will the various newsletter clients always have bugs that cause issues?

I think this may be pretty close... for Outlook, anyway. I would be grateful if you would test this and let me know how it works.

(This is not "polished", but should be sufficient for testing alignment.)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<!--

-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Facebook sharing information tags --><meta property="og:title" content="*|MC:SUBJECT|*">
<title>*|MC:SUBJECT|*</title>
<style type="text/css">
body {
	width:100%;
	background-color:#ddd;
	padding:0;
	margin:0;
	-webkit-text-size-adjust:none;
    margin-top:20px;
    margin-bottom:20px;
}
a,a:link,a:visited {
	text-decoration:none;
	color:#369;
}
a:hover {
	text-decoration:underline;
}
h2 {
    border-bottom:1px solid #333;
	color:#202020;
    font-weight:bold;
    font-size:28px;
    mso-line-height-rule:exactly line-height:100%;
    font-family:Arial;
    text-transform:uppercase;
    text-align:left;
    padding:0px;
    margin:0px;
}
h3 {
    border-bottom:1px solid #333;
	color:#202020;
    font-weight:bold;
    font-size:24px;
    line-height:100%;
    font-family:Arial;
    text-transform:uppercase;
    text-align:left;
    padding:0px;
    margin:0px;
}
h4 {
    border-bottom:1px solid #333;
    color:#202020;
    font-weight:bold;
    font-size:22px;
    mso-line-height-rule:exactly line-height:100%;
    font-family:Arial;
    text-transform:uppercase;
    text-align:left;
    padding:0px;
    margin:0px;
}
p {
    margin-top:.75em;
	margin-bottom:0;
}
table {
    border:0px;
	border-collapse:collapse;
    padding:0px;
    margin:0px;
}
td {
    text-align:left;
    border-collapse:collapse;
    vertical-align:top;
    font-size:1px;    /* reduces the extra space at the bottom of the cell to 3px. */
    padding:0px;      /* reduces the extra space at the bottom and right of the cell by 1 more px. */
}
img {display:block;}

#outer {
    width:100%;
	background-color:#ddd;
}
.backgroundTable {
    width:601px;
    margin:0px auto;
}
.whiteContainer {
    width:600px;
    background-color:#fff;
}
.transContainer {
    width:600px;
    background-color:#ddd;
}

.preheader {}
.preheader td {padding:20px 0px}
.preheader td.col1 {width:400px;}
.preheader td.col2 {}
.preheader td.col2 a {
    text-decoration:underline;
    font-weight:normal;
    color:#336699;
}

.divver {
    text-align:left;
    mso-line-height-rule:exactly line-height:100%;
    font-size:10px;
    font-family:Arial;
    color:#505050;
    -webkit-text-size-adjust:none;
}

td.headerContent {
    vertical-align:middle;
    text-align:center;
    mso-line-height-rule:exactly;
    line-height:100%;
    font-weight:bold;
    font-size:34px;
    font-family:Arial;
    color:#202020;
}

.bodyContent {
    background-color:#fff;
}
.standardContent td {
    padding-left:20px;
    padding-right:20px;
    padding:20px;
}
.standardContent p {
    margin-top:0.5em;
    margin-bottom:1em;
}
.standardContent div {
    color:#505050;
    font-size:12px;
    mso-line-height-rule:exactly line-height:140%;
    font-family:Arial;
    -webkit-text-size-adjust:none;
    test-align:left;
}
td.leftColumnContent {
    padding-left:22px;
    padding-right:15px;
}
td.rightColumnContent {
    padding-left:15px;
    padding-right:22px;
}
td.leftColumnContent table td,
td.rightColumnContent table td {
    padding-bottom:20px;
}
td.leftColumnContent div,
td.rightColumnContent div {
    text-align:left;
    mso-line-height-rule:exactly line-height:140%;
    font-size:12px;
    font-family:Arial;
    color:#505050;
    -webkit-text-size-adjust:none;
}
.templateFooter table {
    margin:0px auto;
}

</style>
</head>
<body>

<table id="outer" cellspacing="0" cellpadding="0">
<tr>
    <td>
        <table class="backgroundTable" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <table class="transContainer" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
<!-- // Begin Module: Standard Preheader  -->
                        <table class="preheader" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="col1" valign="top">
                                <div class="divver" mc:edit="std_preheader_content" ></div>
                            </td>
<!-- *|IFNOT:ARCHIVE_PAGE|* -->
                            <td class="col2" valign="top">
                                <div class="divver" mc:edit="std_preheader_links">
                                    Is this email not displaying correctly?<br><a href="*|ARCHIVE|*" target="_blank">View it in your browser</a>.
                                </div>
                            </td>
<!-- *|END:IF|* -->
                        </tr>
                        </table>
<!-- // End Module: Standard Preheader  -->
                    </td>
                </tr>
                </table>
            </td>
        </tr>
        </table>

        <table class="backgroundTable" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <img src="http://gallery.mailchimp.com/7098b59dfcc7beb80da7b1bff/images/Depositphotos_6133508_original_1_.jpg" mc:label="header_image" mc:edit="header_image" mc:allowdesigner="" mc:allowtext="">
            </td>
        </tr>
        </table>

        <table class="backgroundTable" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <table class="whiteContainer" cellpadding="0" cellspacing="0">
                <tr>
                    <td valign="top">
<!-- // Begin Template Body  -->
                        <table class="" cellpadding="0" cellspacing="0">
                        <tr mc:repeatable>
                            <td class="bodyContent">
<!-- // Begin Module: Standard Content  -->
                                <table class="standardContent" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td valign="top">
                                        <div mc:edit="std_content00"><span style="font-size:12px;">Welcome to the first issue of...</span>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, quam et commodo placerat, nulla est mollis sapien, quis vehicula odio magna non neque. Proin porta purus eget elit tempus vehicula. Vivamus condimentum ullamcorper volutpat. Sed aliquam, metus a dapibus bibendum, odio sem dictum mi, ullamcorper lacinia risus urna et sem. Cras tristique, dolor ut posuere commodo, felis quam accumsan quam, a lacinia ipsum arcu ut dolor. Maecenas quis neque tellus. Vestibulum pellentesque arcu nec elit bibendum tempor</p>
                                            <hr>
                                        </div>
                                    </td>
                                 </tr>
                                </table>
<!-- // End Module: Standard Content  -->
                            </td>
                        </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td valign="top">
                        <table class="" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="leftColumnContent" valign="top">
<!-- // Begin Module: Top Image with Content  -->
                                <table width="240" cellpadding="0" cellspacing="0">
                                <tr mc:repeatable>
                                    <td valign="top">
                                        <img src="http://gallery.mailchimp.com/7098b59dfcc7beb80da7b1bff/images/amanda.jpg" mc:label="image" mc:edit="tiwc300_image00">
                                        <div mc:edit="tiwc300_content00">
                                            <h4 class="h4">
                                                NEW APPOINTMENT
                                            </h4>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, quam et commodo placerat, nulla est mollis sapien, quis vehicula odio magna non neque. Proin porta purus eget elit tempus vehicula. Vivamus condimentum ullamcorper volutpat. Sed aliquam, metus a dapibus bibendum, odio sem dictum mi, ullamcorper lacinia risus urna et sem. Cras tristique, dolor ut posuere commodo, felis quam accumsan quam, a lacinia ipsum arcu ut dolor. Maecenas quis neque tellus. Vestibulum pellentesque arcu nec elit bibendum tempor</p>
                                        </div>
                                    </td>
                                </tr>
                                <tr mc:repeatable>
                                    <td valign="top">
                                        <img src="http://gallery.mailchimp.com/7098b59dfcc7beb80da7b1bff/images/Depositphotos_5757595_original.1.jpg" mc:label="image" mc:edit="tiwc300_image00">
                                        <div mc:edit="tiwc300_content00">
                                            <h4 class="h4">
                                                title
                                            </h4>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, quam et commodo placerat, nulla est mollis sapien, quis vehicula odio magna non neque. Proin porta purus eget elit tempus vehicula. Vivamus condimentum ullamcorper volutpat. Sed aliquam, metus a dapibus bibendum, odio sem dictum mi, ullamcorper lacinia risus urna et sem. Cras tristique, dolor ut posuere commodo, felis quam accumsan quam, a lacinia ipsum arcu ut dolor. Maecenas quis neque tellus. Vestibulum pellentesque arcu nec elit bibendum tempor</p>
                                        </div>
                                     </td>
                                </tr>
                                </table>
<!-- // End Module: Top Image with Content  -->
                            </td>
                            <td class="rightColumnContent" valign="top">
<!-- // Begin Module: Top Image with Content  -->
                                <table cellpadding="0" cellspacing="0">
                                <tr mc:repeatable>
                                    <td valign="top">
                                        <img src="http://gallery.mailchimp.com/7098b59dfcc7beb80da7b1bff/images/amanda.jpg" mc:label="image" mc:edit="tiwc300_image01">
                                        <div mc:edit="tiwc300_content01">
                                            <h4 class="h4">
                                                NEW APPOINTMENT
                                            </h4>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, quam et commodo placerat, nulla est mollis sapien, quis vehicula odio magna non neque. Proin porta purus eget elit tempus vehicula. Vivamus condimentum ullamcorper volutpat. Sed aliquam, metus a dapibus bibendum, odio sem dictum mi, ullamcorper lacinia risus urna et sem. Cras tristique, dolor ut posuere commodo, felis quam accumsan quam, a lacinia ipsum arcu ut dolor. Maecenas quis neque tellus. Vestibulum pellentesque arcu nec elit bibendum tempor</p>
                                        </div>
                                    </td>
                                </tr>
                                <tr mc:repeatable>
                                    <td valign="top"> 
                                        <img src="http://gallery.mailchimp.com/7098b59dfcc7beb80da7b1bff/images/amanda.jpg" mc:label="image" mc:edit="tiwc300_image01">
                                        <div mc:edit="tiwc300_content01">
                                            <h4 class="h4">
                                                TEAM PROFILE
                                            </h4>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, quam et commodo placerat, nulla est mollis sapien, quis vehicula odio magna non neque. Proin porta purus eget elit tempus vehicula. Vivamus condimentum ullamcorper volutpat. Sed aliquam, metus a dapibus bibendum, odio sem dictum mi, ullamcorper lacinia risus urna et sem. Cras tristique, dolor ut posuere commodo, felis quam accumsan quam, a lacinia ipsum arcu ut dolor. Maecenas quis neque tellus. Vestibulum pellentesque arcu nec elit bibendum tempor</p>
                                        </div>
                                    </td>
                                </tr>
                                </table>
<!-- // End Module: Top Image with Content  -->
                            </td>
                        </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td>
                        <table class="" cellpadding="0" cellspacing="0">
                        <tr mc:repeatable>
                            <td class="bodyContent">
<!-- // Begin Module: Standard Content  -->
                                <table class="standardContent" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td valign="top">
                                        <div mc:edit="std_content00">
                                            <h2 class="newProjects">NEW PROJECTS</h2>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, quam et commodo placerat, nulla est mollis sapien, quis vehicula odio magna non neque. Proin porta purus eget elit tempus vehicula.</p>
                                        </div>
                                    </td>
                                </tr>
                                </table>
<!-- // End Module: Standard Content  -->
                            </td>
                        </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td>
                        <table class="" cellpadding="0" cellspacing="0">
                        <tr mc:repeatable>
                            <td class="bodyContent" valign="top">
<!-- // Begin Module: Standard Content  -->
                                <table class="standardContent" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td valign="top">
                                        <div mc:edit="std_content00">
                                            <h3 class="recentlyCompleted">RECENTLY COMPLETED</h3>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, quam et commodo placerat, nulla est mollis sapien, quis vehicula odio magna non neque. Proin porta purus eget elit tempus vehicula.</p>
                                        </div>
                                    </td>
                                </tr>
                                </table>
<!-- // End Module: Standard Content  -->
                            </td>
                        </tr>
                        </table>
<!-- // End Template Body  -->
                    </td>
                </tr>
                </table>
            </td>
        </tr>
        </table>

        <table class="backgroundTable" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <table class="transContainer" cellpadding="0" cellspacing="0">
                <tr>
                    <td align="center" valign="top">
<!-- // Begin Template Footer  -->
                        <table class="templateFooter" width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="footerContent" valign="top">
<!-- // Begin Module: Standard Footer  -->
                                <table cellpadding="0" cellspacing="0">
                                <tr>
                                    <td class="social" colspan="2" valign="left">
                                        <div mc:edit="std_social" style="margin-bottom:10px;margin-top:10px;text-align:left;mso-line-height-rule:exactly line-height:125%;font-size:11px;font-family:Arial;color:#707070;-webkit-text-size-adjust:none;">&nbsp;<a href="*|FORWARD|*" style="text-decoration:underline;font-weight:normal;color:#666;">forward to a friend</a> </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td valign="top" width="350">
                                        <div mc:edit="std_footer" style="text-align:left;mso-line-height-rule:exactly line-height:125%;font-size:11px;font-family:Arial;color:#707070;-webkit-text-size-adjust:none;"></div>
                                    </td>
                                    <td class="monkeyRewards" valign="top" width="190">
                                        <div mc:edit="monkeyrewards" style="text-align:left;mso-line-height-rule:exactly line-height:125%;font-size:11px;font-family:Arial;color:#707070;-webkit-text-size-adjust:none;">
                                             *|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|*
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="utility" colspan="2" valign="middle">
                                        <div mc:edit="std_utility" style="margin-top:10px;text-align:left;mso-line-height-rule:exactly line-height:125%;font-size:11px;font-family:Arial;color:#707070;-webkit-text-size-adjust:none;">
                                            <a href="*|UNSUB|*" style="text-decoration:underline;font-weight:normal;color:#666;">unsubscribe from this list</a> | <a href="*|UPDATE_PROFILE|*" style="text-decoration:underline;font-weight:normal;color:#666;">update subscription preferences</a> 
                                        </div>
                                    </td>
                                </tr>
                                </table>
<!-- // End Module: Standard Footer  -->
                            </td>
                        </tr>
                        </table>
<!-- // End Template Footer  -->
                    </td>
                </tr>
                </table>
            </td>
        </tr>
        </table>
    </td>
</tr>
</table>

</body>
</html>

**milkandhoney** · Oct 14, 2012 01:22

Originally Posted by ronpat

I think this may be pretty close... for Outlook, anyway. I would be grateful if you would test this and let me know how it works.

(This is not "polished", but should be sufficient for testing alignment.)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<!--

-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Facebook sharing information tags --><meta property="og:title" content="*|MC:SUBJECT|*">
<title>*|MC:SUBJECT|*</title>
<style type="text/css">
body {
	width:100%;
	background-color:#ddd;
	padding:0;
	margin:0;
	-webkit-text-size-adjust:none;
    margin-top:20px;
    margin-bottom:20px;
}
a,a:link,a:visited {
	text-decoration:none;
	color:#369;
}
a:hover {
	text-decoration:underline;
}
h2 {
    border-bottom:1px solid #333;
	color:#202020;
    font-weight:bold;
    font-size:28px;
    mso-line-height-rule:exactly line-height:100%;
    font-family:Arial;
    text-transform:uppercase;
    text-align:left;
    padding:0px;
    margin:0px;
}
h3 {
    border-bottom:1px solid #333;
	color:#202020;
    font-weight:bold;
    font-size:24px;
    line-height:100%;
    font-family:Arial;
    text-transform:uppercase;
    text-align:left;
    padding:0px;
    margin:0px;
}
h4 {
    border-bottom:1px solid #333;
    color:#202020;
    font-weight:bold;
    font-size:22px;
    mso-line-height-rule:exactly line-height:100%;
    font-family:Arial;
    text-transform:uppercase;
    text-align:left;
    padding:0px;
    margin:0px;
}
p {
    margin-top:.75em;
	margin-bottom:0;
}
table {
    border:0px;
	border-collapse:collapse;
    padding:0px;
    margin:0px;
}
td {
    text-align:left;
    border-collapse:collapse;
    vertical-align:top;
    font-size:1px;    /* reduces the extra space at the bottom of the cell to 3px. */
    padding:0px;      /* reduces the extra space at the bottom and right of the cell by 1 more px. */
}
img {display:block;}

#outer {
    width:100%;
	background-color:#ddd;
}
.backgroundTable {
    width:601px;
    margin:0px auto;
}
.whiteContainer {
    width:600px;
    background-color:#fff;
}
.transContainer {
    width:600px;
    background-color:#ddd;
}

.preheader {}
.preheader td {padding:20px 0px}
.preheader td.col1 {width:400px;}
.preheader td.col2 {}
.preheader td.col2 a {
    text-decoration:underline;
    font-weight:normal;
    color:#336699;
}

.divver {
    text-align:left;
    mso-line-height-rule:exactly line-height:100%;
    font-size:10px;
    font-family:Arial;
    color:#505050;
    -webkit-text-size-adjust:none;
}

td.headerContent {
    vertical-align:middle;
    text-align:center;
    mso-line-height-rule:exactly;
    line-height:100%;
    font-weight:bold;
    font-size:34px;
    font-family:Arial;
    color:#202020;
}

.bodyContent {
    background-color:#fff;
}
.standardContent td {
    padding-left:20px;
    padding-right:20px;
    padding:20px;
}
.standardContent p {
    margin-top:0.5em;
    margin-bottom:1em;
}
.standardContent div {
    color:#505050;
    font-size:12px;
    mso-line-height-rule:exactly line-height:140%;
    font-family:Arial;
    -webkit-text-size-adjust:none;
    test-align:left;
}
td.leftColumnContent {
    padding-left:22px;
    padding-right:15px;
}
td.rightColumnContent {
    padding-left:15px;
    padding-right:22px;
}
td.leftColumnContent table td,
td.rightColumnContent table td {
    padding-bottom:20px;
}
td.leftColumnContent div,
td.rightColumnContent div {
    text-align:left;
    mso-line-height-rule:exactly line-height:140%;
    font-size:12px;
    font-family:Arial;
    color:#505050;
    -webkit-text-size-adjust:none;
}
.templateFooter table {
    margin:0px auto;
}

</style>
</head>
<body>

<table id="outer" cellspacing="0" cellpadding="0">
<tr>
    <td>
        <table class="backgroundTable" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <table class="transContainer" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
<!-- // Begin Module: Standard Preheader  -->
                        <table class="preheader" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="col1" valign="top">
                                <div class="divver" mc:edit="std_preheader_content" ></div>
                            </td>
<!-- *|IFNOT:ARCHIVE_PAGE|* -->
                            <td class="col2" valign="top">
                                <div class="divver" mc:edit="std_preheader_links">
                                    Is this email not displaying correctly?<br><a href="*|ARCHIVE|*" target="_blank">View it in your browser</a>.
                                </div>
                            </td>
<!-- *|END:IF|* -->
                        </tr>
                        </table>
<!-- // End Module: Standard Preheader  -->
                    </td>
                </tr>
                </table>
            </td>
        </tr>
        </table>

        <table class="backgroundTable" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <img src="http://gallery.mailchimp.com/7098b59dfcc7beb80da7b1bff/images/Depositphotos_6133508_original_1_.jpg" mc:label="header_image" mc:edit="header_image" mc:allowdesigner="" mc:allowtext="">
            </td>
        </tr>
        </table>

        <table class="backgroundTable" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <table class="whiteContainer" cellpadding="0" cellspacing="0">
                <tr>
                    <td valign="top">
<!-- // Begin Template Body  -->
                        <table class="" cellpadding="0" cellspacing="0">
                        <tr mc:repeatable>
                            <td class="bodyContent">
<!-- // Begin Module: Standard Content  -->
                                <table class="standardContent" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td valign="top">
                                        <div mc:edit="std_content00"><span style="font-size:12px;">Welcome to the first issue of...</span>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, quam et commodo placerat, nulla est mollis sapien, quis vehicula odio magna non neque. Proin porta purus eget elit tempus vehicula. Vivamus condimentum ullamcorper volutpat. Sed aliquam, metus a dapibus bibendum, odio sem dictum mi, ullamcorper lacinia risus urna et sem. Cras tristique, dolor ut posuere commodo, felis quam accumsan quam, a lacinia ipsum arcu ut dolor. Maecenas quis neque tellus. Vestibulum pellentesque arcu nec elit bibendum tempor</p>
                                            <hr>
                                        </div>
                                    </td>
                                 </tr>
                                </table>
<!-- // End Module: Standard Content  -->
                            </td>
                        </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td valign="top">
                        <table class="" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="leftColumnContent" valign="top">
<!-- // Begin Module: Top Image with Content  -->
                                <table width="240" cellpadding="0" cellspacing="0">
                                <tr mc:repeatable>
                                    <td valign="top">
                                        <img src="http://gallery.mailchimp.com/7098b59dfcc7beb80da7b1bff/images/amanda.jpg" mc:label="image" mc:edit="tiwc300_image00">
                                        <div mc:edit="tiwc300_content00">
                                            <h4 class="h4">
                                                NEW APPOINTMENT
                                            </h4>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, quam et commodo placerat, nulla est mollis sapien, quis vehicula odio magna non neque. Proin porta purus eget elit tempus vehicula. Vivamus condimentum ullamcorper volutpat. Sed aliquam, metus a dapibus bibendum, odio sem dictum mi, ullamcorper lacinia risus urna et sem. Cras tristique, dolor ut posuere commodo, felis quam accumsan quam, a lacinia ipsum arcu ut dolor. Maecenas quis neque tellus. Vestibulum pellentesque arcu nec elit bibendum tempor</p>
                                        </div>
                                    </td>
                                </tr>
                                <tr mc:repeatable>
                                    <td valign="top">
                                        <img src="http://gallery.mailchimp.com/7098b59dfcc7beb80da7b1bff/images/Depositphotos_5757595_original.1.jpg" mc:label="image" mc:edit="tiwc300_image00">
                                        <div mc:edit="tiwc300_content00">
                                            <h4 class="h4">
                                                title
                                            </h4>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, quam et commodo placerat, nulla est mollis sapien, quis vehicula odio magna non neque. Proin porta purus eget elit tempus vehicula. Vivamus condimentum ullamcorper volutpat. Sed aliquam, metus a dapibus bibendum, odio sem dictum mi, ullamcorper lacinia risus urna et sem. Cras tristique, dolor ut posuere commodo, felis quam accumsan quam, a lacinia ipsum arcu ut dolor. Maecenas quis neque tellus. Vestibulum pellentesque arcu nec elit bibendum tempor</p>
                                        </div>
                                     </td>
                                </tr>
                                </table>
<!-- // End Module: Top Image with Content  -->
                            </td>
                            <td class="rightColumnContent" valign="top">
<!-- // Begin Module: Top Image with Content  -->
                                <table cellpadding="0" cellspacing="0">
                                <tr mc:repeatable>
                                    <td valign="top">
                                        <img src="http://gallery.mailchimp.com/7098b59dfcc7beb80da7b1bff/images/amanda.jpg" mc:label="image" mc:edit="tiwc300_image01">
                                        <div mc:edit="tiwc300_content01">
                                            <h4 class="h4">
                                                NEW APPOINTMENT
                                            </h4>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, quam et commodo placerat, nulla est mollis sapien, quis vehicula odio magna non neque. Proin porta purus eget elit tempus vehicula. Vivamus condimentum ullamcorper volutpat. Sed aliquam, metus a dapibus bibendum, odio sem dictum mi, ullamcorper lacinia risus urna et sem. Cras tristique, dolor ut posuere commodo, felis quam accumsan quam, a lacinia ipsum arcu ut dolor. Maecenas quis neque tellus. Vestibulum pellentesque arcu nec elit bibendum tempor</p>
                                        </div>
                                    </td>
                                </tr>
                                <tr mc:repeatable>
                                    <td valign="top"> 
                                        <img src="http://gallery.mailchimp.com/7098b59dfcc7beb80da7b1bff/images/amanda.jpg" mc:label="image" mc:edit="tiwc300_image01">
                                        <div mc:edit="tiwc300_content01">
                                            <h4 class="h4">
                                                TEAM PROFILE
                                            </h4>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, quam et commodo placerat, nulla est mollis sapien, quis vehicula odio magna non neque. Proin porta purus eget elit tempus vehicula. Vivamus condimentum ullamcorper volutpat. Sed aliquam, metus a dapibus bibendum, odio sem dictum mi, ullamcorper lacinia risus urna et sem. Cras tristique, dolor ut posuere commodo, felis quam accumsan quam, a lacinia ipsum arcu ut dolor. Maecenas quis neque tellus. Vestibulum pellentesque arcu nec elit bibendum tempor</p>
                                        </div>
                                    </td>
                                </tr>
                                </table>
<!-- // End Module: Top Image with Content  -->
                            </td>
                        </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td>
                        <table class="" cellpadding="0" cellspacing="0">
                        <tr mc:repeatable>
                            <td class="bodyContent">
<!-- // Begin Module: Standard Content  -->
                                <table class="standardContent" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td valign="top">
                                        <div mc:edit="std_content00">
                                            <h2 class="newProjects">NEW PROJECTS</h2>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, quam et commodo placerat, nulla est mollis sapien, quis vehicula odio magna non neque. Proin porta purus eget elit tempus vehicula.</p>
                                        </div>
                                    </td>
                                </tr>
                                </table>
<!-- // End Module: Standard Content  -->
                            </td>
                        </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td>
                        <table class="" cellpadding="0" cellspacing="0">
                        <tr mc:repeatable>
                            <td class="bodyContent" valign="top">
<!-- // Begin Module: Standard Content  -->
                                <table class="standardContent" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td valign="top">
                                        <div mc:edit="std_content00">
                                            <h3 class="recentlyCompleted">RECENTLY COMPLETED</h3>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, quam et commodo placerat, nulla est mollis sapien, quis vehicula odio magna non neque. Proin porta purus eget elit tempus vehicula.</p>
                                        </div>
                                    </td>
                                </tr>
                                </table>
<!-- // End Module: Standard Content  -->
                            </td>
                        </tr>
                        </table>
<!-- // End Template Body  -->
                    </td>
                </tr>
                </table>
            </td>
        </tr>
        </table>

        <table class="backgroundTable" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <table class="transContainer" cellpadding="0" cellspacing="0">
                <tr>
                    <td align="center" valign="top">
<!-- // Begin Template Footer  -->
                        <table class="templateFooter" width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="footerContent" valign="top">
<!-- // Begin Module: Standard Footer  -->
                                <table cellpadding="0" cellspacing="0">
                                <tr>
                                    <td class="social" colspan="2" valign="left">
                                        <div mc:edit="std_social" style="margin-bottom:10px;margin-top:10px;text-align:left;mso-line-height-rule:exactly line-height:125%;font-size:11px;font-family:Arial;color:#707070;-webkit-text-size-adjust:none;">*<a href="*|FORWARD|*" style="text-decoration:underline;font-weight:normal;color:#666;">forward to a friend</a> </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td valign="top" width="350">
                                        <div mc:edit="std_footer" style="text-align:left;mso-line-height-rule:exactly line-height:125%;font-size:11px;font-family:Arial;color:#707070;-webkit-text-size-adjust:none;"></div>
                                    </td>
                                    <td class="monkeyRewards" valign="top" width="190">
                                        <div mc:edit="monkeyrewards" style="text-align:left;mso-line-height-rule:exactly line-height:125%;font-size:11px;font-family:Arial;color:#707070;-webkit-text-size-adjust:none;">
                                             *|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|*
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="utility" colspan="2" valign="middle">
                                        <div mc:edit="std_utility" style="margin-top:10px;text-align:left;mso-line-height-rule:exactly line-height:125%;font-size:11px;font-family:Arial;color:#707070;-webkit-text-size-adjust:none;">
                                            <a href="*|UNSUB|*" style="text-decoration:underline;font-weight:normal;color:#666;">unsubscribe from this list</a> | <a href="*|UPDATE_PROFILE|*" style="text-decoration:underline;font-weight:normal;color:#666;">update subscription preferences</a> 
                                        </div>
                                    </td>
                                </tr>
                                </table>
<!-- // End Module: Standard Footer  -->
                            </td>
                        </tr>
                        </table>
<!-- // End Template Footer  -->
                    </td>
                </tr>
                </table>
            </td>
        </tr>
        </table>
    </td>
</tr>
</table>

</body>
</html>

Thanks ronpat

I will test this and get back to you.

I think as previously stated, the issue is most likely caused by the footer, the image added by mailchimp as the default "monkey rewards" system for free accounts, which I cannot control and outlook adds the border as I don't have the fix to set borders to zero for OL

**ronpat** · Oct 14, 2012 01:49

My hacky test page is probably incompatible with the template you're using and therefore useless to you, but I will be grateful if you can give it a test in your environment.

My theory is that there's nothing wrong with the footer. The problem is of course the buggy Outlook behavior, and the "fix" is careful table layout methods; such as not assigning a width to nested tables, or only assigning a width to the left column of the two column section. The thing that makes this layout difficult is the full width 600px image.

Am looking forward to hearing how it renders for you. If you are able to capture a screen shot, especially if there are bugs, I'd enjoy seeing it. Thanks very much, milkandhoney, I appreciate your time and trouble.

User Tag List

Thread: I am about to lose my mind. PLEASE HELP with my HTML newsletter

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions