Copy link to clipboard
Copied
Hey everyone,
I'm working on an email and of course I'm getting the usual outlook rendering issues. I've tested in Litmus and it looks great in all clients but a few outlook versions. Below is the code . I've attached screenshots. one of how it should look and one of my litmus outlook rendering. As you can see the header image isn't centering and something dropped my text down below each image.
Thank you for any help.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Premier Marketing Update</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
</head>
<body>
<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, maximum-scale=1, user-scalable=0">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
<!-- General CSS -->
<style type="text/css">
.main_container{
max-width: 740px;
height: 100%;
margin: 10px auto 0px auto;
}
.in_container{
background: #fafafa;
border-radius: 2px;
box-shadow: 0 0 6px #c9d1de;
-webkit-box-shadow: 0 0 6px #c9d1de;
-moz-box-shadow: 0 0 6px #c9d1de;
-o-box-shadow: 0 0 6px #c9d1de;
}
.back_link{
display: block;
text-decoration: none;
margin-top: 80px;
text-align: center;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #3E3E3E;
font-size: 16px;
letter-spacing: 1px;
}
.back_link .back_arrow_icon{
vertical-align: middle;
margin-right: 10px;
}
html{
width: 100%;
}
body{
width: 100%;
margin:0;
padding:0;
-webkit-font-smoothing: antialiased;
mso-margin-top-alt:0px;
mso-margin-bottom-alt:0px;
mso-padding-alt: 0px 0px 0px 0px;
background: #eef1f2;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
p,h1,h2,h3,h4{
margin-top:0;
margin-bottom:0;
padding-top:0;
padding-bottom:0;
}
table{
font-size: 14px;
border: 0;
}
img{
border: none!important;
}
</style>
<!-- Responsive CSS -->
<style type="text/css">
@media only screen and (max-width: 600px) {
body[yahoo] .full_width_600 {width:90% !important;}
}
@media only screen and (max-width: 700px) {
body[yahoo] .full_width_700 {width:100% !important;}
body[yahoo] .txt_center {text-align:center !important;}
body[yahoo] .separator {height: 40px !important;}
}
</style>
<!-- footer -->
<style>
html{width:100%;}
body{width:100%;margin:0;padding:0;-webkit-font-smoothing:antialiased;mso-margin-top-alt:0px;mso-margin-bottom-alt:0px;mso-padding-alt:0px 0px 0px 0px;background:#E7E7E7;}
table{font-size:14px;border:0;}
img{border:none!important;}
/*! CSS Used from: Embedded */
@media only screen and (max-width: 700px){
body[yahoo] .full_width{width:100%!important;}
body[yahoo] .content_width{width:80%!important;}
body[yahoo] .center_txt{text-align:center!important;}
}
</style>
<!-- end footer -->
</head>
<body style="margin: 0; padding: 0;" yahoo="fix">
<div class="main_container">
<!-- Header -->
<table class="in_container" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td>
<!-- Hero -->
<table> <tr>
<td align="center"><img src="http://offers.premierinc.com/rs/381-NBB-525/images/Marketing_Update_Header_Image.png" width="100%" style="max-width:740px;" alt=""/></td>
</tr>
</table>
<!-- End Hero -->
<!-- About -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" bgcolor="ffffff" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color:#ffffff;">
<tr><td height="35px" width="100%" style="height:35px;"></td></tr>
<tr>
<td align="center">
<table class="full_width_600" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;text-align:center;">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
<tr>
<td align="right" width="46%" style="width:46%; text-align:right; color: #ffc627; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 25px; font-weight: 600; line-height:30px;">Edition 5</td>
<td align="left" width="54%" style="width:54%; text-align:left; color: #676f84; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 25px; font-weight: 600; line-height:30px;"> August 2018</td>
</tr>
</table>
</td>
</tr>
<tr><td height="15px" width="100%" style="height:15px;"></td></tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="max-width: 550px; margin:0 auto;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
<tr>
<td style="text-align:center; color: #b4c0c5; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 20px;">
This monthly publication is for internal awareness only. Please do not forward this to members, though please leverage the assests enclosed to share with your members and prospects.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr><td height="35px" width="100%" style="height:35px;"></td></tr>
</table>
<!-- End About -->
<!-- Services -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" bgcolor="ffffff" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color:#efefef;">
<tr><td height="60px" width="100%" style="height:60px;background-color: #0091b3;"><p style="text-align: center;font-size: 22px;color: #ffffff;">Section 1 Heading</p></td></tr>
<tr><td height="35px" width="100%" style="height:35px;"></td></tr>
<tr>
<td align="center">
<table class="full_width_600" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;text-align:center;">
<tr>
<td>
<!-- Service 1 -->
<table class="full_width_700" width="100%" cellpadding="0" align="left" cellspacing="0" style="width: 100%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td>
<!-- image -->
<table class="full_width_700" width="40%" cellpadding="0" align="left" cellspacing="0" style="width: 40%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td>
<img src="http://ryanhallmedia.com/thirdspace/img/email/section.jpg" alt="" title="" border="0" style="width: 100%; max-width: 345px;"/>
</td>
</tr>
</table>
<!-- End image -->
<!-- Text -->
<table class="full_width_700" width="60%" cellpadding="0" align="right" cellspacing="0" style="width: 60%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td width="25px" height="1px"></td>
<td>
<table class="full_width_700" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width: 345px;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;text-align:center;">
<tr>
<tr><td height="10px" width="100%" style="height:10px;"></td></tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
<tr>
<td align="left" style="text-align:left; color: #757c8f; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 25px; font-weight: 400; line-height:30px;">This would be a cool feature</td>
</tr>
</table>
</td>
</tr>
<tr><td height="15px" width="100%" style="height:15px;"></td></tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
<tr>
<td style="text-align:left; color: #b4c0c5; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 20px;">
This will be a nice paragraph summing up the email below. This will be a nice paragraph summing up the email below.This will be a nice paragraph. This will be a nice paragraph summing up the email below.This will be a nice paragraph.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End Text -->
</td>
</tr>
</table>
<!-- End Service 1 -->
</td>
</tr>
<tr><td height="60px" width="100%" style="height:60px;"></td></tr>
<tr>
<td>
<!-- Service 2 -->
<table class="full_width_700" width="100%" cellpadding="0" align="left" cellspacing="0" style="width: 100%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td>
<!-- image -->
<table class="full_width_700" width="40%" cellpadding="0" align="right" cellspacing="0" style="width: 40%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td>
<img src="http://ryanhallmedia.com/thirdspace/img/email/section.jpg" alt="" title="" border="0" style="width: 100%; max-width: 345px;"/>
</td>
</tr>
</table>
<!-- End image -->
<!-- Text -->
<table class="full_width_700" width="60%" cellpadding="0" align="left" cellspacing="0" style="width: 60%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td width="25px" height="1px"></td>
<td>
<table class="full_width_700" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width: 345px;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;text-align:center;">
<tr>
<tr><td height="10px" width="100%" style="height:10px;"></td></tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
<tr>
<td align="left" style=" text-align:left; color: #757c8f; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 25px; font-weight: 400; line-height:30px;">This would be a cool feature</td>
</tr>
</table>
</td>
</tr>
<tr><td height="15px" width="100%" style="height:15px;"></td></tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
<tr>
<td style="text-align:left; color: #b4c0c5; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 20px;">
This will be a nice paragraph summing up the email below. This will be a nice paragraph summing up the email below.This will be a nice paragraph.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="25px" height="1px"></td>
</tr>
</table>
<!-- End Text -->
</td>
</tr>
</table>
<!-- End Service 2 -->
<!-- Services -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" bgcolor="ffffff" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color:#efefef;">
<tr><td height="60px" width="100%" style="height:60px;"></td></tr>
<tr>
<td align="center">
<table class="full_width_600" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;text-align:center;">
<tr>
<td>
<!-- Service 1 -->
<table class="full_width_700" width="100%" cellpadding="0" align="left" cellspacing="0" style="width: 100%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td>
<!-- image -->
<table class="full_width_700" width="40%" cellpadding="0" align="left" cellspacing="0" style="width: 40%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td>
<img src="http://ryanhallmedia.com/thirdspace/img/email/section.jpg" alt="" title="" border="0" style="width: 100%; max-width: 345px;"/>
</td>
</tr>
</table>
<!-- End image -->
<!-- Text -->
<table class="full_width_700" width="60%" cellpadding="0" align="right" cellspacing="0" style="width: 60%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td width="25px" height="1px"></td>
<td>
<table class="full_width_700" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width: 345px;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;text-align:center;">
<tr>
<tr><td height="10px" width="100%" style="height:10px;"></td></tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
<tr>
<td align="left" style="text-align:left; color: #757c8f; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 25px; font-weight: 400; line-height:30px;">This would be a cool feature</td>
</tr>
</table>
</td>
</tr>
<tr><td height="15px" width="100%" style="height:15px;"></td></tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
<tr>
<td style="text-align:left; color: #b4c0c5; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 20px;">
This will be a nice paragraph summing up the email below. This will be a nice paragraph summing up the email below.This will be a nice paragraph. This will be a nice paragraph summing up the email below.This will be a nice paragraph.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<tr><td height="35px" width="100%" style="height:35px;"></td></tr>
<!-- End Text -->
<tr><td height="35px" width="100%" style="height:35px;"></td></tr>
</td>
</tr>
</table>
<!-- End Service 1 -->
</tr>
<tr>
<!-- Service 2 -->
<table class="full_width_700" width="100%" cellpadding="0" align="left" cellspacing="0" style="width: 100%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td>
<!-- image -->
<table class="full_width_700" width="40%" cellpadding="0" align="right" cellspacing="0" style="width: 40%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td>
<img src="http://ryanhallmedia.com/thirdspace/img/email/section.jpg" alt="" title="" border="0" style="width: 100%; max-width: 345px;"/>
</td>
</tr>
</table>
<!-- End image -->
<!-- Text -->
<table class="full_width_700" width="60%" cellpadding="0" align="left" cellspacing="0" style="width: 60%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td width="25px" height="1px"></td>
<td>
<table class="full_width_700" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width: 345px;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;text-align:center;">
<tr>
<tr><td height="10px" width="100%" style="height:10px;"></td></tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
<tr>
<td align="left" style=" text-align:left; color: #757c8f; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 25px; font-weight: 400; line-height:30px;">This would be a cool feature</td>
</tr>
</table>
</td>
</tr>
<tr><td height="15px" width="100%" style="height:15px;"></td></tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
<tr>
<td style="text-align:left; color: #b4c0c5; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 20px;">
This will be a nice paragraph summing up the email below. This will be a nice paragraph summing up the email below.This will be a nice paragraph.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="25px" height="1px"></td>
</tr>
</table>
<!-- End Text -->
</td>
</tr>
</table>
<!-- End Service 2 -->
</td>
</tr>
</table>
</td>
</tr>
<tr><td height="30px" width="100%" style="height:30px;"></td></tr>
</table>
<!-- End Section -->
</td>
</tr>
</table>
<!-- End Price -->
<!-- Bottom -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" background="http://ryanhallmedia.com/thirdspace/img/email/lastback.jpg" bgcolor="3d424e" style="background-image:url('img/lastback.jpg'); background-size: cover; -webkit-background-size: cover; -moz-background-size: cover -o-background-size: cover; background-position: bottom center; background-repeat: no-repeat; background-color:#3d424e;border-radius:0px 0px 2px 2px;">
<tr>
</tr>
</table>
<tr><td height="60px" width="100%" style="height:60px;background-color: #0091b3;"><p style="text-align: center;font-size: 22px;color: #ffffff;">Section 2 Heading</p></td></tr>
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" bgcolor="ffffff" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color:#efefef;">
<tr><td height="35px" width="100%" style="height:35px;"></td></tr>
<tr>
<td align="center">
<table class="full_width_600" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;text-align:center;">
<tr>
<td>
<!-- Service 1 -->
<table class="full_width_700" width="100%" cellpadding="0" align="left" cellspacing="0" style="width: 100%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td>
<!-- image -->
<table class="full_width_700" width="40%" cellpadding="0" align="left" cellspacing="0" style="width: 40%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td>
<img src="http://ryanhallmedia.com/thirdspace/img/email/section.jpg" alt="" title="" border="0" style="width: 100%; max-width: 345px;"/>
</td>
</tr>
</table>
<!-- End image -->
<!-- Text -->
<table class="full_width_700" width="60%" cellpadding="0" align="right" cellspacing="0" style="width: 60%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td width="25px" height="1px"></td>
<td>
<table class="full_width_700" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width: 345px;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;text-align:center;">
<tr>
<tr><td height="10px" width="100%" style="height:10px;"></td></tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
<tr>
<td align="left" style="text-align:left; color: #757c8f; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 25px; font-weight: 400; line-height:30px;">This would be a cool feature</td>
</tr>
</table>
</td>
</tr>
<tr><td height="15px" width="100%" style="height:15px;"></td></tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
<tr>
<td style="text-align:left; color: #b4c0c5; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 20px;">
This will be a nice paragraph summing up the email below. This will be a nice paragraph summing up the email below.This will be a nice paragraph. This will be a nice paragraph summing up the email below.This will be a nice paragraph.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End Text -->
</td>
</tr>
</table>
<!-- End Service 1 -->
</td>
</tr>
<tr><td height="60px" width="100%" style="height:60px;"></td></tr>
<tr>
<td>
<!-- Service 2 -->
<table class="full_width_700" width="100%" cellpadding="0" align="left" cellspacing="0" style="width: 100%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td>
<!-- image -->
<table class="full_width_700" width="40%" cellpadding="0" align="right" cellspacing="0" style="width: 40%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td>
<img src="http://ryanhallmedia.com/thirdspace/img/email/section.jpg" alt="" title="" border="0" style="width: 100%; max-width: 345px;"/>
</td>
</tr>
</table>
<!-- End image -->
<!-- Text -->
<table class="full_width_700" width="60%" cellpadding="0" align="left" cellspacing="0" style="width: 60%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td width="25px" height="1px"></td>
<td>
<table class="full_width_700" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width: 345px;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;text-align:center;">
<tr>
<tr><td height="10px" width="100%" style="height:10px;"></td></tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
<tr>
<td align="left" style=" text-align:left; color: #757c8f; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 25px; font-weight: 400; line-height:30px;">This would be a cool feature</td>
</tr>
</table>
</td>
</tr>
<tr><td height="15px" width="100%" style="height:15px;"></td></tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
<tr>
<td style="text-align:left; color: #b4c0c5; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 20px;">
This will be a nice paragraph summing up the email below. This will be a nice paragraph summing up the email below.This will be a nice paragraph.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="25px" height="1px"></td>
</tr>
</table>
<!-- End Text -->
</td>
</tr>
</table>
<!-- End Service 2 -->
<!-- Services -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" bgcolor="ffffff" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color:#efefef;">
<tr><td height="60px" width="100%" style="height:60px;"></td></tr>
<tr>
<td align="center">
<table class="full_width_600" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;text-align:center;">
<tr>
<td>
<!-- Service 1 -->
<table class="full_width_700" width="100%" cellpadding="0" align="left" cellspacing="0" style="width: 100%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td>
<!-- image -->
<table class="full_width_700" width="40%" cellpadding="0" align="left" cellspacing="0" style="width: 40%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td>
<img src="http://ryanhallmedia.com/thirdspace/img/email/section.jpg" alt="" title="" border="0" style="width: 100%; max-width: 345px;"/>
</td>
</tr>
</table>
<!-- End image -->
<!-- Text -->
<table class="full_width_700" width="60%" cellpadding="0" align="right" cellspacing="0" style="width: 60%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td width="25px" height="1px"></td>
<td>
<table class="full_width_700" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width: 345px;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;text-align:center;">
<tr>
<tr><td height="10px" width="100%" style="height:10px;"></td></tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
<tr>
<td align="left" style="text-align:left; color: #757c8f; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 25px; font-weight: 400; line-height:30px;">This would be a cool feature</td>
</tr>
</table>
</td>
</tr>
<tr><td height="15px" width="100%" style="height:15px;"></td></tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
<tr>
<td style="text-align:left; color: #b4c0c5; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 20px;">
This will be a nice paragraph summing up the email below. This will be a nice paragraph summing up the email below.This will be a nice paragraph. This will be a nice paragraph summing up the email below.This will be a nice paragraph.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<tr><td height="60px" width="100%" style="height:60px;"></td></tr>
</td>
</tr>
</table>
<!-- End Service 1 -->
</tr>
<tr>
<!-- Service 2 -->
<table class="full_width_700" width="100%" cellpadding="0" align="left" cellspacing="0" style="width: 100%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td>
<!-- image -->
<table class="full_width_700" width="40%" cellpadding="0" align="right" cellspacing="0" style="width: 40%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td>
<img src="http://ryanhallmedia.com/thirdspace/img/email/section.jpg" alt="" title="" border="0" style="width: 100%; max-width: 345px;"/>
</td>
</tr>
</table>
<!-- End image -->
<!-- Text -->
<table class="full_width_700" width="60%" cellpadding="0" align="left" cellspacing="0" style="width: 60%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td width="25px" height="1px"></td>
<td>
<table class="full_width_700" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width: 345px;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;text-align:center;">
<tr>
<tr><td height="10px" width="100%" style="height:10px;"></td></tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
<tr>
<td align="left" style=" text-align:left; color: #757c8f; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 25px; font-weight: 400; line-height:30px;">This would be a cool feature</td>
</tr>
</table>
</td>
</tr>
<tr><td height="15px" width="100%" style="height:15px;"></td></tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
<tr>
<td style="text-align:left; color: #b4c0c5; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 20px;">
This will be a nice paragraph summing up the email below. This will be a nice paragraph summing up the email below.This will be a nice paragraph.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="25px" height="1px"></td>
</tr>
</table>
<!-- End Text -->
</td>
</tr>
</table>
<!-- End Service 2 -->
</td>
</tr>
</table>
</td>
</tr>
<tr><td height="30px" width="100%" style="height:30px;"></td></tr>
</table>
<!-- End Section -->
<tr><td height="60px" width="100%" style="height:60px;background-color: #0091b3;"><p style="text-align: center;font-size: 22px;color: #ffffff;">Section 3 Heading</p></td></tr>
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" bgcolor="ffffff" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color:#efefef;">
<tr><td height="35px" width="100%" style="height:35px;"></td></tr>
<tr>
<td align="center">
<table class="full_width_600" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;text-align:center;">
<tr>
<td>
<!-- Service 1 -->
<table class="full_width_700" width="100%" cellpadding="0" align="left" cellspacing="0" style="width: 100%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td>
<!-- image -->
<table class="full_width_700" width="40%" cellpadding="0" align="left" cellspacing="0" style="width: 40%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td>
<img src="http://ryanhallmedia.com/thirdspace/img/email/section.jpg" alt="" title="" border="0" style="width: 100%; max-width: 345px;"/>
</td>
</tr>
</table>
<!-- End image -->
<!-- Text -->
<table class="full_width_700" width="60%" cellpadding="0" align="right" cellspacing="0" style="width: 60%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td width="25px" height="1px"></td>
<td>
<table class="full_width_700" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width: 345px;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;text-align:center;">
<tr>
<tr><td height="10px" width="100%" style="height:10px;"></td></tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
<tr>
<td align="left" style="text-align:left; color: #757c8f; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 25px; font-weight: 400; line-height:30px;">This would be a cool feature</td>
</tr>
</table>
</td>
</tr>
<tr><td height="15px" width="100%" style="height:15px;"></td></tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
<tr>
<td style="text-align:left; color: #b4c0c5; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 20px;">
This will be a nice paragraph summing up the email below. This will be a nice paragraph summing up the email below.This will be a nice paragraph. This will be a nice paragraph summing up the email below.This will be a nice paragraph.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End Text -->
</td>
</tr>
</table>
<!-- End Service 1 -->
</td>
</tr>
<tr><td height="60px" width="100%" style="height:60px;"></td></tr>
<tr>
<td>
<!-- Service 2 -->
<table class="full_width_700" width="100%" cellpadding="0" align="left" cellspacing="0" style="width: 100%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td>
<!-- image -->
<table class="full_width_700" width="40%" cellpadding="0" align="right" cellspacing="0" style="width: 40%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td>
<img src="http://ryanhallmedia.com/thirdspace/img/email/section.jpg" alt="" title="" border="0" style="width: 100%; max-width: 345px;"/>
</td>
</tr>
</table>
<!-- End image -->
<!-- Text -->
<table class="full_width_700" width="60%" cellpadding="0" align="left" cellspacing="0" style="width: 60%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td width="25px" height="1px"></td>
<td>
<table class="full_width_700" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width: 345px;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;text-align:center;">
<tr>
<tr><td height="10px" width="100%" style="height:10px;"></td></tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
<tr>
<td align="left" style=" text-align:left; color: #757c8f; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 25px; font-weight: 400; line-height:30px;">This would be a cool feature</td>
</tr>
</table>
</td>
</tr>
<tr><td height="15px" width="100%" style="height:15px;"></td></tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
<tr>
<td style="text-align:left; color: #b4c0c5; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 20px;">
This will be a nice paragraph summing up the email below. This will be a nice paragraph summing up the email below.This will be a nice paragraph.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="25px" height="1px"></td>
</tr>
</table>
<!-- End Text -->
</td>
</tr>
</table>
<!-- End Service 2 -->
<!-- Services -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" bgcolor="ffffff" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color:#efefef;">
<tr><td height="85px" width="100%" style="height:85px;"></td></tr>
<tr>
<td align="center">
<table class="full_width_600" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;text-align:center;">
<tr>
<td>
<!-- Service 1 -->
<table class="full_width_700" width="100%" cellpadding="0" align="left" cellspacing="0" style="width: 100%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td>
<!-- image -->
<table class="full_width_700" width="40%" cellpadding="0" align="left" cellspacing="0" style="width: 40%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td>
<img src="http://ryanhallmedia.com/thirdspace/img/email/section.jpg" alt="" title="" border="0" style="width: 100%; max-width: 345px;"/>
</td>
</tr>
</table>
<!-- End image -->
<!-- Text -->
<table class="full_width_700" width="60%" cellpadding="0" align="right" cellspacing="0" style="width: 60%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td width="25px" height="1px"></td>
<td>
<table class="full_width_700" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width: 345px;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;text-align:center;">
<tr>
<tr><td height="10px" width="100%" style="height:10px;"></td></tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
<tr>
<td align="left" style="text-align:left; color: #757c8f; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 25px; font-weight: 400; line-height:30px;">This would be a cool feature</td>
</tr>
</table>
</td>
</tr>
<tr><td height="15px" width="100%" style="height:15px;"></td></tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
<tr>
<td style="text-align:left; color: #b4c0c5; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 20px;">
This will be a nice paragraph summing up the email below. This will be a nice paragraph summing up the email below.This will be a nice paragraph. This will be a nice paragraph summing up the email below.This will be a nice paragraph.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<tr><td height="35px" width="100%" style="height:35px;"></td></tr>
<!-- End Text -->
<tr><td height="35px" width="100%" style="height:35px;"></td></tr>
</td>
</tr>
</table>
<!-- End Service 1 -->
</tr>
<tr>
<!-- Service 2 -->
<table class="full_width_700" width="100%" cellpadding="0" align="left" cellspacing="0" style="width: 100%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td>
<!-- image -->
<table class="full_width_700" width="40%" cellpadding="0" align="right" cellspacing="0" style="width: 40%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td>
<img src="http://ryanhallmedia.com/thirdspace/img/email/section.jpg" alt="" title="" border="0" style="width: 100%; max-width: 345px;"/>
</td>
</tr>
</table>
<!-- End image -->
<!-- Text -->
<table class="full_width_700" width="60%" cellpadding="0" align="left" cellspacing="0" style="width: 60%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
<tr>
<td width="25px" height="1px"></td>
<td>
<table class="full_width_700" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width: 345px;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;text-align:center;">
<tr>
<tr><td height="10px" width="100%" style="height:10px;"></td></tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
<tr>
<td align="left" style=" text-align:left; color: #757c8f; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 25px; font-weight: 400; line-height:30px;">This would be a cool feature</td>
</tr>
</table>
</td>
</tr>
<tr><td height="15px" width="100%" style="height:15px;"></td></tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
<tr>
<td style="text-align:left; color: #b4c0c5; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 20px;">
This will be a nice paragraph summing up the email below. This will be a nice paragraph summing up the email below.This will be a nice paragraph.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="25px" height="1px"></td>
</tr>
</table>
<!-- End Text -->
</td>
</tr>
</table>
<!-- End Service 2 -->
</td>
</tr>
</table>
</td>
</tr>
<tr><td height="30px" width="100%" style="height:30px;"></td></tr>
</table>
<!-- End Section -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Footer -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#666666" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td>
<!-- footer top block -->
<table width="700" align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0px;" class="content_width">
<!-- spacing -->
<tr>
<td width="100%" height="40"> </td>
</tr>
<!-- end spacing -->
<!-- content -->
<tr>
<td>
<!-- footer logo -->
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full_width center_txt">
<tr>
<td> <table height="40" width="30" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full_width">
<tr>
<td> </td>
</tr>
</table>
<img src="http://offers.premierinc.com/rs/381-NBB-525/images/logo_1.png" width="216" height="46" alt="" title="" border="0" style="border:0; display:inline_block;">
</td>
</tr>
</table>
<!-- end logo -->
<!-- spacing -->
<!-- end spacing -->
<!-- footer links -->
<table align="right" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;margin-top:10px;width: 250px;" class="full_width center_txt">
<tr>
<td><a href="https://twitter.com/premierha/status/879806051176120320" target="_blank"><img src="http://offers.premierinc.com/rs/381-NBB-525/images/twiterr_icon.png" width="35" height="35" alt="" title="" border="0" style="border:0; display:inline_block;margin-right: -3px;"/></a> <a href="https://www.linkedin.com/company/premier-inc" target="_blank"><img src="http://offers.premierinc.com/rs/381-NBB-525/images/linkedin_icon.png" width="35" height="35" alt="" title="" border="0" style="border:0; display:inline_block;"/></a> <a href="https://www.instagram.com/premierha/?hl=en" target="_blank" ><img src="http://offers.premierinc.com/rs/381-NBB-525/images/insta_icon.png" width="35" height="35" alt="" title="" border="0" style="border:0; display:inline_block;"/></a> <a href="https://www.youtube.com/user/premieralliance" target="_blank" ><img src="http://offers.premierinc.com/rs/381-NBB-525/images/youtube_icon.png" width="35" height="35" alt="" title="" border="0" style="border:0; display:inline_block;"/></a> <a href="https://www.facebook.com/premierhealthcarealliance/" target="_blank" ><img src="http://offers.premierinc.com/rs/381-NBB-525/images/fb_icon.png" width="35" height="35" alt="" title="" border="0" style="border:0; display:inline_block;"/></a></td>
</tr>
</table> <!-- end footer links -->
</td>
</tr>
<!-- content -->
<!-- spacing -->
<tr>
<td width="100%" height="40"><center style="color:#ffffff;font-family: Arial, Helvetica, sans-serif;margin:15px;">Premier Inc. 13034 Ballantyne Corporate Pl, Charlotte, NC 28277 </center></style></td>
</tr>
<!-- end spacing -->
<!-- vertical separator -->
<tr>
<td>
</td>
</tr>
<!-- end vertical separator -->
</table>
<!-- end footer top block -->
<!-- footer bottom block --><!-- end footer bottom block -->
</td>
</tr>
</table>
<!-- End Footer -->
</div>
</body>
</html>
</body>
</html>
kineticcreative123 wrote
No I didn't ask this question last week. So are you suggesting making all my styles inline?
Yes. Here is one of our actual email newsletters:
Copy link to clipboard
Copied
I'm afraid that emails are not the same as going to your local print shop and having a brochure printed. It is very often best to think linearly and never, ever, ever use CSS positioning. Simple is always better. Did you not ask this question last week?
Copy link to clipboard
Copied
No I didn't ask this question last week. So are you suggesting making all my styles inline?
Copy link to clipboard
Copied
kineticcreative123 wrote
No I didn't ask this question last week. So are you suggesting making all my styles inline?
Yes, styles should be inline. Here is a good CSS style reference for what works/doesn't work in a lot of clients: CSS Support Guide for Email Clients | Campaign Monitor .
Copy link to clipboard
Copied
kineticcreative123 wrote
No I didn't ask this question last week. So are you suggesting making all my styles inline?
Yes. Here is one of our actual email newsletters:
Copy link to clipboard
Copied
ALsp wrote
I'm afraid that emails are not the same as going to your local print shop and having a brochure printed. It is very often best to think linearly and never, ever, ever use CSS positioning. Simple is always better. Did you not ask this question last week?
A similar Outlook question was posted a few days ago by another user.
Table height not displaying correctly
I agree, simple is better for emails. As for Outlook's many oddities, I don't invest extra effort in it. It is what it is.