I am developing a newsletter template. Works well on Outlook2007 but on iPhone I still have some issues. With the following code I try to create a teaser block which contains an image and a text-block (made of a title and a text). In my intent, the text-block should not be higher than the image next to it. In iOS (Apple Mail) an annoying space is added between the title. Anyway idea about how to get rid of it?
<table border="0" cellpadding="0" cellspacing="0" class="teaser" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; cursor: pointer; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td class="w480 normal-text" height="29" width="92" border="1" valign="top" align="left" style="color: #6f6f6f; font-size: 12px; line-height: 15px; border: #6f6f6f;">
<img src='testImage.jpg' alt='' />
</td>
<td width="298" valign="top" style="color: #6f6f6f; border: #6f6f6f;">
<h1 style="font-family: arial; font-size: 12px; font-weight: bold; line-height: 15px; vertical-align: top; text-transform: uppercase; margin: 0px; padding: 0px;">
<a href="http://www.lyra.net/fabio" target="blank" style="color: #6f6f6f; line-height: inherit; text-decoration: none; position: relative; letter-spacing: 0.03em; top: -2px; margin: 0px; padding: 0px; border: 0px;">
Quias alitatem <br />qui cullat
</a>
</h1>
<p class="normal-text no-overflow" style="font-size: 12px; line-height: 15px; overflow: hidden; margin: 4px 0px 0px;">
WeeeeFFFFr? Quias alitatem qui cullat lique num et molor sitempo rionse.
</p>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td height="52" width="0" style="color: #6f6f6f; border: #6f6f6f;"></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
P.S. I see there are already similar posts, but as they didn't receive any interesting answer and the markup one uses also makes the difference I decided to post a new questions. I would also love to post screenshots of the problems but it is only possible with reputation > 10
On the table cell of the image, add this: valign="top". It will force the content to the top. In email this works consistently unlike css vertical-align.
Also, <h1> and <p> tags are best to avoid for consistency. <font> tags work best in email.
Related
I am trying to create a buttoon centered vertically in Outlook, I am using a code that another developer worked on, and trying to re-adapt it
in the code I am trying to set fixed values to avoid any issues but in outlook it displays extra space
in Outlook web, mobile, Gmail, browsers, etc, this is good and expected :
in Outloook Desktop :
This is the logic I am setting witgh my html code :
Border with 1 px and two spacers rows with 8px, and text container with line-height: 18px; ..
This is my HTML
<tr>
<td valign="middle" style="padding: 0px; vertical-align: middle;height:35px;" align="center" height="35">
<table
style="border-collapse: collapse; border-spacing: 0; -webkit-text-size-adjust: none;height:35px;"
cellspacing="0" cellpadding="0" border="0" height="35">
<tr>
<td valign="middle" border="1" class="borders" dir="ltr"
style="padding: 0px; vertical-align:middle; border: 1px solid #4E4E4E; border-image: none; width: 220px; height: 34px; text-align: center; color: #4B4B4B; text-transform: uppercase; text-decoration: none; vertical-align: middle; background-color: #EBEBEB;"
bgcolor="#303335" align="center" height="34">
<table
style="border-collapse: collapse; border-spacing: 0; -webkit-text-size-adjust: none;"
cellspacing="0" cellpadding="0" border="0">
<tr>
<td dir="ltr"
style="padding: 0px; border-image: none; width: 220px; height: 8px; text-align: center; color: #4B4B4B; text-transform: uppercase; text-decoration: none; background-color: #ffffff;vertical-align: middle;"
valign="middle" height="8" bgcolor="#ffffff" align="center">
</td>
</tr>
<tr>
<td dir="ltr"
style="padding: 0px; border-image: none; width: 220px; text-align: center; color: #4B4B4B; text-transform: uppercase; text-decoration: none; line-height: 18px; font-size: 15px; background-color: #EBEBEB;vertical-align: middle;"
valign="middle" bgcolor="#303335" align="center">
<a href="%%=RedirectTo(CONCAT( TreatAsContent(#contentblock_link), '&utm_clickposition=cta', TreatAsContent(#contentblock_link_anchor)))=%%"
style="color: #4B4B4B ; text-transform: uppercase; vertical-align: middle; line-height: 18px; letter-spacing: 0.5px; font-family: "HelveticaNeueLight", Helvetica, Arial, sans-serif; font-size: 15px; text-decoration: none; display: inline-block; ">%%=Field(#campaign_input_data,
concat(#contentblock, '_cta'))=%%</a>
</td>
</tr>
<tr>
<td dir="ltr"
style="padding: 0px; border-image: none; width: 220px; height: 8px; text-align: center; color: #4B4B4B; text-transform: uppercase; text-decoration: none; background-color: #ffffff;vertical-align: middle;"
valign="middle" height="8" bgcolor="#ffffff" align="center">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
It looks like your third row is expanding. I believe what is happening is Outlook is inserting a blank paragraph - though why that is not happening in the first row too is a mystery.
To ensure the right height for a blank row (in between the <td>'s), use the following construction:
<p style="margin:0;padding:0;font-size:8px;line-height:8px;"> </p>
Also ensure there are no spaces in between the <td>'s. I would use that on both the top and bottom row, for consistency. (Once you do this, you don't need the height: 8px; in the <td> style.)
I was wondering if it is possible to do the border with the same padding as the button above. The solution might seem like it is when I add the border to the td but I can not do that because in other client the border has border-radius which is not visible here. Any ideas? Thanks
code for the second button:
<!-- BUTTON -->
<table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="fluid"
role="presentation" width="600">
<tr>
<td align="center" bgcolor="#ffffff" style="padding: 0 0 40px 0;"
valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0"
class="main-button-mob-width" role="presentation"
style="max-width: 80%; min-width: auto;">
<tr>
<td align="center" bgcolor="#ffffff"
class="out-main-button-padding"
style="border-radius: 50px; padding: 0; font-family:
'Arial Black', Gadget, Arial,
Helvetica, sans-serif; font-size: 18px; font-weight: bold;
line-height: 22px; mso-text-raise: 4px;"
valign="top">
<a class="out-main-button-a"
href="#" style="display: block;
border-radius: 50px; background-color: #ffffff;
border: 3px solid #061539;
mso-border-alt: 8px solid #061539;
padding: 15px 35px 15px 35px; mso-padding-alt: 4px;
color: #061539; text-decoration: none;"
target="_blank" title="">
<span style="color: #061539; text-decoration: none;
background-color: #ffffff">INVITA A TUS AMIGOS
</span>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- BUTTON end -->
In Outlook you cannot change an inline element such as <a> to a block element (display:block). So it ignores padding, margins and such because these are block element styles.
Therefore, for cross-email compatibility, you either need to put padding on the <td> (which doesn't extend the clickable part, but only makes it look like the button is bigger, or, you can apply a hack as described by Mark Robbins.
Solution 1: (Easiest) TD button
<td align="center" bgcolor="#ffffff"
class="out-main-button-padding"
style="border-radius: 50px; padding: 15px 35px 15px 35px;
border-radius: 50px; background-color: #ffffff;
border: 3px solid #061539;
mso-border-alt: 8px solid #061539;
mso-padding-alt: 4px; font-family:
NIVEaBrandType-Bold, 'Arial Black', Gadget, Arial,
Helvetica, sans-serif; font-size: 18px; font-weight: bold;
line-height: 22px; mso-text-raise: 4px;"
valign="top">
<a class="out-main-button-a"
href="https://nivea.com" style="display: block;
color: #061539; text-decoration: none;"
target="_blank" title="">
<span style="color: #061539; text-decoration: none;
background-color: #ffffff">INVITA A TUS AMIGOS
</span>
</a>
</td>
All I've done is move the block-level styles from the <a> to the <td>. You can still leave the display:block on the <a> to make the clickable area bigger for those email clients that support this.
Solution 2: Mark Robbin's A button
<a href="https://example.com/" style="background: #333; border: 2px solid #f00; text-decoration: none; padding: 15px 25px; color: #fff; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#333"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:30pt" hidden> </i><![endif]--><span style="mso-text-raise:15pt;">Link Text</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%" hidden> </i><![endif]-->
</a>
Change the left and right padding by changing the letter-spacing value (on the left and right of the link text).
Change the bottom padding by changing the mso-text-raise value in the <span>.
Change the top padding by changing the mso-text-raise value in the <i>.
(Detailed explanation on https://www.goodemailcode.com/email-code/link-button)
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;
I have to style an email and when I was done and tested it all seemed to work fine, except in outlook.com, Microsoft exchange and Hotmail. For some reason exchange strips all code used (tables, tr & td tags) whatever I do, is there some workaround or is it just not possible? I have used CSS in my <style> tag. Should I change that to inline styling? or is there some other use.
Also my mail uses certain values (shortcodes) which are being given by the form, this works all fine in all other mail boxes but again not in outlook. If I can't use code there is there some workaround for that too?
So long story short, how can I use code in my html-email if Microsoft exchange breaks all code and gives a blank mail.
The entire mail you can see here on my test site
Here is my mail code:
<style>
td {
text-decoration: none;
color: #78797a;
width: 420px;
line-height: 22px;
border: 1px solid black;
}
img {
display:block;
}
h3 {
text-decoration: none;
color: #434343;
}
h4 {
text-decoration: none;
color: #434343;
}
-webkit-text-size-adjust: none;
</style>
<table style="font-size: 15px; font-family: 'Open Sans', sans-serif; font-weight: 200;">
<img src="http://www.belife.nl/wp-content/uploads/2015/06/belife-RGB.jpg" align="top"><br>
<h4>Verwijzend arts</h4>
<tr style="padding: 10px">
<td> Naam</td><td> [naam_vw]</td>
</tr>
<tr style="padding: 10px">
<td> Voorletters</td> <td>[voorletters_vw]</td>
</tr>
<tr style="padding: 10px">
<td> Geslacht</td> <td>[geslacht_vw]</td>
</tr>
<tr style="padding: 10px">
<td> Functie verwijzer:</td> <td>[verwijzer_vw]</td>
</tr>
<tr style="padding: 10px">
<td> Naam instantie:</td> <td>[instantie_vw]</td>
</tr>
<tr style="padding: 10px">
<td>Adres:</td> <td>[adres_vw]</td>
</tr>
<tr style="padding: 10px">
<td>Postcode:</td> <td>[postcode_vw]</td>
</tr>
<tr style="padding: 10px">
<td>AGB code verwijzer:</td> <td>[agb_vw]</td>
</tr>
<tr style="padding: 10px">
<td>Mobiel verwijzer:</td> <td>[mobiel_vw]</td>
</tr>
<tr style="padding: 10px">
<td>E-mail:</td> <td>[email_vw]</td>
</tr>
</table>
Shortcodes such as [email_vw] are the ones that are being given via the form which need to be in there.
Any tips and answers are appreciated thanks in advance!
EDIT * I was able to fix outlook myself but now Hotmail is for some reason empty and shows just plain code, would this be caused by the code being inline? *
Well after some searching and reading #tvgemert's article link I was able to fix outlook.
<!DOCTYPE html>
<html>
<head></head>
<body>
<table style="font-size: 15px; font-family: 'Open Sans', sans-serif; font-weight: 200;">
<img src="http://www.belife.nl/wp-content/uploads/2015/06/belife-RGB.jpg" align="top" style="display: block;"><br><h3 style="text-decoration: none; color: #434343;">Met deze brief verwijs ik onderstaande client naar u voor een programma medische specialistische revalidatiezorg (MSR) bij BeLife.</h3>
<h4 style="text-decoration: none; color: #434343;">Verwijzend arts</h4>
<tr style="padding: 10px;">
<td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;"> Naam</td>
<td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;"> [naam_vw]</td>
</tr>
<tr style="padding: 10px;">
<td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;"> Voorletters</td> <td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;">[voorletters_vw]</td>
</tr>
<tr style="padding: 10px;">
<td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;"> Geslacht</td> <td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;">[geslacht_vw]</td>
</tr>
</table>
This has fixed outlook at the least by adding inline code the email is now no longer blank.
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>