I took a template and customized it. I have added a background color, it shows up in Chrome when I load the .html file in Chrome, but when I try and load this with outlook the background color does not appear. I have looked around but I am new to HTML so I didn't quiet understand how to apply those answers to my specific situation, especially because i did not write all of this code, I was given this to work on.
${config_styles_link(color: #227700; text-decoration: none !important)}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<table cellpadding="0" border="0" style="line-height: 1.2em; font-family:
'Helvetica Neue', Helvetica, Arial, sans-serif; border-spacing: 0px; font-
size: 100%; font-color: white; border: 0; background-color: #fff;"
cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" width="650"
align="center" style="line-height: 1.2em; font-family: 'Helvetica Neue',
Helvetica, Arial, sans-serif; border-spacing: 0px; font-size: 100%;
background-color: 252734; border: 1px solid #ccc; margin-top: 5px; margin-
bottom: 5px;" >
<tbody>
<tr>
<td style="padding: 16px 16px 0px 20px; vertical-align: middle;
font-size: 18px; color: grey;" align="left">
</td>
<td width="200" style="padding:16px 16px 0px 14px;vertical-
align:middle; line-height:12px;" align="right">
</td>
</tr>
<tr>
<td colspan="2" style="padding: 8px 16px 8px 20px;">
<imgsrc="static.pexels.com/photos/11406/c12ee0f379643a278198b2086afd3b9c.jp"
style="width:600px;height:142px;">
<p style= "color: D2D5EB">Hello ${user_first_name},</p>
<p style= "color: D2D5EB">
We are looking forward to your participation in ${webcast_title}.
<div style="border:1px white; height: 60px; width: 180px; margin-left: 80px;
font-family: arial; font-size: 17px; font-weight: 600; color: D2D5EB;
background-color: 252734; clear:both;">
${webcast_details}
</div>
<img src="https://thumbs.dreamstime.com/z/skull-human-size-robot-isolated-
black-35652577.jpg" style="width:104px;height:142px;">
</p>
<hr style="clear:both;">
<p> </p>
<p style ="clear:both; color: D2D5EB;">You can test your system now to make
sure you can view our webinars and videos: ${help_viewers_systemtest}.</p>
<p style="color: D2D5EB;">${channel_webcasts}</p>
<p style ="font-family: arial; font-size: 11px; font-weight: 600; color:
grey; text-align: center;"> In the meantime you can check out our website by
clicking here for more
information about what we do, future events and to check out our blog!</p>
<p style="font-family: arial, sans-serif; font-size: 12px; color:
D2D5EB;">Thank you,<br />
${webcast_channel_title}</p>
</td>
</tr>
<tr>
<td style="padding: 0px 16px 0px 20px; font-family:
Arial,Helvetica,sans-serif; color: #000; font-size: 11px; color: D2D5EB;">
<p>You received this email because you are subscribed to <a
style="color: D2D5EB;; text-decoration: none !important"
href="${webcast_channel_url}&utm_content=channel">${webcast_channel_title}
</a> on BrightTALK.</p>
</td>
<td width="120" style="padding:4px 16px 0px 0px;vertical-
align:top;" align="right">
<img title="BrightTALK"
src="https://p.brighttalk.com/platform_email/brighttalklogo.png"
alt="BrightTALK" width="120" height="34" />
</td>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="650"
align="center" style="padding: 0px 0px; line-height: 1em;">
<tbody>
<tr>
<td style="padding-top: 0px; font-family: Arial,Helvetica,sans-
serif; color: #000; font-size: 11px; background-color: 252734;">
<p style="font-size:11px; color: D2D5EB">All times are shown in your time
zone: ${user_timezone_alias}</p>
<p style="color: D2D5EB;">To update your email preferences,
please visit: ${user_link_preferences}<br />
Should you wish to unsubscribe from this channel please
visit: ${user_link_mybrighttalk}</p>
<p style="color: D2D5EB;">
For more information, please visit us at <a style="color:
#227700; text-decoration: none !important"
href="http://www.brighttalk.com">www.brighttalk.com</a> <br />
BrightTALK™, 501 Folsom Street, 2nd Floor, San
Francisco, CA 94105</p>
<p style="color: D2D5EB;">${email_unsubscribe_link}</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
The background appears white in outlook, everything else turns up fine. I want the background color to be a navy-ish color.
The background appears white because you have the
background-color: #fff;
Change the #fff white colour for another colour you want.
Try, for example:
background-color: #0E061C;
Related
I am trying to change the background image for only part of the table, specifically the first two td elements and leave the third unchanged. I've tried wrapping the first two td in a div and changing the background image of the div but that didn't work.
I've look around elsewhere on the site and I couldn't seem to find anything similar to this question. Here is the code I have:
<div height='200px' width='600px'>
<table width='100%' style='display: inline-block; float: left; border-collapse: collapse; background-image: url(http://image.em.insightvacations.com/lib/fe8e1570706c037e7c/m/2/f1501c18-c3db-4fcd-818b-45d6199cc2e0.jpg'>
<tr>
<td width='33%' style='vertical-align: top; padding: 20px'><img src="http://image.em.insightvacations.com/lib/fe8e1570706c037e7c/m/2/1c64a1a7-519b-406a-8f29-6944c179a86f.png" alt="Anniversery badge"> </td>
<td align='left' width='33%' style="color: white; font-family: 'Effra', Monterrat, sans-serif; font-size: 25px; line-height: 22px; padding: 20px; background-color: rgba(166, 208, 237, 0.65); font-weight: bold">GLORIES OF GREECE<br><br><br>
<font style="font-family: 'Effra', Monterrat, sans-serif; font-size: 16px; line-height: 15px;"> 8 days <br>
<div align='center'> <button> EXPLORE NOW </button> </div>
</font>
</td>
<td width='34%' align='left' bgcolor="#081e3f" style="color: white; font-family: 'Effra', Monterrat, sans-serif; font-size: 16px; line-height: 1.5; padding: 20px">This popular journey covers a multitude of noteworhty ancient sitesm majestic monuments and mystical monasteries</td>
</tr>
</table>
</div>
Wrap there two tds into table and apply background to table.
Codepen demo.
<div height='200px' width='600px'>
<table width='100%' style='display: inline-block; float: left; border-collapse: collapse;'>
<tr>
<td width='66%' style='background-image: url(http://image.em.insightvacations.com/lib/fe8e1570706c037e7c/m/2/f1501c18-c3db-4fcd-818b-45d6199cc2e0.jpg'>
<table width='100%'>
<tr>
<td width="50%" style="vertical-align: top; padding: 20px;">
<img src="http://image.em.insightvacations.com/lib/fe8e1570706c037e7c/m/2/1c64a1a7-519b-406a-8f29-6944c179a86f.png" alt="Anniversery badge">
</td>
<td align='left' width='50%' style="color: white; font-family: 'Effra', Monterrat, sans-serif; font-size: 25px; line-height: 22px; padding: 20px; background-color: rgba(166, 208, 237, 0.65); font-weight: bold">
GLORIES OF GREECE
<br>
<br>
<br>
<font style="font-family: 'Effra', Monterrat, sans-serif; font-size: 16px; line-height: 15px;">
8 days <br>
<div align='center'> <button> EXPLORE NOW </button> </div>
</font>
</td>
</tr>
</table>
</td>
<td width='34%' align='left' bgcolor="#081e3f" style="color: white; font-family: 'Effra', Monterrat, sans-serif; font-size: 16px; line-height: 1.5; padding: 20px">This popular journey covers a multitude of noteworhty ancient sitesm majestic monuments and mystical monasteries</td>
</tr>
</table>
</div>
How can I have an image (little arrow on the right) set next to an anchor tag <a> and keep them both aligned vertically and horizontally. I've been trying this in multiple ways but came across errors with every method I tried. either the <a> tag wont work (not clickable) in html emails or the arrow would be outside the clickable area. I only need one of these following codes .Here's some what Iv'e tried:
First code: the problem here is: if the user clicked on the arrow it wont response, because it's not inside the <a> tag, but this is working
<table cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif; text-align: center;">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0; font-weight: normal;text-align: center;">
<tr>
<td align="left" style="padding: 15px 0px 15px 30px; text-decoration: none; font-size: 11px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; vertical-align: top; line-height: normal !important;">
<a style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">Go to Link</a>
</td>
<td align="right" style="text-align: left; color: #FFFFFF; font-weight: 700;"><img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15"></td>
<td><img src="http://via.placeholder.com/5/007cb0" width="5" /></td>
</tr>
</table>
</td>
</tr>
</table>
Second code: I couldn't get the text vertical aligned within the <td>
<table cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif; text-align: center;">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0; font-weight: normal;text-align: center;">
<tr>
<td height="50" align="left" style="text-decoration: none; font-size: 11px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; vertical-align: top; line-height: 100% !important;">
<a style="height:100%;font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer; display: block">Go to Link <img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="20" style="vertical-align: middle;"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Third code The problem here is: It didn't work in any email client and the link is not clickable.
<table class="mobile" cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif;">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0; font-weight: normal;">
<tr>
<td>
<a style="border: 1px solid red; padding: 20px;display: block; font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">
<tr style="font-size: 16px; text-align: left; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">
<td align="left" style="text-decoration: none; font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; vertical-align: top; line-height: normal !important;">
GET VERSATILE
</td>
<td align="right" style="text-align: center; color: #FFFFFF; font-weight: 700;"><img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15" /></td>
</tr>
</table>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Summaries:
I need this <a> tag to have an arrow next to it and to be Clickable all around the blue area.
Thanks for the help.
This is working in most of email clients, and even if I changed the text inside the anchor tag.
hope that would help.
<table class="mobile" cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif;">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0;font-family: Arial, Helvetica, sans-serif;font-weight: bold;">
<tr>
<td class="links" style="padding: 10px; color: #ffffff; vertical-align: middle; text-align: center; font-family: Arial, Helvetica, sans-serif;font-weight: bold;"><a style="text-align: center; display: block;cursor: pointer;font-family: Arial, Helvetica, sans-serif; color: #ffffff !important; text-decoration: none; font-size: 16px; line-height: 20px; font-weight: bold;" pm-link="landingpage1" pm-link-default-url="global_landingpage">GO TO LINK<img src="http://via.placeholder.com/15/007cb0" width="15" alt="" /><img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="20" style="vertical-align: middle;padding: 0 0 4px 0;max-width: 20px" /></a></td>
</tr>
</table>
</td>
</tr>
</table>
Not sure if you have thought of this but it should be as easy as adding an a tag around the image for the first question.
Try this below and see if it works for you. I have just added your a tag from the sibling td just to give you an idea.
<table cellpadding="0" cellspacing="0" border="0" width="33%" align="right" style="font-family: Arial, Helvetica, sans-serif; text-align: center;">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#007cb0; font-weight: normal;text-align: center;">
<tr>
<td align="left" style="padding: 15px 0px 15px 30px; text-decoration: none; font-size: 11px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; vertical-align: top; line-height: normal !important;">
<a style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">Go to Link</a>
</td>
<td align="right" style="text-align: left; color: #FFFFFF; font-weight: 700;"><img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15"></td>
<td><a style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;"><img src="http://via.placeholder.com/5/007cb0" width="5" /></a></td>
</tr>
</table>
</td>
</tr>
</table>
Hope this answer works for you.
Edited
Now that I know you're making a button that aligns to the right, I have a better approach for you.
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="right">
<tr>
<td><!-- The button code -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="background: #007cb0; text-align: center;">
<a href="#" target="_blank" style="background: #007cb0;
border: 15px solid #007cb0; font-family: sans-serif; font-size: 16px;
line-height: 110%; text-align: center; text-decoration: none !important;
display: block; font-weight: 700;"><span style="color:#ffffff;"> Go to Link <img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15">
</span></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
This code will right-align and look presentable in every email client. It does not quite look perfect in Outlook. To do that, you need to add a spacer table specifically for Outlook.
I am deleting the older post and code, but honestly, it's the same thing I posted yesterday with added which gives you a reliable form of padding.
Could you tell why are you using table formatting for making button-styled links? Is that specific for html-email? This seems easier and after some customizing will give the same look:
a {
display: inline-block;
border: 1px solid black;
padding: 10px;
}
Link <span> ❯</span>
OK then just add/adjust margin and padding to make clickable area larger
a{
display: inline-block;
position: relative;
z-index: 1;
padding: 1em;
margin: -1em;
}
td img{
padding-bottom: 5px;
}
https://jsfiddle.net/33q09cy0/
and add the image inside the a tag reference.
<td align="left" style="padding: 15px 0px 15px 30px; text-decoration: none; font-size: 11px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; vertical-align: top; line-height: normal !important;">
<a style="font-size: 16px; text-align: center; font-family: arial, sans-serif; color: #FFFFFF; font-weight: 700; cursor: pointer;">Go to Link</a>
<img src="https://png.icons8.com/metro/50/ffffff/forward.png" width="15">
</td>
On a typical HTML webpage, this would be very easy. For email, not so much.
I'm sure you're all familiar with the challenges of getting email clients to render things consistently. It basically throws divs out the window.
I'm concerned with the About, Practice Areas, etc. links..
Here's what I'd like to achieve
That's how it renders in a web browser, which is perfect.
But this is what I get in Outlook 2010.
My problem is.. I need to use text-align:center on the parent element to center everything. But in Outlook 2010, it stacks the children elements vertically instead of lining up in one row.
When I change it so I have just links inside the table (as opposed to nesting tables), I lose all padding on the links.
No padding on links..
Is there any way to do this?
<!DOCTYPE HTML>
<html>
<HEAD>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta charset="utf-8">
<title>|Jan '18|</title>
<style type="text/css">
#media(max-width: 500px) {
.frame {
width: 97% !important;
}
.fullIMG {
width: 100% !important;
}
#contentGrid {
padding: 10px 20px !important;
}
}
</style>
</head>
<BODY>
<!-- Beginning of white background table -->
<table align="center" cellspacing="0" cellpadding="0" border="0" style="width: 550px; background-color: white; border-left:1px solid black; border-right:1px solid black; opacity:.95" class="frame">
<tr>
<td>
<!-- Pre-Header -->
<tr>
<td style="text-align:center; padding: 0px 20px;">
<p style="font-family: Arial, Helvetica, sans-serif; line-height: 20px"><i>We have collected <strong>MORE THAN $1 BILLION</strong> for thousands of clients.</i></p>
</td>
</tr>
<!-- End of Pre-Header -->
<!-- Header Row -->
<tr>
<td>
<!-- Header Table -->
<table align="center" style="padding: 10px 20px 0px 20px;">
<tr>
<td align="center">
<a href="https://www.hupy.com/" target="_blank">
<img alt="Voted Best, Rated Vest" style="width: 90%; height: auto; " src="https://image.ibb.co/nai2NG/logo_tight.jpg"/>
</a>
</td>
</tr>
</table>
<!-- End of Header Table -->
</td>
</tr>
<!-- End of Header Row -->
<!-- Homebase Links Row -->
<tr>
<td>
<hr align="center" style="width:90%;">
<!-- Homebase Links Table -->
<table align="center">
<tr>
<td>
<table align="left" style="padding: 10px;">
<tr>
<td>
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/aboutus.cfm"><strong>About</strong></a>
</td>
</tr>
</table>
<table align="left" style="padding: 10px;">
<tr>
<td>
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px;text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/practice_areas/"><strong>Practice Areas</strong></a>
</td>
</tr>
</table>
<table align="left" style="padding: 10px;">
<tr>
<td>
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/library/"><strong>Legal Info</strong></a>
</td>
</tr>
</table>
<table align="left" style="padding: 10px;">
<tr>
<td>
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/case-results.cfm"><strong>Results</strong></a>
</td>
</tr>
</table>
<table align="left" style="padding: 10px;">
<tr>
<td>
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/contact.cfm"><strong>Contacts</strong></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End of Homebase Links Table -->
</td>
</tr>
<!-- End of Homebase Row -->
<!-- Snipppet Row -->
<tr>
<td style="padding: 0px 20px" align="center">
<h2 style="font-family: Helvetica; font-size: 25px; text-align:left;">CASE RESULT: $1.5 Million for Rider Struck by Inattentive Driver</h2>
<a href="https://www.hupy.com/case_results/-1-5-million-for-rider-struck-by-inattentive-driver.cfm" target="blank">
<img class="fullIMG" src="https://image.ibb.co/eNfVbb/1_5mill.jpg" alt="$1.5 Million" style="width: 100%; height: auto; box-shadow: 3px 3px 5px rgba(165,42,42,.7)">
</a>
<p style="font-family: Helvetica; font-size: 16px; line-height: 24px; text-align:left;">In July 2017, our client and his wife were on a casual motorcycle ride in Waukesha County when the driver of a minivan failed to see their motorcycle and turned left in front of them. A terrible crash occurred and both occupants of the motorcycle were ejected. Find out what happened when Hupy and Abraham fought the insurance company to get a $1.5 million settlement.</p>
</td>
</tr>
<tr>
<td>
Click me
</td>
</tr>
<!-- End of Snippet Row -->
<!-- Facebook Fans Row -->
<tr>
<td>
<!-- Facebook Fans Table -->
<table align="center" style="padding: 20px 20px 0px 20px;">
<tr>
<td align="center">
<a href="https://www.facebook.com/HupyandAbraham/">
<img src="https://preview.ibb.co/e6mYUw/18000fans_tight.jpg" alt="18000fans" style="width: 85%; height: auto;">
</a>
</td>
</tr>
</table>
<!-- End of Facebook Fans Table -->
</td>
</tr>
<!-- End of Facebook Fans Row -->
<!-- Social Links Row -->
<tr>
<td>
<!-- Social Links Table -->
<table align="center" cellspacing="5" cellpadding="5" border="0">
<tr align="center">
<td align="center">
<a href="https://twitter.com/HupyandAbraham" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #1DA1F2);" alt="Twitter link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-twitter-96.png">
</a>
<a href="https://www.youtube.com/user/hupyandabrahamSC" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #ff0000);" alt="YouTube link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-youtube-96.png">
</a>
<a href="http://instagram.com/hupyandabraham" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #C32AA3);" alt="Instagram link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-instagram-96.png">
</a>
</td>
</tr>
<tr align="center">
<td>
<a href="https://www.pinterest.com/hupyandabraham/" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #BD081C);" alt="Pinterest link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-pinterest-96.png">
</a>
<a href="https://www.linkedin.com/company/hupy-&-abraham" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #007BB5);" alt="Pinterest link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-linkedin-96.png">
</a>
<a href="https://plus.google.com/+HupyandAbrahamSC" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #DB4437);" alt="Pinterest link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-googleplus-96.png">
</a>
</td>
</tr>
</table>
<!-- End of Social Links Table -->
</td>
</tr>
<!-- End Social Links Row -->
</td>
</tr>
</table>
<!-- End of white background table -->
</BODY>
</html>
Okay so here is a revised HTML email template.
First - you have to do a few things. Outlook is super secondary, but unfortunately people still use it. It's horrible.
So you account for that in quite a few ways - in the code and within the header. Luckily your email isn't TOO tricky, so there wasn't any real call for !mso in the body of the email.
Secondly - try to make your emails ALSO responsive. Remember that 75% of ALL email is read on a phone. Your email looked like a bit of a mashup. Not in a bad way.
The header links were lining all straight down on Outlook because you had EACH ONE in it's own table. Outlook interpreted that to be tables (obviously) and made each one 100% of the email width. If you place the links inside a table and then each one inside a <td> you will get better results.
lastly, there are some interesting shading things going on your email that may or may NOT work in all email clients. I left them but I'd be surprised if they did.
I'd say that you can probably take this code and place it into almost any ESP and it should work. You have to always be mindful of who you are coding emails for, and keep that in mind when it comes to how you design.
Good luck! There's lots more so if you have a question, go ahead and ask.
<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="date=no"/>
<meta name="format-detection" content="telephone=no"/>
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<title>Royal Caribbean - Advantage Program</title>
<style type="text/css">
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;
}
u + #body a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
#outlook a{
padding:0;
}
.ReadMsgBody{
width:100%;
}
body{
width:100% !important;
min-width:100%;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
-webkit-font-smoothing: antialiased;
}
v*{
behavior:url(#default#VML);
display:inline-block;
}
.ExternalClass{
width:100%;
}
td{
border-collapse: separate !important;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div{
line-height:100%;
}
a img{
border:none;
}
a {
text-decoration:none !important;
}
img{
display:block;
outline:none;
text-decoration:none;
border:none;
-ms-interpolation-mode: bicubic;
}
table{
border-spacing:0;
border-collapse:separate;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
table[class=full] {
width: 100%;
clear: both;
}
div {
padding: 0;
margin: 0;
}
p{
margin:0;
padding:0;
border:0;
font-size:100%;
line-height:1.4em;
font-family: Helvetica, Arial, sans-serif;
}
h1{
margin:0;
padding:0;
border:0;
font-size:100%;
line-height:1.4em;
font-family: Helvetica, Arial, sans-serif;
}
#wrappertable{
margin:0;
padding:0;
width:100% !important;
line-height:100% !important;
}
br[class=show]{
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
#media screen and (max-width:600px){
table{
width:100% !important;
}
table[class=content]{
width:95% !important;
}
td[class=hide]{
display: none !important;
max-height: 0px !important;
font-size: 0px !important;
overflow: hidden !important;
mso-hide: all !important;
width: 0 !important;
}
td[class=fullwidth]{
width:100% !important;
float:left !important;
}
/*replace image with mobile version*/
td#pic1 img{
content:url("") !important;
}
/*repeat ID as necessary*/
img[class=fullwidth]{
width:100% !important;
height:auto !important;
}
img[class=threequarters]{
float: none !important;
width: 75% !important;
height: auto !important;
margin: auto !important;
}
img[class=twothirds]{
float: none !important;
width: 66.6666% !important;
height: auto !important;
margin: auto !important;
}
img[class=halfwidth]{
float: none !important;
width: 50% !important;
height: auto !important;
margin: auto !important;
}
img[class=onethird]{
width: 33.3333% !important;
height: auto !important;
margin: auto !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
img[class=quarterwidth]{
width: 25% !important;
height: auto !important;
margin: auto !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
img[class=hide]{
display: none !important;
max-height: 0px !important;
font-size: 0px !important;
overflow: hidden !important;
mso-hide: all !important;
width: 0 !important;
}
div[class=fullwidth]{
max-width: 95% !important;
}
p,h1,h2[class=centered]{
text-align: center !important;
}
br[class=show]{
display: inline !important;
}
br[class=hide]{
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
span[class=hide]{
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
}
</style>
</head>
<body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" offset="0" bgcolor="#eeeeee" style="padding: 0 !important; margin:0 !important;">
<center>
<table width="100%" style="border-collapse:collapse; table-layout:fixed;" border="0" cellspacing="0" cellpadding="0" id="wrappertable">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0" width="620" bgcolor="#f9f9f9" style="box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.10);">
<tr>
<td width="618" align="center">
<!--THIS IS THE CONTENT TABLE-->
<table cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td align="center">
<p style="font-family: Arial, Helvetica, sans-serif; line-height: 20px"><i>We have collected <strong>MORE THAN $1 BILLION</strong> for thousands of clients.</i></p>
</td>
</tr>
<!--use empty rows for spacing-->
<tr><td height="20" style="line-height: 20px; font-size: 1px;"> </td></tr>
<tr>
<td align="center">
<img src="https://image.ibb.co/nai2NG/logo_tight.jpg" alt="Voted Best, Rated Vest" width="580" height="150" class="fullwidth"/>
</td>
</tr>
<tr>
<td align="center" height="40" style="line-height: 40px;">
<hr align="center" width="80%" size="1" noshade="noshade"/>
</td>
</tr>
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0" class="content" width="95%">
<tr>
<td class="fullwidth" align="center">
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/aboutus.cfm"><strong>About</strong></a>
</td>
<td class="fullwidth" align="center">
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px;text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/practice_areas/"><strong>Practice Areas</strong></a>
</td>
<td class="fullwidth" align="center">
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/library/"><strong>Legal Info</strong></a>
</td>
<td class="fullwidth" align="center">
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/case-results.cfm"><strong>Results</strong></a>
</td>
<td class="fullwidth" align="center">
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/contact.cfm"><strong>Contacts</strong></a>
</td>
</tr>
</table>
</td>
</tr>
<tr><td height="20" style="line-height: 20px; font-size: 1px;"> </td></tr>
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0" class="content" width="95%">
<tr>
<td align="center">
<h2 style="font-family: Helvetica; font-size: 25px; text-align:left; line-height: 32px;">CASE RESULT: $1.5 Million for Rider Struck by Inattentive Driver</h2>
</td>
</tr>
<tr><td height="10" style="line-height: 10px; font-size: 1px;"> </td></tr>
<tr>
<td align="center">
<a href="https://www.hupy.com/case_results/-1-5-million-for-rider-struck-by-inattentive-driver.cfm" target="blank">
<img src="https://image.ibb.co/eNfVbb/1_5mill.jpg" alt="$1.5 Million" width="580" height="325" style="box-shadow: 3px 3px 5px rgba(165,42,42,.7)" class="fullwidth">
</a>
</td>
</tr>
<tr><td height="10" style="line-height: 10px; font-size: 1px;"> </td></tr>
<tr>
<td align="left">
<p style="font-family: Helvetica; font-size: 16px; line-height: 24px; text-align:left;">In July 2017, our client and his wife were on a casual motorcycle ride in Waukesha County when the driver of a minivan failed to see their motorcycle and turned left in front of them. A terrible crash occurred and both occupants of the motorcycle were ejected. Find out what happened when Hupy and Abraham fought the insurance company to get a $1.5 million settlement.</p>
</td>
</tr>
<tr><td height="20" style="line-height: 20px; font-size: 1px;"> </td></tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<a href="https://www.facebook.com/HupyandAbraham/">
<img src="https://preview.ibb.co/e6mYUw/18000fans_tight.jpg" alt="18000fans" width="500" height="183" class="fullwidth">
</a>
</td>
</tr>
<tr><td height="20" style="line-height: 20px; font-size: 1px;"> </td></tr>
<tr>
<td align="center">
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center">
<a href="https://twitter.com/HupyandAbraham" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #1DA1F2); padding-left: 10px; padding-right: 10px;" alt="Twitter link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-twitter-96.png">
</a>
</td>
<td align="center">
<a href="https://www.youtube.com/user/hupyandabrahamSC" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #ff0000); padding-left: 10px; padding-right: 10px;" alt="YouTube link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-youtube-96.png">
</a>
</td>
<td align="center">
<a href="http://instagram.com/hupyandabraham" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #C32AA3); padding-left: 10px; padding-right: 10px;" alt="Instagram link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-instagram-96.png">
</a>
</td>
</tr>
<tr><td colspan="3" height="20" style="line-height: 20px;"> </td></tr>
<tr>
<td align="center">
<a href="https://www.pinterest.com/hupyandabraham/" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #BD081C); padding-left: 10px; padding-right: 10px;" alt="Pinterest link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-pinterest-96.png">
</a>
</td>
<td align="center">
<a href="https://www.linkedin.com/company/hupy-&-abraham" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #007BB5); padding-left: 10px; padding-right: 10px;" alt="Pinterest link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-linkedin-96.png">
</a>
</td>
<td align="center">
<a href="https://plus.google.com/+HupyandAbrahamSC" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #DB4437); padding-left: 10px; padding-right: 10px;" alt="Pinterest link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-googleplus-96.png">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
To make a table responsive, just add a media querie like that (direct child selector doesn't affect tables inside this table) :
Code
<table class="responsive-table">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
The media queries :
<style>
#media all and ( max-width: 600px ) {
.responsive-table, .responsive-table > tbody, .responsive-table > tbody > tr, .responsive-table > tbody > tr > td {
display: block !important;
width: 100% !important;
}
}
</style>
You can ajust for your needs
I'm working on a two-column reponsive email. Everything is appearing perfect except that I can't get the right border in one of my TDs to remove on mobile. I have the following style set:
td.copy { padding-right: 0px; border-bottom: 0; border-right: none; padding-bottom: 20px; }
Strangely, the bottom border is adding just fine.
Here is my code. Any help would be greatly appreciated. I can't figure this one out.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body { margin: 0px; padding: 0px; }
#media only screen and (max-width: 660px) {
table.view { width: 480px !important; }
table.container { width: 480px !important; }
table.left { width: 260px !important; }
table.right { width: 140px !important; }
td.design img { display: none; }
td.design { background: #FFF url(http://www3.poscorp.com/emarketing/market-growth/free-design-25-off-sm.gif) no-repeat;
height: 75px;
background-repeat: no-repeat !important;
background-position: center !important;
}
td.contact table { width: 100% !important; text-align: center;}
table.info p { text-align:center;}
table.copy { width: 480px !important; }
}
#media only screen and (max-width: 510px) {
table.view { width: 100% !important; }
table.container { width: 100% !important; }
table.left { width: 100% !important; margin-bottom: 10px; }
td.copy { padding-right: 0px; border-bottom: 0; border-right: none; padding-bottom: 20px; }
table.right { width: 100% !important; }
table.video td { padding-top: 15px; }
td.design img { display: none; }
td.design { background: #FFF url(http://www3.poscorp.com/emarketing/market-growth/free-design-25-off.gif) no-repeat;
height: 88px;
background-repeat: no-repeat !important;
background-position: center !important;
vertical-align: middle;
text-align: center; }
table.copy { width: 100% !important; }
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="view">
<tr>
<td align="right" valign="middle" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 10px; line-height:100%; color: #666; background: #FFF; padding: 8px 10px 8px 10px; vertical-align:middle;"><img src="http://www2.poscorp.com/images/addthis/16x16/email.png" alt="Forward Email" width="13" height="13" style="vertical-align: sub;"> Forward to a Friend | Email not displaying correctly? View it in your browser.</td>
</tr>
</table>
<table class="container" align="center" width="600" border="0" cellspacing="0" cellpadding="20" bgcolor="#FFFFFF" style="border:1px solid #CCC;">
<tr>
<td class="header" bgcolor="#ffffff" style="border-top: #00a160 solid 10px; padding: 20px 60px 20px 20px; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 27px; line-height:140%; color: #00a160; background: #FFF; ">When communicating with your patients, <span style="font-weight:bold;">consistency counts.</span></td>
</tr>
<tr>
<td class="content" bgcolor="#ffffff" style="font-family: Tahoma,Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; padding: 0px 20px 20px 20px;">
<table width="340" border="0" cellspacing="0" cellpadding="0" align="left" class="left" >
<tr>
<td class="copy" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; border-right: solid #00a160 1px; padding-right:20px;"><p style="margin-bottom: 15px; margin-top: 0px; padding-top: 0px; ">POS provides practices customized print and digital communication to ensure your brand stands out – and that it stays consistent from one communication solution to the next. From print and messaging to billing and surveying, our services help you deliver communications in the patient’s preferred way, increase practice revenue and improve patient satisfaction.</p>
<p style="margin-bottom: 15px; margin-top: 0px; padding-top: 0px; ">It's how you'll build loyalty while helping keep your patients healthy.</p>
<p style="margin-bottom: 15px; margin-top: 15px;">Print – With print services from POS, you’ll receive clarity, convenience and consistency – from your practice stationery to marketing materials.</p>
<p style="margin-bottom: 15px; margin-top: 15px;">Statement Processing & Patient Payment Services – POS provides solutions to improve your practice's profitability. We specialize in driving down the cost of collecting your patient-owed balances through our Statement Processing, Online Bill Pay and Past Due Notification solutions.</p>
<p style="margin-bottom: 15px; margin-top: 15px;">Digital Messaging – Our automated communication system, POS Messaging™, lets you send customized, two-way communication to your patients via email, phone, text or mail to help you reduce no-shows and more.</p>
<p style="margin-bottom: 0px; margin-top: 15px;">Patient Surveys – With POS Surveys™, you can find out what your patients like about your practice and what you can improve so they don’t leave.</p></td>
</tr>
</table>
<table width="200" border="0" cellspacing="0" cellpadding="0" align="right" class="right" >
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="video">
<tr>
<td style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; line-height:130%; color: #333; background: #FFF; border-bottom: 1px #00a160 solid;"><p style="margin-top:0px; margin-bottom: 15px; text-align:center;"><img src="http://www3.poscorp.com/emarketing/market-growth/blog-logo.gif" alt="POS Blog - Communicate" width="150" height="69"></p>
<p style="margin-top:0px; margin-bottom: 10px;">The blog for best practices in patient communication.</p>
<p style="margin-top:0px; margin-bottom: 20px;">JOIN NOW</p></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="promo">
<tr>
<td align="center" valign="middle" class="design"><p style="text-align:center; vertical-align:middle;" ><img src="http://www3.poscorp.com/emarketing/market-growth/free-design-25-off.gif" width="200" height="88" alt="Free Design and 25% a new print item"></p></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content" bgcolor="#ffffff" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; padding: 10px 20px 20px 20px;"><p style="margin: 0px; ">For more information, contact your Regional Territory Manager, <span style="font-weight:bold;">%%user_name%%</span> at <span style="font-weight:bold;">%%user_phone%%</span> or <span style="font-weight:bold;">%%user_email%%</span>.</p></td>
</tr>
<tr>
<td class="content" bgcolor="#ffffff" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; line-height:130%; color: #333; background: #FFF; padding: 0px 20px 0px 20px; text-align:center;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><p style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; padding: 5px 0px 5px 0px; border-top: #CCC solid 1px; border-bottom:#CCC solid 1px; text-align:center; letter-spacing: 1px;">PRINT <span style="color:#00a160;">|</span> STATEMENT PROCESSING <span style="color:#00a160;">|</span> DIGITAL MESSAGING <span style="color:#00a160;">|</span> PATIENT SURVEYS</p></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" class="contact" style="font-family: Arial, sans-serif; font-size: 14px; line-height:115%; color: #333; background: #FFF; padding: 20px 20px 20px 20px;">
<table width="275" border="0" cellspacing="0" cellpadding="0" align="left" class="logo">
<tr>
<td class="poslogo"><img src="http://www3.poscorp.com/emarketing/master/pos_logo_hc.gif" alt="POS Professional Office Services, Inc." width="272" height="45"></td>
</tr>
</table>
<table width="265" border="0" cellspacing="0" cellpadding="0" align="right" class="info">
<tr>
<td align="right"><p style="font-family: Tahoma, Arial, sans-serif; font-size: 13px; line-height: 100%; color: #333; font-weight:bold; margin:19px 0px 5px 0px;">800.331.4976 <span style="color:#00a160;">|</span> poscorp.com <span style="color:#00a160;">|</span> <img src="http://www3.poscorp.com/emarketing/master/linkedin.jpg" alt="LinkedIn" width="16" height="16" border="0" style="vertical-align:bottom;"/> <img src="http://www3.poscorp.com/emarketing/master/youtube.jpg" width="39" height="16" alt="YouTube" border="0" style="vertical-align:bottom;"></p></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="copy">
<tr>
<td bgcolor="#ffffff" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 10px; line-height:120%; color: #666; background: #FFF; padding: 10px 10px 10px 10px; border-top:1px solid #CCC;">
<p style="margin-top: 0px; margin-bottom:10px;"><span style="font-weight:bold;">Our mailing address is:</span> <br>
%%account_address%%</p>
<p style="margin-top: 10px; margin-bottom:0px;">update subscription preferences</p></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Did you add it to the media query?, dont forget !important.
I am trying to develop an HTML newsletter and I am experiencing problems with alignment. I have two adjacent cells ("week" and "03/2013" with different font-size and they should be align to the bottom. Tha standard solution which renders well in browsers doesn't render well in Outlook 2007. So I used a heuristic percent value to align the cells and this works in Outlook. But it's no surprise that it doesn't work in iPhone/iPad. Does anybody know how to make it work on both?
Thanks a lot
Here is my code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--[if gte mso 9]>
<style _tmplitem="50" >
.article-content ol, .article-content ul {
margin: 0 0 0 24px;
padding: 0;
list-style-position: inside;
}
</style>
<![endif]-->
<style type="text/css">
#media screen and (max-width: 610px) {
a[class=fabsize]{text-decoration:none;color:#00FF00}
}
.l-footer a {
color: #b2b2b2 !important; text-decoration: underline;
}
.l-footer a:link {
color: #b2b2b2 !important; text-decoration: underline;
}
.l-footer a:visited {
color: #b2b2b2; text-decoration: underline;
}
.l-footer a:hover {
color: #b2b2b2; text-decoration: underline;
}
.l-footer a:active {
color: #b2b2b2;text-decoration: underline;
}
</style>
</head>
<body>
<table id="background-table" border="0" cellpadding="0" cellspacing="0" width="100%" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td align="center" bgcolor="#FFFFFF" style="color: #6f6f6f; border: #6f6f6f;">
<!-- block preamble starts -->
<table class="l-preamble" border="0" cellpadding="0" cellspacing="0" width="600" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td class="has-border-bottom-1" height="16" width="600" style="color: #6f6f6f; border-bottom: 1px solid #6f6f6f;"></td>
</tr>
<!-- element preamble-info ends -->
<!-- element preamble-year starts -->
<tr>
<td class="has-border-bottom-5 w600" height="55" width="600" style="color: #6f6f6f; border-bottom: 5px solid #6f6f6f;">
<table border="0" cellpadding="0" cellspacing="0" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td class="w480 normal-text" height="29" width="474" border="1" style="color: #6f6f6f; font-size: 12px; line-height: 15px; border: #6f6f6f;"></td>
<td width="34" height="29" class="normal-text is-bold" style="vertical-align: bottom; color: #6f6f6f; font-weight: bold; border: #6f6f6f; font-size: 12px; line-height: 115%;" valign="bottom">WEEK</td>
<td width="91" height="29" class="header" style="vertical-align: bottom; text-align: right; letter-spacing: -0.04em; color: #6f6f6f; font-size: 22px; text-transform: uppercase; font-weight: bold; border: #6f6f6f;" align="right" valign="bottom">03 / 2013</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
try this one. basically, put those texts in the same cell instead of two.
<table border="0" cellpadding="0" cellspacing="0" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left;">
<tr>
<td height="29" width="474" style="color: #6f6f6f; font-size: 12px; line-height: 15px; border: #6f6f6f;"></td>
<td align="right" height="29" width="126" style="color: #6f6f6f; font-weight: bold; font-size: 12px; line-height: 115%;">WEEK <span style="letter-spacing: -0.04em; color: #6f6f6f; font-size: 22px; text-transform: uppercase; font-weight: bold;">03 / 2013</span></td>
</tr>
</table>
Try set line-height of "week" to font size from date. (line-height: 22px;)
<td width="34" height="29" class="normal-text is-bold" style="vertical-align: bottom; color: #6f6f6f; font-weight: bold; border: #6f6f6f; font-size: 12px; line-height: 22px;" valign="bottom">WEEK</td>
here: http://jsbin.com/anejax/1/
Or if u want all text aligned to bottom u have to set valign="bottom" in
<td class="has-border-bottom-5 w600" height="55" width="600" style="color: #6f6f6f; border-bottom: 5px solid #6f6f6f;" valign="bottom">
here: http://jsbin.com/ipafoh/1/
The title of the question says “to baseline”, but the text says “to the bottom”. And you are in fact using vertical-align: bottom.
I assume that you want baseline alignment. Then you should simply set vertical-align: baseline (and remove any code you might have added to try some heuristic – i.e., guesswork – adjustment to turn bottom alignment to baseline alignment).
In email always use the html valign="bottom" to align anything to the bottom of a table cell.
Example:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="100" width="300" valign="bottom" style="font-size:12px;" bgcolor="#959595">
cell 1
</td>
<td height="100" width="300" valign="bottom" style="font-size:18px;" bgcolor="#858585">
cell 2
</td>
</tr>
</table>