Is it safe to use position:absolute in a email template?
Depends on which mail clients your users are using. Outlook for example handles position: absolute well, Thunderbird on the other hand doesn't.
I would try designing your mail-template as "normal" as possible. Tables help a lot for example (yuck).
See the following page about styling tips on HTML mails, including some position absolute advice:
Style In Email
Adding to an old question, I know - but I can confirm that neither GMail supports position: absolute at the moment.
it is not a safe manner to use position absolute in emailers,because all of the email server did'nt support the tag..instead using postion absolute you guys can use
<table width="100%" align="center" style="Margin:0px; Padding:0px; border-collapse:collapse; background-color:rgb(255,255,255);max-width:600px;" border="0" cellspacing="0" cellpadding="20" background="http://wallpapercave.com/wp/BGGdOwY.jpg">
<tbody>
<tr>
<td align="left" valign="top">
<p Style="Margin-top:45px; text-align:left; line-height: 24px; letter-spacing: 0.55px; Margin-bottom:10px; font-family:'Open Sans',arial,sans-serif!important; width: 540px;">Dear Artist/Vendor,</p>
<p Style="text-align:justify; line-height: 24px; letter-spacing: 0.55px; Margin-top:10px; Margin-bottom:10px; font-family:'Open Sans',arial,sans-serif!important; width: 540px;">We've received a request to reset your password. If you didn't make the request, just ignore this email. Otherwise, you can reset your password using this link:</p>
</td>
</tr>
</tbody>
</table>
even you guys can use clickable button on it by adding this code in another td
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width" >
<title></title>
</head>
<body style="Margin:0px; Padding:0px;">
<table width="100%" align="center" style="Margin:0px; Padding:0px; border-collapse:collapse; background-color:rgb(255,255,255);" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top">
<table width="100%" align="center" style="Margin:0px; Padding:0px; border-collapse:collapse; background-color:rgb(255,255,255);max-width:600px;" border="0" cellspacing="0" cellpadding="20" background="http://wallpapercave.com/wp/BGGdOwY.jpg">
<tbody>
<tr>
<td align="center" valign="top">
<table width="100%" align="center" style="Margin:0px auto; Padding:0px; border-collapse:n-left: 20px; max-width:600px; " border="0" cellspacing="0" cellpadding="0" >
<tbody>
<tr>
<td align="left" valign="top">
<p Style="Margin-top:45px; text-align:left; line-height: 24px; letter-spacing: 0.55px; Margin-bottom:10px; font-family:'Open Sans',arial,sans-serif!important; width: 540px;">Dear Artist/Vendor,</p>
<p Style="text-align:justify; line-height: 24px; letter-spacing: 0.55px; Margin-top:10px; Margin-bottom:10px; font-family:'Open Sans',arial,sans-serif!important; width: 540px;">We've received a request to reset your password. If you didn't make the request, just ignore this email. Otherwise, you can reset your password using this link:</p>
</td>
</tr>
</tbody>
</table>
<table width="100%" align="left" style="Margin:0px auto; Padding:0px; border-collapse:collapse; max-width:600px; Margin-left: 20px; Margin-top:15px;" border="0" cellspacing="0" cellpadding="0" >
<tbody>
<tr>
<td align="left" valign="top">
Reset Your Password
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
enter code here
According to Style in Email, neither AOL (before release 9) nor Mozilla Mail/ThunderBird (all versions) support absolute positioning in the email body.
absolute in css not working for HTML email.
If you gonna use absolute for Image combination, you can use such style.
background-image: url(url_to_your_image);
Hope it will help you.
Related
How can I solve the Outlook problem in my custom html template. What I currently have:
<table cellpadding="0" cellspacing="0" width="700" align="center">
<tr>
<td style="width:100%;display:block;" align="left">
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://" style="height:40px;v-text-anchor:middle;width:170px;" strokecolor="#ce162e" fillcolor="#ffffff">
<w:anchorlock/>
<center>
<singleline label='Button Title'>Read More</singleline>
</center>
</v:rect>
<![endif]-->
<a href="https://" style="border:2px solid red;text-decoration:none;">
<singleline label="Button Title">Read More</singleline>
</a></td>
</tr>
</table>
If an outlook mail client opens the mail, I can see the CTA, but if I edit the CTA text in the editor in Campaign Monitor, the changes only apply to non-Outlook mail clients. Is there a way to solve that problem?
Many thanks in advance.
Bests,
Yanick
Since you are using custom email template, you can replace your VML button with the one below. This button will work the same across all email clients. It will eliminate the issue you are facing in campaign monitor as well.
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 0px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> Call to action </td>
</tr>
</table>
I have created an email template that is tested to work properly on desktop clients like gmail/yahoo/outlook and also tested correct responsive behavior on mobile gmail app. I am using Android/Galaxy S4.
The responsive styles are not effective on yahoo mobile app. Infact, it is not reading the CSS rules from 'style'. Though, desktop chrome set to mobile views (using Inspect -> toggle device toolbar) and logging in to yahoo mail shows the email reading the responsive styles.
Question: Does yahoo mobile app not support responsiveness? Or, does it particularly need additional hacks?
Update:
I tried moving the CSS styles from head to body. It then reads the styles. But having styles in the body may not to be a good idea, gmail mobile app now ignores it.
Here is the email code that I am using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample Page</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<style>
body {
mso-line-height-rule:exactly;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%}
table, td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt}
table {
border-collapse: collapse;
border-spacing: 0;margin: 0 auto}
img, a img {
border:0 none;
height: auto;
line-height: 100%;
outline: none;
-ms-interpolation-mode: bicubic}
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}
.x-gmail-data-detectors, .x-gmail-data-detectors *, .aBn {
border-bottom: 0 !important;
cursor: default !important}
.a6S {
display:none !important;
opacity:0.01 !important}
img.g-img + div {
display:none !important}
.button-link {
text-decoration: none !important}
#media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
.ios-gm-fix {
min-width: 375px !important;}
}
</style>
<style>
#email-container {
border:1px solid #CCC;
border-radius:3px;
border-collapse:separate}
.desktop-view {color:blue}
.mobile-view {color:#444}
#media only screen and (max-width: 480px) {
#email-container-wrap {
width:100% !important;
padding:0 !important}
#email-container {
border:none;border-radius:0}
.desktop-view {color:#444}
.mobile-view {color:blue}
#email-contents {
padding:15px 22px !important;
font-size:16px!important}
}
</style>
</head>
<body width="100%" bgcolor="#FFFFFF" style="margin:0 auto;padding:0;height:100%">
<center style="width=100%;background=#ffffff">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#F0F0F0" class="ios-gm-fix" style="margin:0;width:100%;line-height:100%"><tbody>
<tr>
<td align="center" valign="top" width="100%" style="padding:0;margin:0;height:100%;width:100%">
<div id="email-container-wrap" style="width:600px;max-width:600px;padding:25px 0;margin:0 auto">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" id="email-container" style="background-color:#ffffff"><tbody>
<tr>
<td align="center" valign="top" width="100%" id="email-contents" style="font-family:arial,helvetica,sans-serif;font-size:13px;line-height:18px;color:#333333;padding:20px 35px">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%"><tbody>
<tr>
<td align="center" valign="top" width="100%" id="email-header">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%"><tbody>
<tr>
<td align="left" valign="top" width="100%"></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="center" valign="top" width="100%" id="email-body">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td align="left" valign="top" width="100%">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%"><tbody>
<tr>
<td align="left" valign="top" width="100%" class="desktop-view" style="padding:3px 0 16px">
<span>On Desktop, there will be a border and gray background on all sides.</span>
</td>
</tr>
<tr>
<td align="left" valign="top" width="100%" class="mobile-view" style="padding:3px 0 16px">
<span>On Mobile, the border and background will not exist.</span>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" width="100%" id="email-footer">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%"><tbody>
<tr>
<td align="left" valign="top" width="100%">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>
</td>
</tr>
</tbody></table>
</center>
</body>
</html>
On Android, Yahoo only supports <style> tags in the <body>, not in the <head>. But Gmail only supports <style> tags in the <head>, not in the <body>. C'est la vie!
Since we're only dealing with ~20 lines of code (assuming the 2nd <style> tag in your example), you might try duplicating this <style> tag so it appears in both the <head> and <body>. I don't know for certain if this will work, but it's worth testing.
Yahoo! Mail app for Android removes the first head element, causing media queries in the element to have no chance of being applied. A workaround is adding an empty head element before the original one so that the app will only remove the empty one.
Please see this article for details: Double Head trick in Yahoo Mail App for Android
I have developed an email template. Everything is working fine in my email template except the hr tag in Outlook 2013.
I have attached images
Result which i am getting:
Result which i want:
Please help me with suitable codes.
The <hr> is inconsistently supported in email clients. It's easier to do a horizontal rule in email by using a <table> tag, something like this:
<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="background:black; height:1px;>
<tr>
<td style="font-size:0; line-height:0;">
</td>
</tr>
</table>
It might seem like a lot of code for simple <hr>, but you'll get the best email client coverage by using <table>s.
In my case, the layout showed strange horizontal lines on Outlook 2010-2019.
To avoid that, this code works for me:
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="100%" >
<tr width="100%">
<td width="100%" style="width: 100%; border-top: 1px solid #ffffff; padding-bottom: 1px;">
</td>
</tr>
</table>
<![endif]-->
<!--[if !mso]><!-->
<hr align="left" style="border: 0px; border-top: 1px solid #ffffff; color: #ffffff; background: #ffffff; margin: 0px;"/>
<!--<![endif]-->
An alternative to using <hr> in email clients is the following, which produces a similar effect, i.e., a thin horizontal line:
<div style="background: #d9d9d9; font-size: 1px; line-height: 1px;"> </div>
This has been verified to render properly in Outlook 2016, but should also work in 2013.
Sometimes when I sent emails I receive answers stating that my email was empty. It seems very random and so far I have not been able to reconstruct this problem (have tested it on Gmail, Yahoo, AOL, Outlook, Mozilla Thunderbird, ... to no avail). It seems that only my email signature and/or sometimes also just the beginning of my email is displayed.
I've checked for font problems and problems within the html code of the mail, etc.
Where should I start?
Here's some sample code of the template I use that seems to create this error at random:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
...
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if !mso]>
<!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
<![endif]-->
<style>
html, body{
margin: 0;
padding: 0;
}
</style>
</head>
<body style="width: 100%; margin: 0;">
<table bgcolor="#0568a6" border="0" style="background-color:#0568a6;border-collapse:collapse;border:0;margin:0;padding:0;width:100%">
<tbody>
<tr>
<td style="width:100%;max-width:600px;margin:0 auto">
<div style="display:block;width:98%;max-width:588px;margin:0 auto;padding:3px 1%;background-color:#0568a6">
<table bgcolor="#0568A6" align="center" style="background-color:#0568a6;border-collapse: collapse;border:0;margin:0;padding:0;width:100%">
<!--[if mso]>
<table align="center" bgcolor="#0568A6" width="588" style="background-color:#0568a6;border-collapse:collapse;border:0;margin:0;padding:0;width:588px">
<![endif]-->
<tbody>
<tr>
<td style="display:block;width:100%;max-width:588px;margin:0 auto;padding:0;background-color:#0568a6">
<img src="logo.jpg" alt="Logo" width="125" height="26" border="0" align="right" style="float: right;border:0px !important" />
</td>
</tr>
</tbody>
<!--[if mso]>
</table>
<![endif]-->
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table style="width: 100%; border-collapse: collapse;" align="center" border="0">
<tbody>
<tr>
<td style="display: block; max-width: 600px; margin: 0 auto; clear: both;">
<div style="display: block; width:98%; max-width: 588px; margin: 0 auto; padding:35px 1% 28px; color: #111111;">
<table style="border-collapse: collapse; width: 100%;">
<!--[if mso]>
<table align="center" width="588" style="border-collapse: collapse;">
<![endif]-->
<tbody>
<tr>
<td style="padding: 0px 0px 4px 0px; width: 100%; max-width: 588px;">
<p style="font-family:Verdana,Geneva,sans-serif; color: #222222; margin-bottom: 15px; font-weight: normal; font-size: 13pt; line-height: 1.25;">
Content
</p>
</td>
</tr>
<!--[if mso]>
</table>
<![endif]-->
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table style="border-collapse: collapse; width: 100%;" align="center" bgcolor="#efefef" border="0">
<tbody>
<tr>
<td style="display: block; max-width: 600px; margin: 0 auto; clear: both;">
<div style="display: block; max-width: 588px;width:98%; margin: 0 auto; padding: 6px 1% 16px;">
<table style="border-collapse: collapse; width: 100%;" bgcolor="#efefef">
<!--[if mso]>
<table align="center" bgcolor="#efefef" width="588" style="border-collapse: collapse;">
<![endif]-->
<tbody>
<tr>
<td style="padding: 0px 0px 4px 0px; width: 100%; max-width: 588px;">
<p style="font-size: 8.5pt; color: #999999;font-family:Verdana,Geneva,sans-serif; line-height: 1.2; border: 0;">
Footer
<br>
<br>
<a target="_blank" href="%UNSUBSCRIBELINK%" style="font-size: 8.5pt; color: #278ac8 !important; line-height: 1.2; text-decoration: none; border: 0;font-family:Verdana,Geneva,sans-serif;">
<span style="color: #278ac8; text-decoration: none;">
CLICK TO UNSUBSCRIBE
</span>
</a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I found the answer to this problem. It seems to be a bug in (earlier) versions of IE (who guessed it...).
The key part of the problem is the 1% padding right and left in the DIV element that serves as a container.
<body style="width: 100%; margin: 0;">
<table bgcolor="#0568a6" border="0" style="background-color:#0568a6;border-collapse:collapse;border:0;margin:0;padding:0;width:100%">
<tbody>
<tr>
<td style="width:100%;max-width:600px;margin:0 auto">
// this DIV has right and left padding of 1% which causes a bug in IE
<div style="display:block;width:98%;max-width:588px;margin:0 auto;padding:3px 1%;background-color:#0568a6">
<table bgcolor="#0568A6" align="center" style="background-color:#0568a6;border-collapse: collapse;border:0;margin:0;padding:0;width:100%">
<!--[if mso]>
... and so on
The result was that in some mail clients (Gmail, AOL, Comcast, maybe some others) the container of the message was rendered with a HUGE width (approx. 100,000px, for no obvious reason of course) of which the padding took ca. 1000px on each side.
As the content was centered, it was simply out of view for the person opening the message (no normal person has such a wide screen)
I replaced the 1% padding with a 3px padding and that solved the problem.
Below is a screen shot to show the problem, rendered in IE8. The solution is to change the padding as described above.
Unfortunately the program I use to send out email does not allow for #media queries nor .css lists at the top of said code. This is problematic seeing as I am building an email template based around floating columns. I would like for the two columns to be next to one another while viewing on a tablet or desktop, but have the list drop underneath the content panel while viewing on a mobile device.
Here is the base of what I have:
<div style="width: 100%; max-width: 650px; margin-left: auto; margin-right: auto;">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="1" style="width: 100%;">
--banner image here--
</td>
</tr>
</tbody>
</table>
<table style="width: 100%;">
<tbody>
<tr>
<td align="left" valign="top" width="320px;" style="padding-left: 10px; padding-right: 10px;">
--content goes here--
</td>
<td align="left" valign="top" width="180px;" style="padding-left: 10px; padding-right: 10px;">
--list of links--
</td>
</tr>
</tbody>
</table>
</div>
It's doable. Without media queries you will be limited to how involved you get. This would work well if your columns were of equal width. I'm not sure how your design is, but without a media query it will be challenging to make even columns. Here is some roughed out HTML to get you going.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 650px;">
<tr>
<td width="650">
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="1" style="width: 100%;"> --banner image here-- </td>
</tr>
</table>
<table align="left" width="320">
<tr>
<td align="left" valign="top" width="320" bgcolor="#00CC99" style="padding-left: 10px; padding-right: 10px;"> --content goes here-- </td>
</tr>
</table>
<table align="left" width="180">
<tr>
<td align="left" valign="top" width="180" bgcolor="#99CC33" style="padding-left: 10px; padding-right: 10px;"> --list of links-- </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>