I'm trying to send email with template on HTML and photos.
Everything works fine but when sending the email to outlook
I get this message:
Can someone help me with sending images in the HTML as apart of it?
You can see example of my code here I hope it will be good.
I didn't add the photos to the post.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="width:100%;font-family:verdana, geneva, sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="telephone=no" name="format-detection">
<title>New Template 2</title>
<!--[if (mso 16)]>
<style type="text/css">
a {text-decoration: none;}
</style>
<![endif]-->
<!--[if gte mso 9]><style>sup { font-size: 100% !important; }</style><![endif]-->
<style type="text/css">
#media only screen and (max-width:600px) {p, ul li, ol li, a { font-size:16px!important; line-height:150%!important } h1 { font-size:30px!important; text-align:center; line-height:120%!important } h2 { font-size:26px!important; text-align:center; line-height:120%!important } h3 { font-size:20px!important; text-align:center; line-height:120%!important } h1 a { font-size:30px!important } h2 a { font-size:26px!important } h3 a { font-size:20px!important } .es-menu td a { font-size:16px!important } .es-header-body p, .es-header-body ul li, .es-header-body ol li, .es-header-body a { font-size:16px!important } .es-footer-body p, .es-footer-body ul li, .es-footer-body ol li, .es-footer-body a { font-size:16px!important } .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li, .es-infoblock a { font-size:12px!important } *[class="gmail-fix"] { display:none!important } .es-m-txt-c, .es-m-txt-c h1, .es-m-txt-c h2, .es-m-txt-c h3 { text-align:center!important } .es-m-txt-r, .es-m-txt-r h1, .es-m-txt-r h2, .es-m-txt-r h3 { text-align:right!important } .es-m-txt-l, .es-m-txt-l h1, .es-m-txt-l h2, .es-m-txt-l h3 { text-align:left!important } .es-m-txt-r img, .es-m-txt-c img, .es-m-txt-l img { display:inline!important } .es-button-border { display:block!important } a.es-button { font-size:18px!important; display:block!important; border-width:10px 20px 10px 20px!important } .es-btn-fw { border-width:10px 0px!important; text-align:center!important } .es-adaptive table, .es-btn-fw, .es-btn-fw-brdr, .es-left, .es-right { width:100%!important } .es-content table, .es-header table, .es-footer table, .es-content, .es-footer, .es-header { width:100%!important; max-width:600px!important } .es-adapt-td { display:block!important; width:100%!important } .adapt-img { width:100%!important; height:auto!important } .es-m-p0 { padding:0px!important } .es-m-p0r { padding-right:0px!important } .es-m-p0l { padding-left:0px!important } .es-m-p0t { padding-top:0px!important } .es-m-p0b { padding-bottom:0!important } .es-m-p20b { padding-bottom:20px!important } .es-mobile-hidden, .es-hidden { display:none!important } .es-desk-hidden { display:table-row!important; width:auto!important; overflow:visible!important; float:none!important; max-height:inherit!important; line-height:inherit!important } .es-desk-menu-hidden { display:table-cell!important } table.es-table-not-adapt, .esd-block-html table { width:auto!important } table.es-social { display:inline-block!important } table.es-social td { display:inline-block!important } }
#outlook a {
padding:0;
}
.ExternalClass {
width:100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height:100%;
}
.es-button {
mso-style-priority:100!important;
text-decoration:none!important;
}
a[x-apple-data-detectors] {
color:inherit!important;
text-decoration:none!important;
font-size:inherit!important;
font-family:inherit!important;
font-weight:inherit!important;
line-height:inherit!important;
}
.es-desk-hidden {
display:none;
float:left;
overflow:hidden;
width:0;
max-height:0;
line-height:0;
mso-hide:all;
}
</style>
</head>
<body style="width:100%;font-family:verdana, geneva, sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0;">
<div class="es-wrapper-color" style="background-color:#F6F6F6;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" color="#f6f6f6"></v:fill>
</v:background>
<![endif]-->
<table class="es-wrapper" width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;padding:0;Margin:0;width:100%;height:100%;background-repeat:repeat;background-position:center top;">
<tr style="border-collapse:collapse;">
<td valign="top" style="padding:0;Margin:0;">
<table cellpadding="0" cellspacing="0" class="es-header" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;background-color:transparent;background-repeat:repeat;background-position:center top;">
<tr style="border-collapse:collapse;">
<td class="es-adaptive" align="center" style="padding:0;Margin:0;">
<table class="es-header-body" width="600" cellspacing="0" cellpadding="0" bgcolor="#f6f6f6" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:transparent;border-left:2px solid #052946;border-right:2px solid #052946;border-top:2px solid #052946;">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;padding-top:10px;padding-bottom:10px;">
<table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td width="596" valign="top" align="center" style="padding:0;Margin:0;">
<table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="left" style="Margin:0;padding-left:5px;padding-top:10px;padding-bottom:10px;padding-right:10px;"><img class="adapt-img" src="images/56201580852517217.png" alt style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;" width="173"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table class="es-content" cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;">
<tr style="border-collapse:collapse;">
<td align="center" style="padding:0;Margin:0;">
<table class="es-content-body" width="600" cellspacing="0" cellpadding="0" bgcolor="#f6f6f6" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#F6F6F6;border-left:2px solid #042239;border-right:2px solid #042239;border-bottom:2px solid #042239;">
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;">
<table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td width="596" valign="top" align="center" style="padding:0;Margin:0;">
<table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;">
<tr style="border-collapse:collapse;">
<td align="left" bgcolor="transparent" style="padding:0;Margin:0;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:verdana, geneva, sans-serif;line-height:21px;color:#333333;"> __________________________________________________________________<br><br><span style="font-size:15px;"><strong> Hi daniel,</strong></span><br><br> Someone add you and sent you message to your account<br> please click the link below to see the message.<br><br><br></p></td>
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="Margin:0;padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:25px;"><span class="es-button-border" style="border-style:solid;border-color:#DBD4CE #DBD4CE #333333 #DBD4CE;background:#081877;border-width:1px 1px 2px 1px;display:inline-block;border-radius:0px;width:auto;border-bottom-width:1px;">Click Here</span></td>
</tr>
<tr style="border-collapse:collapse;">
<td align="left" style="padding:0;Margin:0;"><p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:verdana, geneva, sans-serif;line-height:21px;color:#333333;"><br><br><br> Thanks,<br> book Team<br><br><br> __________________________________________________________________<br><br><strong><span style="color:#D3D3D3;font-size:12px;"> </span><span style="color:#808080;font-size:12px;">This message sent to you from feca books<br> the place to buy your next book</span></strong><br><br></p></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>
This is a (spam)security issue - and is wanted and expected behavior.
Good email clients prevent external data to be loaded on default. The user has to click the "load images" button to be able to view them.
Background:
The sender does not know if an email has been opened by the reciever.
By clicking the "load images" button a request is made on the server from the sender to recieve the images.
At the same time the sender does exactly know that the email adress is actively maintained.
That perhaps does not sound very important, but that exploid has been used massively by spammers. They just sent mails to every possible adress and waited for the people to open their mails and load the images. That gave them the proof that the mailadress is in use and they could sell the mail-adress to other spammers.
If you ever loaded images from a spam mail, you will very likely had a non-usable mail-account after a couple of weeks because of massive spam.
This is the short answer. If requested i can go into more detail.
Related
I am completely new to HTML. I am working on creating a template for emails in Action Network, however, I can not figure out how to position the elements I created. I would like the donate button to be in the middle and all of the social media links to be on the right, underneath the logo at the top. When I try to move the logos to the right, they end up being in the white area instead of underneath the logo. ANY help is appreciated. The code is below:
#outlook a {
padding: 0;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
.image_fix {
display: block;
}
p {
margin: 1em 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #404040
}
table td {
border-collapse: collapse;
}
#media only screen and (max-device-width: 480px) {
a[href^="tel"],
a[href^="sms"] {
text-decoration: none;
color: blue;
cursor: default;
}
.mobile_link a[href^="tel"],
.mobile_link a[href^="sms"] {
text-decoration: default;
color: orange;
pointer-events: auto;
cursor: default;
}
}
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
a[href^="tel"],
a[href^="sms"] {
text-decoration: none;
color: blue;
cursor: default;
}
.mobile_link a[href^="tel"],
.mobile_link a[href^="sms"] {
text-decoration: default;
color: orange;
pointer-events: auto;
cursor: default;
}
}
#media only screen and (-webkit-min-device-pixel-ratio: 2) {}
#media only screen and (-webkit-device-pixel-ratio:.75) {}
#media only screen and (-webkit-device-pixel-ratio:1) {}
#media only screen and (-webkit-device-pixel-ratio:1.5) {}
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="margin: 0;padding: 0;background-color: #FFFFFF;width: 100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;">
<center>
<table cellpadding="0" cellspacing="0" border="0" align="center" id="backgroundTable" style="margin: 0;padding: 0;background-color: #FFFFFF;height: 100% !important;width: 100% !important; line-height: 100% !important; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"
role="presentation">
<tr>
<td align="center" valign="top" style="border-collapse: collapse;">
<table border="0" cellpadding="0" cellspacing="0" align="center" style="border: 0;background-color: #FFFFFF; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" role="presentation">
<tr>
<td align="center" valign="top" style="border-collapse: collapse;">
<table border="0" cellpadding="10" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" role="presentation">
<tr>
<td valign="top" style="border-collapse: collapse; background-color: #FFFFFF; padding:10px 10px 10px;">
<table border="0" cellpadding="10" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" role="presentation">
<tr>
<td valign="top" style="border-collapse: collapse;" width="600">
<div style="color: #383838;font-family: Arial;font-size: 16px;line-height: 150%;text-align: left;">
<center>
<img src="https://can2-prod.s3.amazonaws.com/email_templates/logos/000/029/586/original/centerrrr.png" style="max-width:1492px; width: 100%; margin: 20px auto" />
</center>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<b> DONATE </b>
<br>
<br>
<b><div style="color: #1B4164;font-family: Arial;font-size: 14px;line-height: 125%;text-align: center;"> Center for Community Alternatives</div></b>
<div style="font-family: Arial;font-size: 14px;line-height: 125%;text-align: center;"> communityalternatives.org
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" style="border-collapse: collapse;">
<table border="0" cellpadding="0" cellspacing="0" style="background-color: #FFFFFF;border-top: 2px solid #909090; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" role="presentation">
<tr>
<td valign="top" style="border-collapse: collapse;">
<table border="0" cellpadding="10" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" role="presentation">
<tr>
<td colspan="2" valign="middle" style="border-collapse: collapse;background-color: #FFFFFF;border-top: 0;">
<div style="color: #707070;font-family: Arial;font-size: 11px;line-height: 125%;text-align: left;">
Sent via ActionNetwork.org. To update your email address or to stop receiving emails from [your group name], please click here.
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
</center>
</body>
A <table> approach is the right way for HTML email, mostly for Outlook desktop's sake.
You don't need <div>s since you already have a block level element for positioning and styles: the <td>. Put all the styles on the div in the containing <td>.
You can do block-level centering with <center> tag, or the align attribute, and inline/text-level centering with text-align (on the closest block-level parent is best). (Lookup online about block vs inline, it's very important. e.g. https://www.samanthaming.com/pictorials/css-inline-vs-inlineblock-vs-block/)
For ease and consistency, place each row on a new <tr> (table row), and then in the <td> (table data), which always comes inside a row, set your desired padding. (Margins don't work across all email clients.)
Then you can set, e.g. your social media to the right like so:
<tr>
<td align="right">
<!-- Social media icons -->
</td>
</tr>
And your donate button on next line like so:
<tr>
<td align="center">
<!-- Donate button -->
</td>
</tr>
To get them on the same line, use two <td>s in the same row, with desired widths and alignments.
Btw what you have in the <style> part is good. Those reset a few problems in various email clients. Keep researching, but remember HTML email is different because many email clients are pretty backwards.
My html/css codes render correctly in Mac Outlook but Windows Outlook overrides fonts to Times New Roman. Below is the code to the email. Can someone let me know what am I missing?
<style style="-ms-text-size-adjust: 100%;">
html, body {
margin: 0 auto;
padding: 0;
height: 100%;
width: 100%;
}
* {
-ms-text-size-adjust: 100%;
}
table, td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode:bicubic;
}
a {
text-decoration: none;
}
</style>
<!--[if !mso]>
<style type=”text/css”>
body, table, td {font-family: Arial, Helvetica, sans-serif !important;}
</style>
<![endif]-->
</head>
<body bgcolor="#fff" style="font-family: 'Open Sans', sans-serif;margin-top: 0;margin-right: auto;margin-bottom: 0;margin-left: auto;-ms-text-size-adjust: 100%;height: 100%;width: 100%;" align="center">
<table border="0" cellpadding="0" cellspacing="0" style="table-layout: fixed;display: block;width: 640px;margin-top: 0;margin-right:auto;margin-bottom: 0;margin-left: auto;padding-right: 20px; padding-left: 20px; -ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" align="center">
you've got an error in the conditional code where you're trying to target Outlook.
Rather than <!--[if !mso]>, it should be <!--[if mso]>.
With <!--[if !mso]>, you're saying 'if NOT mso'.
I'm trying to create a responsive HTML email for Outlook 2013 but I'm having trouble trying to get the email to respect the width limit I have set (i.e. width="100%"). The actual width is indeed being set to 100% until I reach a certain smaller width at which point I have to scroll to view the information.
The code works fine in IE (no surprise) so I know the code itself is at least appropriate in that sense (i.e. I haven't wrapped something incorrectly).
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Responsive Email Template</title>
<style type="text/css">
.ReadMsgBody {
width: 100%;
background-color: #ffffff;
}
.ExternalClass {
width: 100%;
background-color: #ffffff;
}
body {
width: 100%;
background-color: #ffffff;
margin:0;
padding:0;
-webkit-font-smoothing: antialiased;
font-family: Georgia, Times, serif
}
table {
border-collapse: collapse;
}
a {
color:#0076b7;
}
.nav-link:visited {
color:#fff;
}
/*
#media only screen and (max-width: 640px) {
.deviceWidth {width:440px!important; padding:0;}
.ReadMsgBody {width:440px!important; padding:0;}
.center {text-align: center!important;}
}
#media only screen and (max-width: 479px) {
.deviceWidth {width:280px!important; padding:0;}
.ReadMsgBody {width:280px!important; padding:0;}
.center {text-align: left!important;}
} */
</style>
</head>
<body style="font-family: Georgia, Times, serif">
<!-- Wrapper -->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#fff" style="padding-top:20px" valign="top" width="100%">
<!-- Start Header-->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" style="font-size:21px; font-weight:bold; margin:0 auto; font-family:'Franklin Gothic',sans-serif;" width="100%">
<tr>
<td bgcolor="#0076B7" width="100%">
<!-- Logo -->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="deviceWidth">
<tr>
<td class="center" style="line-height:32px; padding:5px 20px;">
<a class="nav-link" style="font-size:21px; font-weight:bold; color:#fff; text-decoration: none; font-family:'Franklin Gothic',sans-serif;" href="#">LOGO</a>
</td>
</tr>
</table><!-- End Logo -->
<!-- Nav -->
<table align="right" border="0" cellpadding="0" cellspacing="0" class="deviceWidth">
<tr>
<td class="center" style="font-size: 13px; color: #fff; font-weight: light; text-align: right; font-family:'Franklin Gothic Book',sans-serif; line-height: 24px; vertical-align: middle; padding:10px 20px; font-style:normal">
Home | News | Events | Applications | OrgChart
</td>
</tr>
</table><!-- End Nav -->
</td>
</tr>
</table><!-- End Header -->
<!-- Actual Email Section -->
<table align="center" bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" style="margin:0 auto;" width="100%">
<tr>
<td bgcolor="#fff" style="font-size: 16px; color: #292215; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px">
<table>
<tr>
<td style="padding:10px 10px 10px 0" valign="middle">
Title
</td>
</tr>
</table>
<!-- Content -->
<p>Content here.</p>
</td>
</tr>
<!-- Footer -->
<tr>
<td bgcolor="#fff" style="font-size: 16px; color: #292215; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:40px 8px 10px 8px">
Place of Work<br>
Jacob Johnson<br>
Work Role<br>
jacobjohnson#me.com<br>
555-555-5555
</td>
</tr>
</table><!-- End One Column -->
</td>
</tr>
</table><!-- End Wrapper -->
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff;">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>
</body>
</html>
Recap: My email extends beyond the width limit I have it set for and I can't figure out why. Outlook is a pain in my butt.
Outlook isn't broken, your code exhibits the same behavior in almost every email client.
The problem is that you set all the tables to have a width of 100%. On many of them, you added the class .deviceWidth, where you specify the width in media queries, but not for anything wider than 640px. Outlook does not support #media queries.
Try adding .deviceWidth {width:440px!important; padding:0;} to your style sheet outside of media queries and address your width="100%" on every table.
JSFiddle is not working for me right now so I can't show you a sample.
Good luck.
Outlook doesn't respect 100% width so you need to set a fixed width for outlook, add width to the wrapper table
<table class="for_others" align="center" border="0"
cellpadding="0" cellspacing="0" width="600">
And using the class set width to 100% for all others. Use !important at the end of the declaration to override inline css.
table.for_others {width: 100% !important;}
I'm designing an email and I'm not sure how to make text aligned with the rows below it. I want the "Our Weather Experts" and "ARE LOOKING OUT FOR YOU." to stretch across the table and be flush with the rows below it that includes the paragraph and learn more button. I tried using letter spacing and different sorts of padding, but is this even possible?
It's supposed to look like this:
I also tried to get the "Our Weather Experts" line to be skinny text, but the font-weight: lighter attribute doesn't seem to be working either.
Any help would be appreciated.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
.borderbottom {border-bottom: 1px solid #dadada;}
.innerpadding {padding: 30px 30px 30px 30px;}
/* CLIENT-SPECIFIC STYLES */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
.ReadMsgBody{width:100%;} .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 */
body, table, td, a{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
/* RESET STYLES */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table{border-collapse:collapse !important;}
body{height:100% !important; margin:0; padding:0; width:100% !important;}
/* iOS BLUE LINKS */
.appleBody a {color:#68440a; text-decoration: none;}
.appleFooter a {color:#999999; text-decoration: none;}
</style>
</head>
<body yahoo="fix" style="margin: 0; padding: 0; ">
<table class="container" width="640" align="center" cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto; padding: 0;">
<tr>
<td valign="top" align="center" bgcolor="#ffffff">
<div class="mobile-only" style="text-indent: -99999em; display: none; height: 0; width: 0; overflow: hidden; max-height: 0;">
<img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Header-Mobile-320x159.jpgg" border="0">
</div>
<div class="no-mobile">
<img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Header-Desktop-640x220.jpg" border="0">
</div>
</td>
</tr>
<tr>
<td valign="top" align="center" bgcolor="#ffffff" style="padding:30px;" >
<table cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td colspan="2" style="letter-spacing: 3px; font-family: Arial, Helvetica, sans-serif; font-size:43px; color: #002663">
OUR WEATHER EXPERTS
</td>
</tr>
<tr>
<td colspan="2" style="letter-spacing: 3px; font-family: Arial, Helvetica, sans-serif; font-size:36px; color: #002663">
<strong>ARE LOOKING OUT FOR YOU.</strong>
</td>
</tr>
<tr>
<td style="font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#666666; line-height:20px; padding:20px 35px 25px 0px;" align="left" class="borderbottom">
Your area is likely to receive severe storms in the upcoming months. We've prepared information and tips to help protect you and your loved ones this season.
</td>
<td style="font-family: Arial, Helvetica, sans-serif; vertical-align:top; padding: 20px 0px 30px 0px"; align="left" class="borderbottom">
<img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Button-Learn-More-139x38.jpg" style="display:block;" width="139" height="38">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
What you want to do is
text-align:justify;
but with only one line of text it gets a bit messy.
You need to add an empty container with a width of 100% to push the text to the end.
<span style="display:inline-block;width:100%;"></span>
Then it will add extra space below the text so you need to adjust the line-heights.
See fiddle https://jsfiddle.net/y7vp8oz0/
I could not find a direct answer for this, so please be patient if this has been asked before.
I have limited HTML experience. The width of the table columns within the email change when opened in Entourage and Gmail on my Android phone. Gmail on my PC looks fine, Outlook, Yahoo, etc. also great.
Essentially what happens is the widths of the left and right column switch in Entourage/Gmail-droid. Left column width should stay at width="401"; right column should stay fixed at width="171" (they swap so the left column is 171 and the right is 401).
I am working with an HTML email template I picked up online with nested tables. Here is the basic code with text and images stripped out. Any help would be appreciated:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css" media="screen">
html {
-webkit-text-size-adjust:none;
-webkit-background-size:100%;
}
.bold {
color: #61BB46;
}
.Main {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
line-height: 22px;
color: #666666;
}
.Sidebar {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
line-height: 22px;
color: #666666;
}
a:link {
COLOR: #592989;
}
a:visited {
COLOR: #FAAB53;
}
a:hover {
COLOR: #61BB46;
}
a:active {
COLOR: #592989;
}
</style>
<body bgcolor="#ffffff" text="#666666" style="padding:0px; margin:0px;">
<table style="font-family: Verdana, Helvetica, sans-serif; color: #666666;
font-size: 12px; Line-height: 18px; width: 600px;" border="0" cellspacing="0"
cellpadding="0" align="center">
<tr>
<td style="font-size: 30px; line-height: 32px; color: #592989;" colspan="4">
<div style="font-size: 12px; color:#999;"></div></td>
</tr>
<tr>
<td style="padding-top: 20px;" colspan="4"><table border="0" cellspacing="0"
cellpadding="0" align="center">
<tbody>
<tr>
<td style="padding: 4px; background-color: #e3dede;"><img src=""
width="578" height="190"></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td style="padding-top: 20px; padding-bottom: 20px; text-align: left;"
colspan="4"><p><a href="" target="_blank">
</td>
</tr>
<tr>
<td rowspan="5" width="401" valign="top"><p style="color: #592989;
font-size: 20px;"></p>
<p class="Main" style="margin-bottom: 1.0em">
</p></td>
<td rowspan="5" width="19" valign="top"> </td>
<td style="background-color: #592989; padding: 4px; padding-left: 8px;
color: #ffffff; font-size: 14px;" width="171" valign="top"><p></p></td>
<tr>
</table>
</body>
First rule with sending HTML email use inline styles. Many clients will strip out any styles in the <head> tag. The safest bet is to not even bother with a <head> or <body> tag as most of the time these get stripped out. Validate your html. You have some invalid markup that many clients will strip out:
<td style="padding-top: 20px;" colspan="4"><table border="0" cellspacing="0"
cellpadding="0" align="center">
<tbody>
Should be:
<td style="padding-top: 20px;" colspan="4"><table border="0" cellspacing="0"
cellpadding="0" align="center">
<table>
<tbody>