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
Related
I am creating the header shown below for an email template. As you can see, the text is slightly offset from the center of the email. This happens because I have two table cells: one for the logo and another for the text. I can center the text within its cell, but that cell isn't 100% of the width due to the the logo cell taking up 74 pixels. I can shift the header to the left using margin-left in most email clients, but Outlook and Gmail both don't support margins, and I need to support both clients. How can I go about getting the text centered in Outlook and Gmail?
<body style="padding:0; margin:0">
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; padding-top: 25px;" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; min-height:76px;" width="600px" class="100p">
<tr>
<td background="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" bgcolor="#39B491" width="600px" valign="top" class="100p">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:76px;">
<v:fill type="tile" src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" color="#39B491" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="100p">
<tr>
<td width="74px" align="center" style="padding-top: 10px;">
<div style="width:44px">
<img src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/my-id-care-logo.png" height="52px" width="44px" class="100p" />
</div>
</td>
<td width="*%" align="center">
<h3 style="color: white; font-size: 14px; margin: 0px; margin-left: -44px; margin-top: 10px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">Welcome to MyIDCare</font></h3>
<h1 style="color: white; font-size: 20px; margin: 0px; margin-left: -44px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">LET'S GET STARTED</font></h1>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Took me a little while to understand your question but i think i got it. You want to center the text within the outer table regardless of the logo being there, right? If thats a yes, then its just a matter of adding another 74px block on the right of the text.
Have a look at the code to see what i did:
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; padding-top: 25px;" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; min-height:76px;" width="600px" class="100p">
<tr>
<td background="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" bgcolor="#39B491" width="600px" valign="top" class="100p">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:76px;">
<v:fill type="tile" src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" color="#39B491" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="100p">
<tr>
<td width="74px" align="center" style="padding-top: 10px;">
<div style="width:44px">
<img src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/my-id-care-logo.png" height="52px" width="44px" class="100p" />
</div>
</td>
<td width="*%" align="center">
<h3 style="color: white; font-size: 14px; margin: 0px; margin-top: 10px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">Welcome to MyIDCare</font></h3>
<h1 style="color: white; font-size: 20px; margin: 0px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">LET'S GET STARTED</font></h1>
</td>
<td width="74px" align="center">
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
Cheers
I have created a custom email template and the content is below :
...
<table id="Table_01" width="70%" border="0" cellpadding="0" cellspacing="0" style=" backgroud:red;border-collapse: collapse;border-spacing: 0;">
<tr>
<td valign="top">
<img style="display:block; border: 0px;width:100%;" src="images/01.png" alt="">
</td>
</tr>
<tr>
<td valign="top">
<table id="Table_02" width="100%" border="0" cellpadding="0" cellspacing="0" style=" border-collapse: collapse;border-spacing: 0;">
<tr>
<td>
<img style="display:block; border: 0px;width:100%;" src="images/02_01.png" alt="">
</td>
<td >
<img style="display:block; border: 0px;width:100%;" src="images/02_03.png" alt="">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top">
<img style="display:block; border: 0px;width:100%;" src="images/03.png" alt="">
</td>
</tr>
</table>
...
Above code created a table with three tr and it is showing properly in desktop but in mobile devices showing some spacing.
As above image table showing red line spacing in mobile devices.
How to remove these spacing?
**It helps to include a few CSS resets in the <head> of the email.**Here are a few that I use the focus on resetting spacing and borders of <table>s and <td>s:
<head>
<style>
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
</style>
</head>
Here is the full CSS reset I use for emails.
I'm trying to get rid of these white lines that iPhone users are seeing in these emails. This can be reproduced by viewing the email in chrome when re-sizing the browser. Whether the white lines appear or not depends on the size of the window. It only happens to the image slices of the left-most data-cell in a table-row.
Here is the code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<title></title>
<style type="text/css">
/***START, CSS targeting client bugs***/
body {
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
/* Prevents Webkit and Windows Mobile platforms from changing default font sizes. */
}
.ExternalClass {
width: 100%;
/* Forces Hotmail to display emails at full width */
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
/* Forces Hotmail to display normal line spacing */
}
body {
margin: 0;
padding: 0;
/* Resets all body margins and padding to 0 for good measure */
}
p {
margin: 1em 0;
}
table td {
border-collapse: collapse;
/*This resolves the Outlook 07, 10, and Gmail td padding issue */
}
#-ms-viewport {
width: device-width;
}
/***END, CSS targeting client bugs***/
/***START, Reset styles***/
p {
margin: 0;
padding: 0;
margin-bottom: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: black;
line-height: 100%;
}
/***END, Reset styles***/
#media only screen and (max-width: 480px) {
a[href^="tel"],
a[href^="sms"] {
text-decoration: underline;
color: #0063ba;
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"],
.mobile_link a[href^="sms"] {
text-decoration: underline;
color: #0063ba !important;
pointer-events: auto;
cursor: default;
}
body {
overflow-x: hidden !important;
text-align: center !important;
background-color: #ffffff !important;
}
body[yahoo] .container {
width: 320px !important;
display: block !important;
}
body[yahoo] .drop {
width: 100% !important;
display: block !important;
text-align: center !important;
padding: 2px 0 !important;
}
body[yahoo] .hide_this {
display: none !important;
}
body[yahoo] .respond_to_width {
width: 100% !important;
display: block !important;
}
body[yahoo] .mobile_image {
width: 100% !important;
height: auto !important;
}
body[yahoo] .pushto100 {
width: 100% !important;
}
body[yahoo] .centerthis {
text-align: center !important;
display: inline-block !important;
}
}
</style>
</head>
<custom name="opencounter" type="tracking">
<body style="margin: 0px; padding:0px; -webkit-text-size-adjust:none; -ms-text-size-adjust: none;" yahoo="fix">
<!--CENTER EMAIL_start-->
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="respond_to_width">
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="left" valign="top" style="font-size:11px;font-family:arial,sans-serif;color:#333333;padding:10px 0;">
Click to view this message in a browser
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="640" class="respond_to_width">
<tr>
<td colspan="2" align="left" valign="top">
<a conversion="TRUE" alias="body_header" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/84aa6e6.png" width="640" height="143" alt="email header" title="start shopping"></a>
</td>
</tr>
<tr>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone1" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/87ba827.png" width="321" height="192" alt="clickzone 1" title="shop Halloween costmes"></a>
</td>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone2" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/8b26eb0.png" width="319" height="192" alt="clickzone 2" title="shop Halloween costmes"></a>
</td>
</tr>
<tr>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone3" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/8c23711.png" width="321" height="159" alt="clickzone 3"></a>
</td>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone4" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/8d3de4a.png" width="319" height="159" alt="clickzone 4" title="shop Halloween costmes"></a>
</td>
</tr>
<tr>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone5" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/8e4baa8.png" width="321" height="191" alt="clickzone 5" title="shop Halloween costmes"></a>
</td>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone6" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/9053862.png" width="319" height="191" alt="clickzone 6" title="shop Halloween costmes"></a>
</td>
</tr>
<tr>
<td colspan="2" align="left" valign="top">
<a conversion="TRUE" alias="body_footer" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/9226e55.png" width="640" height="181" alt="email footer" title="contact us, etc"></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top" style="font-size:0%;padding:10px 0 0 0;display:none;">
%%=ContentAreaByName("Divider_Green")=%%
</td>
</tr>
<!--SOCIAL BUTTONS/-->
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top">
FaceBook
</td>
<td align="left" valign="top"> | </td>
<td align="left" valign="top">
<a href="https://plus.google.com/" alias="Google+" target="_blank">
Google+
</a>
</td>
<td align="left" valign="top"> | </td>
<td align="left" valign="top">
<a href="https://instagram.com/" alias="Instagram" target="_blank">
InstaGram
</a>
</td>
<td align="left" valign="top"> | </td>
<td align="left" valign="top">
<a href="http://www.pinterest.com/" alias="Pinterest" target="_blank">
Pintrest
</a>
</td>
<td align="left" valign="top"> | </td>
<td align="left" valign="top">
<a href="https://twitter.com/" alias="Twitter" target="_blank">
Twitter
</a>
</td>
</tr>
</table>
</td>
</tr>
<!--EMAIL, PHONE NUMBER/-->
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="drop" align="left" valign="top" style="font-size:14px;font-family:arial,sans-serif;color:#6ebe43;padding:0 20px 0 0;">
customerservice#arbitraryLink.com
<span style="font-size:14px;font-family:arial,sans-serif;color:#000001">
| 1.888.777.6666
</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td class="drop" align="center" valign="middle">
<!--CTA BUTTON/-->
<br>
<br>
<table cellpadding="0" cellspacing="0" border="0" class="pushto100">
<tr>
<td align="left" valign="middle" style="padding:0 10px">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="center" valign="top" style="font-size:12px;color:#88ab00;font-family:arial,sans-serif;font-weight:bold;">
<span style="text-decoration: none;color:#88ab00;">
sign up for emails</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--<br><br>-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="640" align="center" valign="top" style="font-size:11px;font-family:arial,sans-serif;color:#6ebe43;padding:16px 4px;">
<span style="color:#333333; width:640px;">
*Terms and conditions apply
<br><br>
This email was sent by: %%member_busname%%, %%member_addr%% %%member_city%%, %%member_state%% %%member_postalcode%% %%member_country%%</span>
<br>
<span style="color:#333333;">
This email was sent to: <strong>%%emailaddr%%</strong></span><span style="color:#333333;">. We respect your right to privacy -</span> privacy policy
<br>
<br>
One-Click Unsubscribe
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--CENTER EMAIL_end-->
%%[ var #additionalattribute1, #additionalattribute2, #additionalattribute3, #additionalattribute4 Set #additionalattribute1 = __AdditionalEmailAttribute1 Set #additionalattribute2 = __AdditionalEmailAttribute2 Set #additionalattribute3 = __AdditionalEmailAttribute3 Set #additionalattribute4 = __AdditionalEmailAttribute4 ]%%
<img src="http://track.securedopen-q.com/?sv_cid=0215_01811&sv_emopen=true&sv_svem=%%emailaddr%%&cm_source=tracking_pixel_stuff" height="1" width="1" />
</body>
</html>
You can see the white lines in my jFiddle when resizing the browser in chrome. http://jsfiddle.net/stormbloom/4s0sqkbb/
Please ignore the AMP script unless you think in could be causing rendering problems (which I doubt). I just left it in there so you can see what the entirety of the code looks like.
I discovered if I add an in-line style: outline 1px solid #f00; to the table, it fixes the white line issue. The problem is that many email clients do not support outline, but they add a space where outline is being used. So it causes the table you target to have a noticeable white space in that email client.
To fix this issue and only target iphone and devices using webkit is to create a class called .iphone and add it to a media query which targets iPhone 5, 6 and 6 plus.
#media only screen and (max-width: 414px) {
.iphone {
outline: 1px solid #f00;
}
Add the class "iphone" to the table with the white line issue. This fixes the white line issue and only shows on devices that can work with that media query. This tested with Litmus and with observing on the actual devices.
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>
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.