Attachment of problem
Attached
When writing for a newsletter like this, does all of the styling have to be written in-line, or can some be in a css section?
I am no expert, but from what I have read, it should be all inline and tables. Some experts say that CSS and DIVs can be used, but for those email clients that ignore anything between the <style> tags you should have the inline, which is a loooot of work.
I use the mailchimp inliner tool.
I think I can live with this line showing, I suppose you cannot have a perfectly rendered newsletter on all email clients, but now my main issue is the fact that this newsletter, or rather the basic template I worked off, is not fluid…so now adding the media queries and am about to test it
Some email clients strip out all styles in the Head ( 
) so to be sure, it all needs to be inline. It’s incredible that this is still the case in this age, but there you go. On other fronts, email is even going backwards, thanks to Microsoft’s decision to base email around Word rendering rather than HTML standards.
Yes, it’s not that bad. I’m not at my main computer right now, but from memory, the mail chimp image was not linked in the code you posted, which is probably why I’m not seeing the line in Outlook.
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.)
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.
.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;
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.)
<!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
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.