I have spent all day reviewing fixes for my issue. My HTML looks great on all email clients except Outlook, by which the layout will not center in the preview. I've tried the <center> tag and fixing the .ExternalClass but nothing works. Can anyone help?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="telephone=no" name="format-detection">
<meta content="width=mobile-width; initial-scale=1.0; maximum-scale=1.0; user- scalable=no" name="viewport">
<meta content="IE=9; IE=8; IE=7; IE=EDGE" http-equiv="X-UA-Compatible">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css">
<title>IAED ACE WEBSITE</title>
<style href="">a {text-decoration: none} </style>
<style type="text/css">
.mobile {
max-width:700px !important;
}
/**This is to overwrite Outlook.com’s Embedded CSS************/
table {
border-collapse:separate;
}
a, a:link, a:visited {
text-decoration: none; color: #2a8acc;
}
a:hover {
text-decoration: underline;
}
h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {
color:#000 !important;
}
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {
line-height: 100%;
}
/**This is to center your email in Outlook.com************/
.ExternalClass {
width: 100%;
}
#media only screen and (max-width: 480px) {
.mobile {width: 95% !important; font-size:1.1em; border-collapse: collapse; display:block; margin:0 auto; padding-bottom:15px;}
.hide {display:none;}
.btn_bg { width:50%; margin: 0 auto !important; font-size:1.0em; }
}
#media only screen and (max-width: 320px) {
.mobile {width: 95% !important; font-size:1.1em; border-collapse: collapse; display:block; margin:0 auto; padding-bottom:15px;}
.hide {display:none;}
.btn_bg { width:50%; margin: 0 auto !important; font-size:1.0em;}
}
#media only screen and (max-width: 667px) {
.mobile {width: 95% !important; font-size:1.1em; border-collaps: collapse; display:block; margin:0 auto; padding-bottom:15px;}
.hide {display:none;}
.btn_bg { width:50%; margin: 0 auto !important; font-size:1.0em;}
}
#media only screen and (max-width: 730px) {
.mobile {width: 95% !important; font-size:1.1em; border-collapse: collapse; display:block; margin:0 auto; padding-bottom:15px;}
.hide {display:none;}
.btn_bg { width:50%; margin: 0 auto !important; font-size:1.0em; }
}
</style>
</head>
<body bgcolor="#EFEFEF" style="margin: 0; padding: 0;">
<!-- SPACE-->
<table bgcolor="#EFEFEF" border="0" cellpadding="0" cellspacing="0" style=
"height:15px; background-color:#efefef; width:100%;" width="100%">
<tr>
<td>
</td>
</tr>
</table>
<!--end of space-->
<!-- HIDDEN PREHEADER -->
<div style=
"display: none; font-size: 1px; color:#333333; line-height: 1px; font-family: 'Lato', sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all;">
IAED ACE WEBSITE
</div>
<!--BEGIN OUTTER CONTAINTER-->
<table bgcolor="#EFEFEF" border="0" cellpadding="0" cellspacing="0" style=
"background-color:#efefef;" width="100%">
<tr>
<td>
<!--BEGIN NAV-->
<table align="center" bgcolor="#FFFFFF" border="0" cellpadding=
"0" cellspacing="0" style=
"background-color:#ffffff; width:700; margin:0 auto; border:thin solid #E8E8E8; color:#2a8acc;"
width="700">
<tr>
<td colspan="5" style="line-height:15px; height:15px;">
</td>
</tr>
<tr>
<td width="2%"> </td>
<td width="35%">
<a href="http://www.emergencydispatch.org/" style=
"color:#2a8acc; text-decoration:underline;" target=
"_blank"><img src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/iaed-logo-200w.png"></a>
</td>
<td align="left" valign="bottom" width="23%">
<span style=
"font-family: 'Lato', sans-serif; color:#2a8acc; text-align:left; font-size:18px;">
<a href="http://www.emergencydispatch.org/" style=
"color:#2a8acc; text-decoration:underline;" target=
"_blank">ABOUT IAED</a></span>
</td>
<td valign="bottom" width="20%"><span style=
"font-family: 'Lato', sans-serif; color:#2a8acc; text-align:left; font-size:18px;">
<a href="https://accreditation.emergencydispatch.org/"
style="color:#2a8acc; text-decoration:underline;"
target="_blank">WHY ACE</a></span>
</td>
<td valign="bottom" width="30%">
<!-- SOCIAL MEDIA -->
<table>
<tr>
<td width="30px">
<a href=
"https://www.facebook.com/InternationalAcademiesofEmergencyDispatch"
style=
"border:none; text-decoration:none;"
target="_blank"><img src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/facebook-logo-round.png"></a>
</td>
<td width="30px">
<a href="https://twitter.com/TheIAED"
style=
"border:none; text-decoration:none;"
target="_blank"><img src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/Twitter-round-color.png"></a>
</td>
<td width="30px">
<a href=
"https://www.linkedin.com/company/international-academies-of-emergency-dispatch"
style=
"border:none; text-decoration:none;"
target="_blank"><img src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/linkedin-round.png"></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="5" style="line-height:15px; height:15px;">
</td>
</tr>
</table>
<!--END NAV-->
<!--BEGIN BANNER -->
<table align="center" border="0" cellpadding="0" cellspacing=
"0" style="background-color:#ffffff; width:700; margin:0 auto;"
width="700px">
<tr>
<td>
<a href=
"https://accreditation.emergencydispatch.org/"
style="border:none;" target="_blank"><img class=
"mobile" src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/banner-iaed.png"></a>
</td>
</tr>
</table>
<!--END BANNER -->
<!-- BEGIN CONTENT -->
<table bgcolor="#FFFFFF" border="0" cellpadding="0"
cellspacing="0" style=
"background-color:#ffffff; width:700; margin:0 auto; border-bottom:thin solid #E8E8E8;"
width="700px">
<tr>
<td colspan="2" style="line-height:15px; height:15px;">
</td>
</tr>
<tr>
<td align="center" colspan="3"><span style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:24px; font-weight:800;">
FEATURES</span>
</td>
</tr>
<tr>
<td colspan="3" style=
"line-height:15px; height:15px; border-bottom:thin solid #E8E8E8;">
</td>
</tr>
<tr>
<td colspan="3" style="line-height:15px; height:15px;">
</td>
</tr>
<tr>
<td align="center" width="25%"><img src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/user-friendly.png">
</td>
<td width="70%">
<span style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:18px; font-weight:500;">
User-friendly</span>
<ul style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:14px;">
<li>Simple-to-use instructions for providing
information and uploading documents help you
complete the 20 Points requirements</li>
<li>Demo videos help guide you through various
facets of the application process</li>
</ul>
</td>
<td width="3%">
</td>
</tr>
<tr>
<td colspan="3" style="line-height:15px; height:15px;">
</td>
</tr>
<tr>
<td align="center" width="25%"><img src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/cloud-icon.png">
</td>
<td width="70%">
<span style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:18px; font-weight:500;">
Upload everything—no more binders!</span>
<ul style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:14px;">
<li>Our easy and convenient upload process means
you can electronically upload required application
documents to the IAED’s secure servers 24/7</li>
<li>No more shipping heavy binders</li>
</ul>
</td>
<td width="3%">
</td>
</tr>
<tr>
<td colspan="3" style="line-height:15px; height:15px;">
</td>
</tr>
<tr>
<td align="center" width="25%"><img src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/progress-icon.png">
</td>
<td width="70%">
<span style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:18px; font-weight:500;">
Progress bars</span>
<ul style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:14px;">
<li>You can track your ACE application progress for
each of the 20 Points achieving also your overall
progress and deadlines toward ACE</li>
<li>Uploading documents is made easy with a
progress bar that lets you know when your
upload is complete</li>
</ul>
</td>
<td width="3%">
</td>
</tr>
<tr>
<td colspan="3" style="line-height:15px; height:15px;">
</td>
</tr>
<tr>
<td align="center" width="25%"><img src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/sync-icon.png">
</td>
<td width="70%">
<span style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:18px; font-weight:500;">
Sync your information</span>
<ul style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:14px;">
<li>The online ACE application system automatically
synchronizes 20 Points application tasks completed
during your communication center’s implementation
process</li>
</ul>
</td>
<td width="3%">
</td>
</tr>
<tr>
<td colspan="3" style="line-height:15px; height:15px;">
</td>
</tr>
<tr>
<td align="center" width="25%"><img src=
"https://www.emergencydispatch.org/vrc/iaed/2016/email/images/credit-icon.png">
</td>
<td width="70%">
<span style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:18px; font-weight:500;">
Re-accreditation ready</span>
<ul style=
"font-family: 'Lato', sans-serif; color:#2e2e2e; text-align:left; font-size:14px;">
<li>You can refer to online documents previously
submitted by your agency for ACE or Re-ACE
requirements</li>
<li>Re-accreditation is a snap with the online
ACE application process</li>
</ul>
</td>
</tr>
<tr>
<td colspan="3" style="line-height:15px; height:15px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END OF OUTTER CONTAINTER -->
</body></html>
Have you tried using adding align="center" to the "outer container" <table /> and header <div />?
Related
I have been scouring the internet for around 2 days now and I can't find anything about an issue. I am facing with extra space on the LEFT and RIGHT side of images in Outlook desktop.
The extra space, affects the ability of my table/columns to be displayed side by side. If I shorten the width of any cell/row/table to the exact width of that space (circled in red in image) they suddenly pop in side by side. It is this particular little space I can't figure out how to remove. It is like there is a default value set somewhere on something I am unaware of.
Sorry about some images not being uploaded anywhere, these ones weren't really important.
2 How it appears in every other email client.
3 How it is appearing in outlook only.
* {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-spacing: 0px;
box-sizing: border-box;
}
#media only screen and (max-device-width: 480px) {
table[class=responsive] {
width: 330px !important;
}
}
#media only screen and (max-device-width: 480px) {
table[class=left] {
width: 330px !important;
}
}
#media only screen and (max-device-width: 480px) {
table[class=right] {
width: 330px !important;
}
}
#media only screen and (max-device-width: 480px) {
img {
width: 100% !important;
}
}
p {
padding: 10px 10px 10px 10px;
}
a {
color: #333333;
}
a:visited {
color: #000000;
}
<html>
<head>
<title></title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
</head>
<body style="font-family:'Trebuchet MS', Helvetica, Arial, sans-serif;">
<!-- CENTER TABLE -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table width="660" border="0" cellspacing="0" cellpadding="0" class="responsive">
<tr>
<td bgcolor="#FFFFFF"><img src="10324612_ptgray.jpg" align="left" style="vertical-align: top; display:inline-block;"></td>
</tr>
<tr>
<td bgcolor="#666666" height="50">
<p style="text-align: center; color: #FFFFFF; font-size: 24px; line-height: 24px;"><b>THE JULY ISSUE OF <em>PHYSICS TODAY</em> IS AVAILABLE</b><br></p>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr bgcolor="#EEEEEE">
<td>
<table class="left" width="220" border="0" cellspacing="0" cellpadding="0" align="left">
<tr border="0" cellspacing="0" cellpadding="0" align="left">
<td border="0" cellspacing="0" cellpadding="0" align="left"><img src="https://i.stack.imgur.com/BVa1S.png" width="220" border="0" cellspacing="0" cellpadding="0" align="left" style="vertical-align: top; display: block; max-width: 100%;"></td>
</tr>
</table>
<table class="right" width="440" border="0" cellspacing="0" align="right">
<tr>
<td>
<p style="color: #000000; font-size: 12px; line-height: 14px;">Advertisement</p>
<p style="color: #333333; font-size: 20px; line-height: 24px;">THERE'S NO ESCAPE: LEAK-TIGHT GAS PUMPS</p>
<p style="color: #000000; font-size: 13px; line-height: 18px;">KNF double-diaphragm, oil-free pumps are designed for transporting and evacuating costly, high purity, rare and/or dangerous gases. The back-up safety diaphragm ensures ultra-low leak rates of <6×10^-6 L/sec, while other safeguards
prevent contamination from external influences. Options available.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr>
<td style="border: 1px solid #CCCCCC;">
<a href="#">
<table class="left" width="438" border="0" cellspacing="0" align="left">
<tr>
<td valign="middle" height="287">
<p style="font-size: 50px; line-height: 50px; text-align: center; padding: 0px 0px 0px 0px;">View the November Issue Online</p>
</td>
</tr>
</table>
<table class="right" width="220" border="0" cellspacing="0" align="right">
<tr>
<td><img src="pt-cover.jpg" style="vertical-align: top; display: block;"></td>
</tr>
</table>
</a>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr bgcolor="#EEEEEE">
<td>
<table class="left" width="220" border="0" cellspacing="0" align="left">
<tr>
<td><img src="https://i.stack.imgur.com/BVa1S.png" width="220" height="220" style="vertical-align: top; display: block;"></td>
</tr>
</table>
<table class="right" width="440" border="0" cellspacing="0" align="right">
<tr>
<td>
<p style="color: #000000; font-size: 12px; line-height: 14px;">WHITEPAPER</p>
<p style="color: #C8544B; font-size: 20px; line-height: 24px;">THERE'S NO ESCAPE: LEAK-TIGHT GAS PUMPS</p>
<p style="color: #000000; font-size: 13px; line-height: 18px;">KNF double-diaphragm, oil-free pumps are designed for transporting and evacuating costly, high purity, rare and/or dangerous gases. The back-up safety diaphragm ensures ultra-low leak rates of <6×10^-6 L/sec, while other safeguards
prevent contamination from external influences. Options available.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr style="color: #000000; font-size: 12px; line-height: 14px; text-align: center;">
<td>
<tr>
<td>
<p style="border-left: 5px solid #C8544B; font-size: 24px">Restoring sight with retinal prostheses</p>
<p style="border-left: 5px solid #C8544B;">Author or Department</p>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr>
<td>
<p style="border-left: 5px solid #C8544B; font-size: 24px">Large amplitude oscillatory shear: Simple to describe, hard to interpret</p>
<p style="border-left: 5px solid #C8544B;">Author or Department</p>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr>
<td>
<p style="border-left: 5px solid #C8544B; font-size: 24px">Who owns a scientist's mind?</p>
<p style="border-left: 5px solid #C8544B;">Author or Department</p>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr>
<td>
<p style="border-left: 5px solid #C8544B; font-size: 24px">Magnets separate mirror-image molecules</p>
<p style="border-left: 5px solid #C8544B;">Author or Department</p>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr>
<td>
<p style="border-left: 5px solid #C8544B; font-size: 24px">Concerns about aging plutonium drive need for new weapon cores</p>
<p style="border-left: 5px solid #C8544B;">Author or Department</p>
</td>
</tr>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr bgcolor="#EEEEEE">
<td>
<table class="left" width="220" border="0" cellspacing="0" align="left">
<tr>
<td><img src="https://i.stack.imgur.com/BVa1S.png" width="220" style="vertical-align: top; display: block;"></td>
</tr>
</table>
<table class="right" width="440" border="0" cellspacing="0" align="right">
<tr>
<td>
<p style="color: #000000; font-size: 12px; line-height: 14px;">Advertisement</p>
<p style="color: #333333; font-size: 20px; line-height: 24px;">THERE'S NO ESCAPE: LEAK-TIGHT GAS PUMPS</p>
<p style="color: #000000; font-size: 13px; line-height: 18px;">KNF double-diaphragm, oil-free pumps are designed for transporting and evacuating costly, high purity, rare and/or dangerous gases. The back-up safety diaphragm ensures ultra-low leak rates of <6×10^-6 L/sec, while other safeguards
prevent contamination from external influences. Options available.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr bgcolor="#EEEEEE" style="color: #000000; font-size: 12px; line-height: 14px; text-align: center;">
<td>
<p><strong>Help desk information:</strong><br><br>If you need technical assistance, please do not reply to this automated email; click here.</p>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr bgcolor="#EEEEEE" style="color: #000000; font-size: 12px; line-height: 14px; text-align: center;">
<td>
<p>This email has been sent to %%email%%. In case you are not able to click on the links above, please go to: http://physicstoday.advanced-pub.com</p>
<p>Physics Today is published by the American Institute of Physics, One Physics Ellipse, College Park, MD. 20740. Send publication questions to pteditors#aip.org. The information contained in this e-mail
message is intended only for the personal use of the recipient(s). For Information on American Institute of Physics' Privacy Policy please click here. We appreciate your interest in our publication and encourage you to contact us with
your comments or suggestions. Thank you!</p>
<p>To unsubscribe, please click here.</p>
</td>
</tr>
</table>
<!-- CENTER TABLE -->
</td>
</tr>
</table>
</body>
</html>
According to my test and search, it not img's reason, might be table.
You could refer to the below code:
<table cellpadding="0" cellspacing="0" height="40" width="238" border="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:238px; color: #ffffff; width:238px;height: 40px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #f2f2f2;">
<tbody>
<tr>
<td height="40" width="22" align="left">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
<a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank">
<img height="40" src="ctaleftgrey.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" />
</a>
</p>
</td>
<td height="40" width="180" align="left">
<table border="0" cellpadding="0" cellspacing="0" height="40" width="180" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt; " valign="middle">
<tbody>
<tr>
<td height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
Text goes here
</p>
</td>
</tr>
</tbody>
</table>
</td>
<td height="40" width="36" align="left">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
<a href="#" target="_blank">
<img height="40" src="ctarightgrey.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" />
</a>
</p>
</td>
</tr>
</tbody>
</body>
For more information, please refer to this link:
Outlook table spacing in HTML email - no usual tricks working
Table style border- outlook 2010 adds an extra space
I have a problem with my email signature. It gets messed up when replying in Outlook.
What is happening: When I send an email with the signature from Outlook 2016 (on Mac) to Outlook 2007 (on Windows) it looks good. When replying to that email it still looks good. When replying to that email the signature gets messed up. Screenshot: enter image description here
My code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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, initial-scale=1.0"/>
<title></title>
<style type="text/css">
/* Client-specific Styles */
#outlook a {
padding: 0;
} /* Force Outlook to provide a "view in browser" menu link. */
body {
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
.ExternalClass {
width: 100%;
} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%;
} /* Force Hotmail to display normal line spacing. */
#backgroundTable {
margin: 0;
padding: 0;
width: 100% !important;
line-height: 100% !important;
}
img {
outline: none;
text-decoration: none;
border: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
.image_fix {
display: block;
}
p {
margin: 0px 0px !important;
}
table td {
border-collapse: collapse;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/*##############################################*/
/*IPHONE STYLES*/
/*##############################################*/
#media only screen and (max-width: 480px) {
table {
position: relative;
}
table[class="fluid-table"], td[class="fluid-cell"]{
width: 100% !important;
}
}
</style>
</head>
<body>
<div class="block">
<!-- Start of name, function title and logo -->
<table border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr>
<td style="display:block; border:none; outline:none; text-decoration:none; color:#000; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<span style="text-align: left; color: #9C1C27;font-size: 15px; font-weight: bold">Voornaam en Achternaam</span><br/>
<span style="text-align: left; color: #B5987F; font-weight: normal; font-style:italic; font-size: 14px;">Functie titel</span><br/>
</td>
</tr>
<tr>
<td>
<img src="http://www.deleeuwhides.com/img/logo.png" nosend="1" border="0" style="width:179px; height:111px; padding: 10px 0 5px 0;" alt="De Leeuw Hides logo" title="De Leeuw Hides logo" />
</td>
</tr>
</tbody>
</table>
<!-- End of name, function and logo -->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td><table cellpadding="0" cellspacing="0" border="0" width="600" class="fluid-table">
<tr>
<!-- Start of first column -->
<td><table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr>
<td width="175" style=" border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<strong style="color:#9C1C27;">Location Nijmegen</strong><br/>
Lindenhoutseweg 69<br/>
6545 AH Nijmegen <br/>
The Netherlands
</td>
</tr>
</tbody>
</table>
<!-- End of first column -->
<!-- Start of second column -->
<table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr>
<td width="175" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<strong style="color:#9C1C27;">Location Winterswijk</strong><br/>
Industrieweg 2a<br/>
7102 DZ Winterswijk<br/>
The Netherlands
</td>
</tr>
</tbody>
</table>
<!-- End of second column -->
<!-- Start of third column -->
<table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr>
<td width="175" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
T:0031-024-3775233 <br/>
<span style="text-decoration:none">F: 0031-024-3779316</span> <br/>
<a style="text-decoration:none; color:#9C1C27;" href="mailto:sales#deleeuwhides.nl"><span style="text-decoration:none; color:#9C1C27;">sales#deleeuwhides.nl</span></a><br/>
<a style="text-decoration:none; color:#9C1C27;" href="http://www.deleeuwhides.com"><span style="text-decoration:none; color:#9C1C27;">www.deleeuwhides.com</span></a>
</td>
</tr>
</tbody>
</table>
<!-- End of third column -->
</td>
</tr>
</table>
<!-- Start of branding identity elements -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="fluid-table">
<tr>
<td style="height:3px; width:100%; background-color:#B5987F;">
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%"class="fluid-table">
<tr>
<td style="height:2px; width:100%; background-color:#fff;">
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="fluid-table">
<tr>
<td valign="middle" style="height:30px; width:100%; background-color:#9C1C27;"><center><img style="display:block;" src="http://www.deleeuwhides.com/img/slogan-footer.png" alt="slogan"></center>
</td>
</tr>
</table>
<!-- End of branding identity elements-->
</td>
</tr>
</table>
</div>
</body>
</html>
Why is this happening and how can I fix this?
I sent your message to me from http://putsmail.com to my Outlook address, replied to my gmail and then replied back to my Outlook and got this:
When I replied back to gmail, it looked fine.
My suggestion is to add valign="top" to your tr and td cells in the table in question. This will force the table cells to align.
`
<!-- Start of first column -->
<td valign="top">
<table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr valign="top">
<td valign="top" width="175" style=" border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<strong style="color:#9C1C27;">Location Nijmegen</strong><br/>
Lindenhoutseweg 69<br/>
6545 AH Nijmegen <br/>
The Netherlands
</td>
</tr>
</tbody>
</table>
<!-- End of first column -->
<!-- Start of second column -->
<table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr valign="top">
<td valign="top" width="175" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
<strong style="color:#9C1C27;">Location Winterswijk</strong><br/>
Industrieweg 2a<br/>
7102 DZ Winterswijk<br/>
The Netherlands
</td>
</tr>
</tbody>
</table>
<!-- End of second column -->
<!-- Start of third column -->
<table width="175" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">
<tbody>
<tr valign="top">
<td valign="top" width="175" style="border:none; text-decoration:none; color:#B5987F; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;" border="0">
T:0031-024-3775233 <br/>
<span style="text-decoration:none">F: 0031-024-3779316</span> <br/>
<a style="text-decoration:none; color:#9C1C27;" href="mailto:sales#deleeuwhides.nl"><span style="text-decoration:none; color:#9C1C27;">sales#deleeuwhides.nl</span></a><br/>
<a style="text-decoration:none; color:#9C1C27;" href="http://www.deleeuwhides.com"><span style="text-decoration:none; color:#9C1C27;">www.deleeuwhides.com</span></a>
</td>
</tr>
</tbody>
</table>
<!-- End of third column -->
</td>
</tr>
</table>
<!-- Start of branding identity elements -->
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="fluid-table">
<tr>
<td style="height:3px; width:100%; background-color:#B5987F;">
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%"class="fluid-table">
<tr>
<td style="height:2px; width:100%; background-color:#fff;">
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="fluid-table">
<tr>
<td valign="middle" style="height:30px; width:100%; background-color:#9C1C27;"><center><img style="display:block;" src="http://www.deleeuwhides.com/img/slogan-footer.png" alt="slogan"></center>
</td>
</tr>
</table>
<!-- End of branding identity elements-->
</td>
</tr>
`
Solved it! I first removed all align attributes which helped to put the columns next to each other. I then removed all the tables and made one "wrapper" table with a table nested in to this wrapper table which contains everything. Hope I'm describing this clearly, lol. Anyway this solved all my problems!
This is my code for anyone who is interested or has the same problems I did:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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, initial-scale=1.0"/>
<title></title>
<style type="text/css">
/* Client-specific Styles */
#outlook a {
padding: 0;
} /* Force Outlook to provide a "view in browser" menu link. */
body {
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
.ExternalClass {
width: 100%;
} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%;
} /* Force Hotmail to display normal line spacing. */
#backgroundTable {
margin: 0;
padding: 0;
width: 100% !important;
line-height: 100% !important;
}
img {
outline: none;
text-decoration: none;
border: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
.image_fix {
display: block;
}
p {
margin: 0px 0px !important;
}
table td{
border-collapse: collapse;
border-spacing:0;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/*##############################################*/
/*IPHONE STYLES*/
/*##############################################*/
#media only screen and (max-width: 480px) {
table {
position: relative;
}
table[class="fluid-table"], td[class="fluid-cell"]{
width: 100% !important;
}
}
</style>
</head>
<body>
<div class="block">
<!-- Start of wrapper table -->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="600" class="fluid-table">
<!-- Start of name, function title and logo -->
<tr>
<td style="padding-bottom:3px; outline:none; text-decoration:none; color:#000; font-size:14px; text-align:left; font-family: Open Sans, Arial, Verdana, sans-serif;">
<strong style="color: #9C1C27;font-size: 15px;">Voornaam en Achternaam</strong><br/>
<em style="color: #B5987F; font-weight: normal; font-size: 14px;">Functie titel</em><br/>
</td>
</tr>
<tr>
<td style="padding-bottom:5px;">
<img src="http://www.deleeuwhides.com/img/logo.png" nosend="1" border="0" style="display:block; width:179px; height:111px;" alt="De Leeuw Hides logo" title="De Leeuw Hides logo" />
</td>
</tr>
<!-- End of name, function and logo -->
<!-- Contact info and Start of first column -->
<tr>
<td width="200" style="padding-bottom:3px; text-decoration:none; color:#B5987F; font-size:14px; font-family: Open Sans, Arial, Verdana, sans-serif;">
<strong style="color:#9C1C27;">Location Nijmegen</strong><br/>
Lindenhoutseweg 69<br/>
6545 AH Nijmegen <br/>
The Netherlands
</td>
<!-- End of first column -->
<!-- Start of second column -->
<td width="200" style="padding-bottom:3px; text-decoration:none; color:#B5987F; font-size:14px; font-family: Open Sans, Arial, Verdana, sans-serif;">
<strong style="color:#9C1C27;">Location Winterswijk</strong><br/>
Industrieweg 2a<br/>
7102 DZ Winterswijk<br/>
The Netherlands
</td>
<!-- End of second column -->
<!-- Start of third column -->
<td width="200" style="padding-bottom:3px; text-decoration:none; color:#B5987F; font-size:14px; font-family: Open Sans, Arial, Verdana, sans-serif;">
T:0031-024-3775233 <br/>
<span style="text-decoration:none">F: 0031-024-3779316</span> <br/>
<a style="text-decoration:none; color:#9C1C27;" href="mailto:sales#deleeuwhides.nl"><span style="text-decoration:none; color:#9C1C27;">sales#deleeuwhides.nl</span></a><br/>
<a style="text-decoration:none; color:#9C1C27;" href="http://www.deleeuwhides.com"><span style="text-decoration:none; color:#9C1C27;">www.deleeuwhides.com</span></a>
</td>
</tr>
</table>
<!-- End of third column and contact info -->
<!-- Start of branding identity elements -->
<tr>
<td bgcolor="#B5987F" style="height:3px; width:100%;"></td>
</tr>
<tr>
<td bgcolor="#ffffff" style="height:3px; width:100%;"></td>
</tr>
<tr>
<td valign="middle" bgcolor="#9C1C27" style="height:30px; width:100%;">
<center>
<img style="display:block;"src="http://www.deleeuwhides.com/img/slogan-footer.png" alt="slogan" />
</center>
</td>
</tr>
<!-- End of branding identity elements -->
</td>
</tr>
</table>
<!-- end of wrapper table -->
</div>
</body>
</html>
Welll, as they say: "Email is hard".
In general, it is a good practice to inline the CSS styles when doing stuff for emails. I use this tool from Litmus, and they also have a pretty good article about the pitfalls of developing HTML content that looks good for emails (gmail specifically).
I'm having trouble getting an email blast to hide and display the h2 and ul tags. It works just fine in outlook and in most browser but on the iphone the display:block attribute is not respected. I also tried wrapping the content in a div tag and the attributes were ignored. Any ideas?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WalkGreen™ Capabilities</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
#media (max-width: 767px) {
h2[class=hidden-xs], ul[class=hidden-xs] {
display: none !important;
}
}
/* Media Query for mobile */
#media screen and (max-width: 480px) {
h2[class=visible-xs], ul[class=visible-xs] {
display: block !important;
}
p[class=align-center]{text-align:left !important;}
/* This resizes tables and images to be 100% wide with a proportionate width */
table[class=emailwrap], img[class=emailwrap]{width:100% !important; height:auto !important;}
h2[class=mobile-pad]{padding-left:8px !important; padding-right:8px !important;}
img[class=logo-sm]{width:35%;}
img[class=img-mob]{width:90% !important; height:auto !important;}
img[class=mbl-icon]{width: 32px !important; height:32px !important;}
td[class=mbl-pad-1]{padding-left:16px !important; padding-right:16px !important;}
td[class=mbl-pad-2]{padding-left:16px !important; padding-right:16px !important; text-align:left !important;}
td[class=mbl-pad-3]{padding-top:16px;}
td[class=border-off]{border-bottom:0 !important;}
a[class=mbl-button]{webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding-top:10px !important; padding-right:10px !important; padding-bottom:10px !important; padding-left: 10px !important; font-size:18px !important;}
/* Hide stuff on mobiles */
table[class=emailnomob],td[class=emailnomob],img[class=emailnomob],span[class=emailnomob]{display:none !important;}
td[class=emailcolsplit]{width:100%!important; float:left!important;}
a[class=emailmobbutton]{display:block !important;font-size:14px !important; font-weight:bold !important; padding:6px 4px 8px 4px !important; line-height:18px !important; background:#dddddd !important; border-radius:5px !important; margin:10px auto;width:70%; text-align:center; color:#111 !important; text-decoration:none; text-shadow:#fff 1px 0 0 ;}
/* This resizes body text for mobiles */
ul[class=emailbodytext],span[class=emailbodytext],a[class=emailbodytext] ,p[class=emailbodytext]{font-size:16px !important; line-height:21px !important;padding-right:16px !important;}
h2[class=emailh2],span[class=emailh2],a[class=emailh2]{font-size:22px !important; line-height:26px !important;}
td[class="mbl-header"]{padding-right:8px !important; padding-left:8px !important;}
}
</style>
</head>
<body style="background-color:#FFF;">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<!-- top disclaimer -->
<table class="emailnomob" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:10px; text-align:center; padding-top:8px; padding-right:8px; padding-bottom:8px; padding-left:8px; color:#999">
<span>TROUBLE SEEING SOMETHING? </span><a style="color:#999;" href="#">VIEW IT ONLINE</a> OR <a style="color:#999;" href="*|UNSUB|*">UNSUBSCRIBE</a>
</td>
</tr>
</table>
<!-- content begins -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td>
<!-- top banner -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td>
<img class="emailwrap" src="images/top-banner2.gif" alt="Exotic Hardwood Decking, Rainscreen and Fencing" />
</td>
</tr>
</table>
<!-- 3 column content -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td class="emailcolsplit" width="200" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="mbl-pad-3">
<img src="images/products.gif" alt="Products" />
<h2 class="emailh2" style="font-size:18px; font-family: Arial, sans-serif;">Decking</h2>
<ul class="emailbodytext" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">
<li>Angelyn <br/> (1” x 5.5”) (7/8” x 5.5”)<br/> </li>
<li>Cumaru <br/> (1” x 5.5”) (1” x 3.5”) (7/8” x 5.5”)<br/> </li>
<li>Espresso Garapa <br/> (7/8” x 5.5”)<br/> </li>
<li>Gold Garapa <br/> (1” x 5.5”) (7/8” x 5.5”)<br/> </li>
<li>Tigerwood <br/> (1” x 3.5”)<br/> </li>
</ul>
<h2 class="visible-xs" style="font-size:18px; font-family: Arial, sans-serif; display:none;"><span class="emailh2">Rainscreen & Siding</span></h2>
<ul class="visible-xs" style="font-family:Arial, sans-serif; color:#000; font-size:14px; display:none;">
<li class="emailbodytext">Profiling for any hidden siding fastener system</li>
</ul>
<h2 class="visible-xs" style="font-size:18px; font-family: Arial, sans-serif; display:none;"><span class="emailh2">Fencing</span></h2>
<ul class="visible-xs" style="font-family:Arial, sans-serif; color:#000; font-size:14px; display:none">
<li class="emailbodytext">Fence Boards</li>
</ul>
</td>
</tr>
</table>
</td>
<td class="emailcolsplit" width="200" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="images/milling.gif" alt="Milling" />
<h2 class="emailh2" style="font-size:18px; font-family: Arial, sans-serif;">Custom Milling</h2>
<ul class="emailbodytext" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">
<li>Tongue & Groove</li>
<li>Siding Profiles</li>
<li>Edge Grooving for hidden fastening systems</li>
<li>Anti skid decking</li>
</ul>
</td>
</tr>
</table>
</td>
<td class="emailcolsplit" width="200" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="images/delivery.gif" alt="Delivery" />
<h2 class="emailh2" style="font-size:18px; font-family: Arial, sans-serif;">Options</h2>
<ul class="emailbodytext" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">
<li>Large Volumes</li>
<li>LTL</li>
<li>Full Container or Trucks</li>
<li>Contractor Packs</li>
<li>Special Orders</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- 2 column content -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td class="emailcolsplit" width="200" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<h2 class="hidden-xs" style="font-size:18px; font-family: Arial, sans-serif;">Rainscreen & Siding</h2>
<ul class="hidden-xs" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">
<li>Profiling for any hidden siding fastener system</li>
</ul>
</td>
</tr>
</table>
</td>
<td class="emailcolsplit" width="200" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<h2 class="hidden-xs" style="font-size:18px; font-family: Arial, sans-serif;">Fencing</h2>
<ul class="hidden-xs" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">
<li>Fence Boards</li>
</ul>
</td>
</tr>
</table>
</td>
<td class="emailcolsplit" width="200" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><p class="align-center" style="text-align:right; margin-top:0; margin-bottom:0;"><img src="images/logos.gif" alt="US Greenbuilding Council, Rainforest Alliance, FSC Certificate" /></p></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- species heading -->
<table style="background-color:#4982a5;" cellpadding="0" cellspacing="0" width="100%" align="center" >
<tr>
<td align="center">
<img src="images/species.gif" alt="Species" />
</td>
</tr>
</table>
<!-- species thumbnails -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td style="padding-bottom:15px; padding-top:15px;" class="emailcolsplit" width="120" valign="top" align="center">
<table cellpadding="0" cellspacing="0" align="center" width="100%">
<img class="emailwrap" src="images/angelyn.jpg "width="110" height="119" alt="Angelyn" />
<h2 class="emailh2" style="font-size:12px; font-family: Arial, sans-serif; text-align:center;">Angelyn</h2>
</table>
</td>
<td style="padding-bottom:15px; padding-top:15px;" class="emailcolsplit" width="120" valign="top" align="center">
<table cellpadding="0" cellspacing="0" align="center" width="100%">
<img class="emailwrap" src="images/cumaru.jpg "width="110" height="119" alt="Cumaru" />
<h2 class="emailh2" style="font-size:12px; font-family: Arial, sans-serif; text-align:center;">Cumaru</h2>
</table>
</td>
<td style="padding-bottom:15px; padding-top:15px;" class="emailcolsplit" width="120" valign="top" align="center">
<table cellpadding="0" cellspacing="0" align="center" width="100%">
<img class="emailwrap" src="images/garapa.jpg "width="110" height="119" alt="Gold Garapa" />
<h2 class="emailh2" style="font-size:12px; font-family: Arial, sans-serif; text-align:center;">Gold Garapa</h2>
</table>
</td>
<td style="padding-bottom:15px; padding-top:15px;" class="emailcolsplit" width="120" valign="top" align="center">
<table cellpadding="0" cellspacing="0" align="center" width="100%">
<img class="emailwrap" src="images/espresso-garapa.jpg "width="110" height="119" alt="Espresso Garapa" />
<h2 class="emailh2" style="font-size:12px; font-family: Arial, sans-serif; text-align:center;">Espresso Garapa</h2>
</table>
</td>
<td style="padding-bottom:15px; padding-top:15px;" class="emailcolsplit" width="120" valign="top" align="center">
<table cellpadding="0" cellspacing="0" align="center" width="100%">
<img class="emailwrap" src="images/tigerwood.jpg "width="110" height="119" alt="Tigerwood" />
<h2 class="emailh2" style="font-size:12px; font-family: Arial, sans-serif; text-align:center;">Tigerwood</h2>
</table>
</td>
</tr>
</table>
<!-- species content -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td>
<h2 class="emailh2" style="font-size:18px; font-family: Arial, sans-serif;">We Have Over 500,000 Lineal Ft. of stock on the ground at all times, ready for prompt shipment! </h2>
<p class="emailbodytext" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">WalkGreen™ maintains a philosophy of stewardship, product quality and client satisfaction by preserving forest ecology and forest-dependent communities while supporting responsible and legal forestry. WalkGreen™ remains competitively priced by holding the largest inventory of FSC® Exotic Hardwood Decking and Rainscreen in North America. </p>
<h2 class="emailh2"style="font-size:18px; font-family: Arial, sans-serif;">General Wood Specifications</h2>
<p class="emailbodytext" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">All wood is Export A grade, three side clear with minor defect down side. Kiln Dried to 12-15% moisture content. S4S E4E unless milled to specification. Random length 7-18 ft, odds and evens. 100% FSC® Certified</p>
</td>
</tr>
</table>
<!-- contact info -->
<table class="emailwrap" style="background-color:#fff; border-bottom: solid 1px #ccc;" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td class="emailcolsplit" width="475" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding-top:12px; padding-bottom:12px;">
<h2 class="emailh2" style="font-size:15px; font-family: Arial, sans-serif; margin-top:0; margin-bottom:0;">Text</h2>
</td>
</tr>
</table>
</td>
<td class="emailcolsplit" width="125" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding-top:12px; padding-bottom:12px;">
<a style="margin-top:0; margin-bottom:0;" href="#"> <img src="images/facebook.gif" alt="Like us on Facebook" /></a>
<a style="margin-top:0; margin-bottom:0;" href="#"> <img src="images/web-graphic.gif" alt="WalkGreen Products Website" /></a>
<a style="margin-top:0; margin-bottom:0;" href="#"><img src="images/mail.gif" alt="Contact Us" /></a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- footer -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td class="emailcolsplit" width="250" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding-top:20px; padding-bottom:20px; padding-right:20px;">
<img src="images/walkgreen.gif" alt="WalkGreen Products" />
</td>
</tr>
</table>
</td>
<td class="emailcolsplit" width="350" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding-top:20px; padding-bottom:20px;">
<p style="font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#999;">IF YOU NO LONGER WISH TO RECEIVE EMAILS PLEASE <a style="color:#999;" href="*|UNSUB|*">UNSUBSCRIBE</a><br/>
© 2015 WALKGREEN™ PRODUCTS, ALL RIGHTS RESERVED</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Bad Media Queries
You have bad queries. i.e. an iphone6 plus is max-device-width : 736px, therefore not satisfying the latter query! See media-queries-for-standard-devices.
If you wish to fix this issue, you must first define what size is xs. It's not enough just to say ALL mobile phones, as some mobile phones have VERY big screen and look like tablets! Iphone 6 Plus is a prime example of a big phone.
If I understand this correctly:
hidden-xs should hide the h2 only for below a certain screen width and visible for the rest
visible-xs should show the h2 only for below a certain screen width and hidden for the rest
e.g. If you define xs as a screen width <= 767px then your CSS should be:
#media screen and (max-width: 767px) {
/* styles for screen width <= 767px */
h2[class=hidden-xs], ul[class=hidden-xs] {
display: none;
}
h2[class=visible-xs], ul[class=visible-xs] {
display: block;
}
}
#media screen and (min-width: 768px) {
/* screen width >= 768px */
h2[class=hidden-xs], ul[class=hidden-xs] {
display: block;
}
h2[class=visible-xs], ul[class=visible-xs] {
display: none;
}
}
or simplified to (mobile-first approach):
h2[class=hidden-xs], ul[class=hidden-xs] {
display: none;
}
h2[class=visible-xs], ul[class=visible-xs] {
display: block;
}
#media screen and (min-width: 768px) {
/* styles for screen width >= 768px */
h2[class=hidden-xs], ul[class=hidden-xs] {
display: block;
}
h2[class=visible-xs], ul[class=visible-xs] {
display: none;
}
}
or desktop first approach
h2[class=hidden-xs], ul[class=hidden-xs] {
display: block;
}
h2[class=visible-xs], ul[class=visible-xs] {
display: none;
}
#media screen and (max-width: 767px) {
/* styles for screen width <= 767px */
h2[class=hidden-xs], ul[class=hidden-xs] {
display: none;
}
h2[class=visible-xs], ul[class=visible-xs] {
display: block;
}
}
Note: the !important is likely unnecessary
You could try creating a class to hide elements that will not show on a phone
#media only screen and (min-width: 320px) and (max-width: 768px){
.hide_phone{display: none;}
}
I'm designing an email campaign template for a client and running into an issue. Trying to set my mobile styles to font-size:100% important!; but there seems to be a sizing issue here. The only things affected are #requiredFooterText td, leadline td, #full td, and #paragraphText. It simply doesn't resize for mobile and I need it to 14px. Picture 1 is what I have and Picture 2 is what I want.
Picture 1 -
Picture 2 -
I've tried to force the the font-size out of percentages as well to 24 px instead of 14px. However, it cuts out mobile hero and footer image in the process.
Hopefully I've explained myself well enough. Code is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style data="noinline">
.appleLink a,
.appleLink {
color:#777777 !important;
text-decoration:none !important;
}
.appleLinkGray a,
.appleLinkGray {
color:#777777 !important;
text-decoration:none !important;
}
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}
.aBn {
border-bottom: 0;
}
div #mainWrapper {width:100% !important;
table-layout:fixed !important;
}
body {
margin:0; !important
padding:0; !important
}
/* MOBILE STYLES */
#media only screen and (max-device-width: 480px) {
body[yahoo=yes] {
margin: 0 !important;
padding: 0 !important;
}
table[class=mobileHide],
td[class=mobileHide],
span[class=mobileHide] {
display: none !important;
}
div[class=mobileShow] {
display: block !important;
max-height: none !important;
}
table[class=mobileShow] {
display: table !important;
max-height: none !important;
}
a[class=mobileShow] {
display: inline !important;
max-height: none !important;
}
img[class=mobileShow] {
display: block !important;
max-height: none !important;
}
table[id=mainWrapper],
table[id=main],
table[id=headerWrapper],
table[id=leadlineWrapper],
table[id=heroMobile],
table[id=messageWrapper],
table[id=footerMobile]
div[id=logo] {
margin:0 auto !important;
width:100% !important;
}
table[id=heroMobile] img
table[id=footerMobile] img {
display: block !important;
height:auto !important;
width:100% !important;
}
td[id=requiredFooterText]
td[id=leadline]
div[id=paragraphText] {
font-size:100% !important;
}
td[id=full] {
display:block;
width:100%;
font-size:100% !important;
}
img[class=icon] {
width:180px;
height:160px;
margin-bottom:20px;
}
}
/* end MOBILE STYLES*/
</style>
<style>
/* DESKTOP STYLES */
.appleLink a,
.appleLink {
color:#555555 !important;
text-decoration:none !important;
}
.appleLinkGray a,
.appleLinkGray {
color:#555555 !important;
text-decoration:none !important;
}
.mobileShow,
.mobileShow img {
display: none !important;
max-height: 0;
}
img {
display:block;
border:0;
}
p {
margin:0;
padding:0;
display:inline;
}
table {
margin: 0 auto;
}
table td {
border-collapse:collapse;
}
#paragraphText {
color: #000000;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
}
#mainWrapper {
background: #dadada;
}
#main {
background: #ffffff;
}
#leadlineWrapper {
background: #333333;
}
#leadline {
color: #ffffff;
font-family: Arial, sans-serif;
font-size: 12px;
line-height: 1.25;
padding-bottom: 14px;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
}
#messageBody {
padding:20px;
}
#messageBody a {
color: #d46128;
}
#bulletlist td {
vertical-align:top;
color: #000000;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
}
#logo {
background-color:#333333;
margin: 0 auto;
width:600px;
padding-top:20px;
padding-bottom:20px;
}
#requiredFooterText {
color: #555555;
font-family: Arial, sans-serif;
font-size: 10px;
line-height: 1.25;
padding-top: 30px;
text-align: center;
margin:0;
}
/* end DESKTOP STYLES*/
</style>
</head>
<body yahoo="yes" style="-webkit-text-size-adjust:none; margin: 0; padding:0;" bgcolor="#dadada">
<table id="mainWrapper" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td>
<table id="headerWrapper" width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table id="leadlineWrapper" width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td class="ec_item" id="leadline">Get a premier education on Florida's Gulf Coast.</td>
</tr>
</table><!-- /#leadlineWrapper -->
</td>
</tr>
</table><!-- /#headerWrapper -->
<table id="main" width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<tbody>
<tr>
<td class="ec_item" id="heroWrapper">
<table class="mobileHide" id="heroDesktop" width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="text-transform: none;">
<a href="cta" target="_blank">
<img src="" width="600" height="419" border="0" style="color: #262626; font-family: Arial, sans-serif; font-size: 14px;" alt="Confirm Your Info »" />
</a>
</td>
</tr>
</table>
<!-- /#heroDesktop -->
<div class="mobileShow">
<table class="mobileShow" id="heroMobile" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="text-transform: none;">
<a class="mobileShow" href="cta" target="_blank">
<img class="mobileShow" src="" width="320" height="226" border="0" style="color: #333333; font-family: Arial, sans-serif; font-size: 14px;" alt="Confirm Your Info »" />
</a>
</td>
</tr>
</table><!-- /#heroMobile -->
</div>
</td>
</tr><!-- /hero -->
<tr>
<td id="messageContainer">
<table id="messageWrapper" width="590" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td style="text-transform: none;" id="messageBody">
<div class="ec_item" id="paragraphText">
<div width="100%" height="15"><img src="" /></div>
{First_name},<br /><br />
When you step onto the <strong>Blank</strong> campus, you know you've arrived somewhere special. In fact, we're one of only 40 schools featured in the book <em>Colleges That Change Lives</em>.
<div width="100%" height="15"><img src="" /></div>
<div width="100%" height="15"><img src="" /></div>
</div>
<table dir="rtl" id="bulletlist" width="100%">
<tr>
<td width="98%" dir="ltr" id="full" class="ec_item">
<p><strong>188 acres of waterfront campus</strong> give you unlimited access to the living laboratory of the Gulf of Mexico. We offer an exhilarating academic experience and constantly strive toward inspiring you to THINK<strong>OUT</strong>SIDE.</p>
</td>
<td width="1%" id="full"><img src="" /></td>
<td width="1%" dir="ltr" id="full" class="ec_item">
<p><img src="" width="90" height="80" style="margin:0 auto;" class="icon" /></p>
</td>
</tr><!-- /bullet1 -->
<tr>
<td width="100%" height="15"></td>
</tr><!-- /spacing -->
<tr>
<td width="98%" dir="ltr" id="full" class="ec_item">
<p><strong>40 majors and 45 minors</strong> allow you to pursue a range of interests. You can even self-design your own major.</p>
</td>
<td width="1%" id="full"><img src="" /></td>
<td width="1%" dir="ltr" id="full" class="ec_item">
<p><img src="" width="90" height="80" style="margin:0 auto;" class="icon" /></p>
</td>
</tr><!-- /bullet2 -->
<tr>
<td width="100%" height="15"></td>
</tr><!-- /spacing -->
<tr>
<td width="98%" dir="ltr" id="full" class="ec_item">
<p><strong>96 percent of students</strong> receive some sort of financial aid, and individual merit scholarships of up to $19,000 are available.</p>
</td>
<td width="1%" dir="ltr" id="full"><img src="" /></td>
<td width="1%" dir="ltr" id="full" class="ec_item">
<p><img src="" width="90" height="80" style="margin:0 auto;" class="icon" /></p>
</td>
</tr><!-- /bullet3 -->
<tr>
<td width="100%" height="15" class="ec_item"></td>
</tr><!-- /spacing -->
<tr>
<td width="98%" dir="ltr" id="full" class="ec_item">
<p><strong>Autumn Term</strong> is an immersive three-week experience led by an expert faculty mentor. Opening with the Ceremony of Lights, your first academic course is a special opportunity to transition to college-level learning while becoming a strong member of the community.</p>
</td>
<td width="1%" id="full" class="ec_item"><img src="" /></td>
<td width="1%" dir="ltr" class="ec_item" id="full">
<p><img src="" width="90" height="80" style="margin:0 auto;" class="icon" /></p>
</td>
</tr><!-- /bullet4 -->
</table>
<div class="ec_item" id="paragraphText">
<div width="100%" height="15"><img src="" /></div>
<div width="100%" height="15"><img src="" /></div>
<strong><u>Confirm your information</u></strong> to find out more ways encourages you to THINK<strong>OUT</strong>SIDE.
</div>
<div width="100%" height="15"><img src="" /></div>
</td><!-- /#messageBody -->
</tr>
</table><!-- /#messageWrapper -->
</td>
</tr>
<tr>
<td class="ec_item" id="footerContainer">
<table class="mobileHide" id="footerDesktop" width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="text-transform: none;">
<a href="cta" target="_blank">
<img src="" width="600" height="155" border="0" style="color: #262626; font-family: Arial, sans-serif; font-size: 14px;" alt="Confirm Your Info »" />
</a>
</td>
</tr>
</table>
<!-- /#footerDesktop -->
<div class="mobileShow">
<table class="mobileShow" id="footerMobile" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="text-transform: none;">
<a class="mobileShow" href="cta" target="_blank">
<img class="mobileShow" src="" width="320" height="144" border="0" style="color: #9c3022; font-family: Arial, sans-serif; font-size: 14px;" alt="Confirm Your Info »" />
</a>
</td>
</tr>
</table>
<!-- /#footerMobile -->
</div>
</td>
</tr>
<tr>
<td>
<div class="ec_item" id="logo" align="center">
<a href="">
<img height="49" width="160" style="margin:20px;" src="" style="color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;" alt="" /></a>
</div>
</td>
</tr>
</tbody>
</table><!-- /#main -->
<table id="requiredFooter" width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td id="requiredFooterText">
This message was sent to <span style="color:#333333;">{EMAIL}</span> by <span style="color:#333333;">{FROM_EMAIL}</span>.<br /><br />
=
We received your contact information from {CONTACT_SOURCE}.<br /><span style="color:#333333;">Unsubscribe</span> from future email communications from Office of Admission.<br /><br /><br />
</td>
</tr>
</table><!-- /#requiredFooter -->
</td>
</tr>
</table><!-- /#mainWrapper -->
</body>
</html>
What about css media queries?
As a reference https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries and
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You can not have 2 style in your header.
When it is to an email template, I would advise you to make everything inline style and the things that need to be different on the phone must be in header #media, with a !important on. as shown in the example.
Hope it helps
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style>
#media only screen and (max-width: 480px) {
.paragraphText p {
font-size: 24px !important;
}
}
</style>
</head>
<body>
<div class="paragraphText">
<p style="color: #000000; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.5;"> Confirm your information</p>
</div>
</body>
</html>
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;"><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"> </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>View it in your browser.
</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 FAQs or contact us.<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;">Friend us on Facebook</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;">Follow us on Twitter </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;">Read our blog </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%;">
Sign up for our newsletter</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;">follow on Twitter | friend on Facebook | read our blog | forward to a friend </div>
<center><em>SAMPLE TEXTSAMPLE SAMPLE TEXT.</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;">
view email in browser*|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>
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]-->
I think you have forgotten the px after 600 in
body{
width:600 !important;
}
So it should works
body{
width:600px !important;
}
And also it's not good to set body again, what you have done two times.
Try this max-width fluid example. It uses a combination of max-width, Outlook conditionals and a media query for Outlook '11 (which is webkit based and can't be targeted with Outlook conditionals):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
<style type="text/css">
/* Client-specific Styles - last updated 18 Feb 2014 */
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
.ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #005288 !important; pointer-events: auto; cursor: default;}
.link1 a, .link1 a:active, .link1 a:visited {color: #005288 !important; text-decoration: none;}
.link2 a, .link2 a:active, .link2 a:visited {color: #FFFFFE !important; text-decoration: none;}
table td {border-collapse: collapse;}
#media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
</style>
</head>
<body style="margin: 0px; padding: 0px; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top">
<![endif]-->
<table width="100%" class="maxW" style="max-width: 600px; margin: auto;" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" align="center" style="padding-top:30px; padding-bottom:30px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="margin: auto;">
<tr>
<td align="left" style="padding:30px;">
Content
</td>
</tr>
</table>
</td></tr></table>
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->
</td></tr></table></body></html>