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.
Related
I have an email template with different block background colors, and because of this the colors are bleeding and creating lines between the blocks
I tried all the solutions I found and nothing worked, and after hours of digging I think the problem is that the nested tables are slightly shorter than their parent tables
here you can see the problem and what I mean by slightly shorter (the orange is showing and the white is within it, if it was the same height no orange will be showing):
and this is the code for one of the blocks:
<div>
<table
align="center"
border="0"
cellpadding="0"
cellspacing="0"
style="margin: 0; padding: 0; background:{$cordial-variable}; border-collapse: collapse;"
bgcolor="{$cordial-variable}"
width="100%"
>
<tr>
<td align="center" valign="top">
<table
width="700"
bgcolor="#fcfcfc"
border="0"
cellspacing="0"
cellpadding="0"
style="
mso-table-rspace: 0pt;
mso-table-lspace: 0pt;
border-collapse: collapse;
border: 0;
width: 100%;
height: auto;
padding: 0;
"
>
<tr>
<td align="center" valign="top">
<div>
<table
width="600"
border="0"
cellspacing="0"
cellpadding="0"
style="
mso-table-rspace: 0pt;
mso-table-lspace: 0pt;
border-collapse: collapse;
border: 0;
padding: 0;
width: 80%;
height: auto;
"
>
<tr>
<td style="35px" height="35"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
the things I tried: setting background color for all tables and tds, setting valign for all trs, changing the heights to even values instead of odd ones, setting the images with 0 line-height and font-size, setting the height to 100% instead of auto.
Any further suggestions?
To get a block a specific height, cross email compatible, you need only this:
<tr>
<td style="padding:35px 0 0 0;font-size:0;line-height: 0;"> </td>
</tr>
Note the which you don't have--some email clients will add that in and then use a default font-size or line-height on it.
The first <table> you have is fine: cellpadding, cellspacing and border are zeroed and that should be enough.
<div>s are not needed.
I've tried creating an email signature but whenever I paste it into outlook the padding for the bottom of the logo gets removed? I also tried adding margin instead but it still got deleted? The only way is to add a space in manually after, but I'm sure this is not a good practice?
Thanks
<div>
<td style="vertical-align: top;">
<table cellspacing="0" cellpadding="0" border="0" role="presentation" style="font-size: 0px;">
<tbody>
<tr>
<td style="vertical-align: top;"><div style="margin-right: 10px; width: 150px; border-radius: 0px; padding-bottom: 10px;">
<img src="https://s3.eu-central-1.amazonaws.com/mysigmail/upload/2019-04-29-hzc85zi6onw.png" alt="avatar" style="width: 150px; border-radius: 0px;">
</div>
Apply the padding to the parent td cell instead of the div
<table cellspacing="0" cellpadding="0" border="0" role="presentation">
<tr>
<td style="padding: 0 0 10px 0;">
** content **
</td>
</tr>
</table>
As a heads up:
Outlook 2013-2019 do not work with padding-top
apply the image width to the image. Outlook will ignore the width in style
border-radius does not work with Outlook
Good luck.
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.
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.