Menu
I've been working to design an HTML email, and for some reason it looks great in MailChimp/Chrome/GMail, but in Outlook the columns are stretched and look horrible (see screenshots). I'm not great with HTML, and I've tried to changing several max-width parameters to 600px instead of 100%, without success.
I'd like the email to always be 600px wide.
Any help is greatly appreciated.
^How it looks in Chrome/Gmail
^How it looks in Outlook (top blue part is 600px, while the rest is stretched)
Here is the HTML code I'm working with:
<style type="text/css">
#outlook a{
padding:0;
}
body{
width:600 !important;
}
.ReadMsgBody{
width:100%;
}
.ExternalClass{
width:100%;
}
body{
-webkit-text-size-adjust:none;
}
body{
margin:0;
padding:0;
}
img{
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
}
#backgroundTable{
height:100% !important;
margin:0;
padding:0;
width:100% !important;
}
body,#backgroundTable{
background-color:#314A66;
}
h1,.h1{
color:#FFFFFF;
display:block;
font-family:Verdana;
font-size:26px;
font-weight:bold;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:center;
}
h2,.h2{
color:#0E385F;
display:block;
font-family:Verdana;
font-size:22px;
font-weight:bold;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
h3,.h3{
color:#0E385F;
display:block;
font-family:Verdana;
font-size:20px;
font-weight:bold;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
h4,.h4{
color:#0E385F;
display:block;
font-family:Verdana;
font-size:12px;
font-weight:bold;
line-height:100%;
margin-top:0;
margin-right:0;
margin-bottom:10px;
margin-left:0;
text-align:left;
}
#templatePreheader{
background-color:#36C0CC;
}
.preheaderContent div{
color:#CCCCCC;
font-family:Lucida Sans,Lucida;
font-size:10px;
line-height:110%;
text-align:left;
}
.preheaderContent div a:link,.preheaderContent div a:visited,.preheaderContent div a .yshortcuts {
color:#EEEEEE;
font-weight:normal;
text-decoration:underline;
}
#templateHeader{
background-color:#36C0CC;
border-bottom:0;
}
.headerContent div{
color:#FFFFFF;
font-family:Verdana;
font-size:14px;
font-weight:normal;
line-height:100%;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:10px;
text-align:left;
vertical-align:top;
}
.headerContent div a:link,.headerContent div a:visited,.headerContent div a .yshortcuts {
color:#336699;
font-weight:normal;
text-decoration:underline;
}
.headerContent div img{
height:auto;
max-width:600px;
}
#templateContainer,.bodyContent{
background-color:#FFFFFF;
}
#templateBody{
border:0px none #10263F;
}
.bodyContent div,#social div{
color:#505050;
font-family:Verdana;
font-size:12px;
line-height:150%;
}
.bodyContent div{
text-align:justify;
}
.bodyContent div a:link,.bodyContent div a:visited,.bodyContent div a .yshortcuts ,#social div a:link,#social div a:visited{
color:#336699;
font-weight:normal;
text-decoration:none;
}
.bodyContent div img{
display:inline;
height:auto;
max-width:360px;
}
#social{
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
}
#social div{
text-align:center;
}
#social div img{
max-width:560px;
}
#templateSidebar{
background-color:#accb50;
border-left:0px dotted;
}
.sidebarContent div{
color:#ffffff;
font-family:Lucida Sans,Lucida;
font-size:11px;
line-height:150%;
text-align:justify;
}
.sidebarContent div a:link,.sidebarContent div a:visited,.sidebarContent div a .yshortcuts {
color:#336699;
font-weight:normal;
text-decoration:none;
}
.sidebarContent img{
display:inline;
height:auto !important;
margin-bottom:10px !important;
}
#templateFooter{
background-color:#36C0CC;
border-top:2px solid #111111;
}
.footerContent div{
color:#CCCCCC;
font-family:Verdana;
font-size:10px;
line-height:125%;
text-align:left;
}
.footerContent div a:link,.footerContent div a:visited,.footerContent div a .yshortcuts {
color:#EEEEEE;
font-weight:normal;
text-decoration:underline;
}
.footerContent img{
display:inline;
}
#utility{
background-color:#36C0CC;
border:0;
}
#utility div{
text-align:center;
}
#monkeyRewards img{
max-width:190px;
}
body,#backgroundTable{
background-color:#ffffff;
}
h1,.h1{
color:#ffffff;
text-align:left;
font-family:Lucida Sans,Lucida;
line-height:110%;
}
.footerContent div a:link,.footerContent div a:visited,.footerContent div a .yshortcuts{
color:#4D4C4C;
}
.bodyContent div,#social div{
font-family:Lucida Sans,Lucida;
font-size:11px;
color:#545454;
line-height:150%;
}
#templateContainer,.bodyContent{
background-color:#E2E2E2;
}
</style></head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="-webkit-text-size-adjust: none;margin: 0;padding: 0;background-color: #ffffff;width: 600 !important;">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable" style="margin: 0;padding: 0;background-color: #ffffff;height: 100% !important;width: 100% !important;">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Preheader \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="600" id="templatePreheader" style="background-color: #36C0CC;">
<tr>
<td valign="top" class="preheaderContent">
<!-- // Begin Module: Standard Preheader \ -->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td valign="top">
<div style="color: #CCCCCC;font-family: Lucida Sans,Lucida;font-size: 10px;line-height: 110%;text-align: left;"><a href="www.scandit.com" target="_blank" style="color: #EEEEEE;font-weight: normal;text-decoration: underline;"><img align="left" alt="" height="57" src="http://gallery.mailchimp.com/3c1958ec76b5e1d93c32cf088/files/scandit_logo_white_wtag2.png" style="width: 147px;height: 57px;float: left;border-width: 0px;border-style: solid;line-height: 100%;outline: none;text-decoration: none;" width="147"></a> </div>
</td>
<!-- *|IFNOT:ARCHIVE_PAGE|* -->
<td valign="top" width="190">
<div style="color: #CCCCCC;font-family: Lucida Sans,Lucida;font-size: 10px;line-height: 110%;text-align: left;">
Is this email not displaying correctly?<br><a href="*|ARCHIVE|*" target="_blank" style="color: #EEEEEE;font-weight: normal;text-decoration: underline;">View it in your browser</a>.
</div>
</td>
<!-- *|END:IF|* -->
</tr>
</table>
<!-- // End Module: Standard Preheader \ -->
</td>
</tr>
</table>
<!-- // End Template Preheader \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer" style="background-color: #E2E2E2;">
<tr>
<td align="center" valign="top">
<!-- // Begin Template Header \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader" style="background-color: #36C0CC;border-bottom: 0;">
<tr>
<td class="headerContent">
<div style="color: #FFFFFF;font-family: Verdana;font-size: 14px;font-weight: normal;line-height: 100%;padding-top: 20px;padding-right: 20px;padding-bottom: 20px;padding-left: 10px;text-align: left;vertical-align: top;"><span style="font-size:24px;"><strong> Howdy!</strong><br></span></div>
<div id="_com_1" uage="JavaScript" style="color: #FFFFFF;font-family: Lucida Sans,Lucida;font-size: 14px;line-height: 150%;text-align: justify; padding-left: 20px;">
Welcome!<br><br>
<br></div>
</td>
</tr>
</table>
<!-- // End Template Header \\ -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- // Begin Template Body \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody" style="border: 0px none #10263F;">
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" class="bodyContent" style="background-color: #E2E2E2;">
<!-- // Begin Module: Standard Content \\ -->
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr>
<td valign="top">
<div style="color: #545454;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;text-align: justify;"><div style="text-align: left;color: #545454;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;">
<div style="color: #545454;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;text-align: justify;">
<div style="color: #545454;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;text-align: justify;">
<strong>Features</strong><br>
<hr>
</div>
<ul>
</ul>
</div>
<hr>
<br>
<center><FORM METHOD="LINK" ACTION="https://SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT">
<INPUT TYPE="submit" VALUE="SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT">
</FORM></center>
<br>
<br>
SAMPLE TEXT
<br>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
<!-- // End Module: Standard Content \\ -->
</td>
</tr>
</table>
</td>
<!-- // Begin Sidebar \\ -->
<td valign="top" width="300" id="templateSidebar" style="background-color: #accb50;border-left: 0px dotted;">
<table border="0" cellpadding="0" cellspacing="0" width="00">
<tr>
<td valign="top" class="sidebarContent" style="padding-bottom:20px;">
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr>
<td valign="top" style="padding-bottom:0;">
<div style="color: #ffffff;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;text-align: justify;"><h4 class="h4" style="color: #0E385F;display: block;font-family: Verdana;font-size: 12px;font-weight: bold;line-height: 100%;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;">
<span style="color:#fff0f5;">Getting Started</span></h4>
<hr>
<div style="text-align: left;color: #ffffff;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;">
<strong><span style="font-size:12px;"><span style="color: rgb(255, 240, 245); ">
<ul>
<li>Barcode Scanner SDK Documentation
<ul>
</ul>
<br>
SAMPLE TEXTSAMPLE TEXTSAMPLE TEXT <a href="" target="_blank" style="color: #336699;font-weight: normal;text-decoration: none;">FAQs</a> or <a href="mailto:SAMPLETEXT.com" target="_blank" style="color: #336699;font-weight: normal;text-decoration: none;">contact us</a>.<br>
<h4 style="color: #0E385F;display: block;font-family: Verdana;font-size: 12px;font-weight: bold;line-height: 100%;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;">
<br><br>
<span style="color:#fff0f5;">Get in Touch</span></h4>
<hr>
SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT<br>
<h4 style="color: #0E385F;display: block;font-family: Verdana;font-size: 12px;font-weight: bold;line-height: 100%;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;">
<br><br>
<span style="color:#fff0f5;">Connect with us</span></h4>
<hr>
</div>
</td>
</tr>
</table>
<!-- // Begin Module: Social Block with Icons \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" style="padding-left:20px; padding-right:20px;">
<table border="0" cellpadding="0" cellspacing="4">
<tr mc:hideable="hideable_1" mchideable="hideable_1">
<td align="left" valign="middle" width="16">
<img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/sfs_icon_facebook.png" style="margin: 0 !important;height: auto !important;line-height: 100%;outline: none;text-decoration: none;display: inline;margin-bottom: 10px !important;">
</td>
<td align="left" valign="top">
<div style="color: #ffffff;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;text-align: justify;"><div style="text-align: left;color: #ffffff;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;">
<span style="font-size:11px;"><a href="http://www.facebook.com/pages/Scandit/127334280653842" target="_blank" style="color: #336699;font-weight: normal;text-decoration: none;">Friend us on Facebook</a></span></div>
</div>
</td>
</tr>
<tr mc:hideable="hideable_2" mchideable="hideable_2">
<td align="left" valign="middle" width="16">
<img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/sfs_icon_twitter.png" style="margin: 0 !important;height: auto !important;line-height: 100%;outline: none;text-decoration: none;display: inline;margin-bottom: 10px !important;">
</td>
<td align="left" valign="top">
<div style="color: #ffffff;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;text-align: justify;"><a href="http://www.twitter.com/scandit" target="_blank" style="color: #336699;font-weight: normal;text-decoration: none;">Follow us on Twitter</a> </div>
</td>
</tr>
<tr mc:hideable="hideable_3" mchideable="hideable_3">
<td align="left" valign="middle" width="16">
<img src="http://gallery.mailchimp.com/27aac8a65e64c994c4416d6b8/images/sfs_icon_rss.1.png" style="margin: 0 !important;height: auto !important;line-height: 100%;outline: none;text-decoration: none;display: inline;margin-bottom: 10px !important;">
</td>
<td align="left" valign="top">
<div style="color: #ffffff;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;text-align: justify;"><a href="http://www.scandit.com/blog" target="_blank" style="color: #336699;font-weight: normal;text-decoration: none;">Read our blog</a> </div>
</td>
</tr>
<tr mc:hideable="hideable_4" mchideable="hideable_4">
<td align="left" valign="middle" width="16">
<img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/sfs_icon_forward.png" style="margin: 0 !important;height: auto !important;line-height: 100%;outline: none;text-decoration: none;display: inline;margin-bottom: 10px !important;">
</td>
<td align="left" valign="top">
<div style="color: #ffffff;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;text-align: justify;"><div style="text-align: left;color: #ffffff;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;">
<a href="*|FORWARD|*" style="color: #336699;font-weight: normal;text-decoration: none;">Sign up for our newsletter</a></div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // End Module: Social Block with Icons \\ -->
</td>
</tr>
</table>
</td>
<!-- // End Sidebar \\ -->
</tr>
<tr>
<td colspan="2" valign="middle" id="social" style="padding-top: 20px;padding-right: 20px;padding-bottom: 20px;padding-left: 20px;">
<div style="color: #545454;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;text-align: center;"><a href="" target="_blank" style="color: #336699;font-weight: normal;text-decoration: none;">follow on Twitter</a> | <a href="" target="_blank" style="color: #336699;font-weight: normal;text-decoration: none;">friend on Facebook</a> | <a href="http://www.scandit.com/blog/" target="_blank" style="color: #336699;font-weight: normal;text-decoration: none;">read our blog</a> | <a href="*|FORWARD|*" style="color: #336699;font-weight: normal;text-decoration: none;">forward to a friend</a> </div>
<center><em>SAMPLE TEXTSAMPLE <a href="" target="_blank" style="color: #336699;font-weight: normal;text-decoration: none;">SAMPLE TEXT</a>.</em></center>
</td>
</tr>
</table>
<!-- // End Template Body \\ -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- // Begin Template Footer \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="600" id="templateFooter" style="background-color: #36C0CC;border-top: 2px solid #111111;">
<tr>
<td valign="top" class="footerContent">
<!-- // Begin Module: Standard Footer \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td valign="top" width="350">
<div style="color: #CCCCCC;font-family: Verdana;font-size: 10px;line-height: 125%;text-align: left;">
<em>Copyright © *|CURRENT_YEAR|* *|LIST:COMPANY|*, All rights reserved.</em>
<br>
*|IFNOT:ARCHIVE_PAGE|*
*|LIST:DESCRIPTION|*
<br>
<strong>Our mailing address is:</strong>
<br>
*|HTML:LIST_ADDRESS_HTML|*
<br>
*|END:IF|*
</div>
</td>
<td valign="top" width="190" id="monkeyRewards">
<div style="color: #CCCCCC;font-family: Verdana;font-size: 10px;line-height: 125%;text-align: left;">
*|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|*
</div>
</td>
</tr>
<tr>
<td colspan="2" valign="middle" id="utility" style="background-color: #36C0CC;border: 0;">
<div style="color: #CCCCCC;font-family: Verdana;font-size: 10px;line-height: 125%;text-align: center;">
<a href="*|ARCHIVE|*" style="color: #4D4C4C;font-weight: normal;text-decoration: underline;">view email in browser</a>*|END:IF|*
</div>
</td>
</tr>
</table>
<!-- // End Module: Standard Footer \\ -->
</td>
</tr>
</table>
<!-- // End Template Footer \\ -->
</td>
</tr>
</table>
<br>
</td>
</tr>
</table>
</center>
</body>
</html>
</body>
</html>
804
It's best practice for emails to use table-based layouts and inline-styling. If you are using MailChimp's templating system to construct this email, the CSS styles you define will be made automatically in-line when it sends out. You should still, however use a table-based layout.
Example:
<table width="600" cellpadding="0" cellspacing="0">
<tr>
<td style="background: #36C0CC" colspan="2">Blue Section</td>
</tr>
<tr>
<td style="background: gray">Gray Section</td>
<td style="background: #accb50">Green Section</td>
</tr>
</table>
You could mimick it with an Outlook conditional tag. You simply sandwich the div you apply the max-width to. with it.
<!--[if mso]>
<center>
<table><tr><td width="580">
<![endif]-->
<div style="max-width:580px; margin:0 auto;">
<p>This text will be centered and constrained to 580 pixels even on Outlook which does not support max-width CSS</p>
</div>
<!--[if mso]>
</td></tr></table>
</center>
<![endif]-->
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
