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.
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 have been digging all over and experimenting with different attributes, but I am still no closer to getting Outlook (v2005) to respect <td> cell height. I have a simple table being used through Gravity forms in Wordpress which is handling all the overhead. The <td> is set o have the mso-line-height-rule line height and font size as mentioned several times elsewhere, but comes out as below.
<table border="0" cellpadding="0" cellspacing="0" width="80px" width="80" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tbody>
<tr>
<td style="background-color: red; height: 30px; font-size: 30px; mso-line-height-rule: exactly; line-height: 30px; padding: 0 !important; margin: 0 !important;" height="30">
Hello
</td>
</tr>
<tbody>
</table>
If anyone could help it would be greatly appreciated.
Screenshot of Outlook version:
In a nutshell I'm using exact target content builder, I uploaded the code into litmus, and of course Outlook 07,10,13 isn't recognizing width 100%. I have attached a screen shot as well as the snippet please assist.
<table width="100%" cellspacing="0" cellpadding="0"><tr><td align="center"><img data-assetid="35955" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/0edcfa8c-25ad-4b12-8d69-501bde9332ef.jpg" alt="Grocery Discounts" height="45" width="900" style="height:45px;width:900px;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center;"></td></tr></table>
Stack overflow wouldnt allow me to paste the code as well.The offending line was 296. You or the platform had placed a 10px padding around the two column block (extra virgin & long grain one). Once you remove it then it works.
Snippet:
<table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper"><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td class="responsive-td" valign="top" style="width: 50%;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td align="center"><a href="http://click.email-nyaaa.com/?qs=76462b8de2999fa51b1a05d5c4c618fd5281691fac5b7c3f7f4da37bd7753344423cf6706940a6d23b98ebbb0d4e4c1b0b0b92b83edc3e7a" title="" data-linkto="https://">
<img data-assetid="35860" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/bf2a32d2-c271-4dd0-88d4-fa1ed13a0668.jpg" alt="$1.00 off California Olive Ranch Olive Oil / $1.00 off Lundberg Family Farms Organic Brown Rice" height="auto" width="100%" style="height:auto;width:100%;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center; font-size: 13px;"></a></td></tr></tbody></table></td></tr></tbody></table></td><td class="responsive-td" valign="top" style="width: 50%;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td align="center">
<a href="http://click.email-nyaaa.com/?qs=76462b8de2999fa51b1a05d5c4c618fd5281691fac5b7c3f7f4da37bd7753344423cf6706940a6d23b98ebbb0d4e4c1b0b0b92b83edc3e7a" title="" data-linkto="https://">
<img data-assetid="35987" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/3877ff31-7a70-4583-8af9-8cf78ef2032d.jpg" alt="$1.00 off V8 Original Vegetable Juice & Naked Juice Smoothie" height="auto" width="100%" style="height:auto;width:100%;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center;"></a></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>
You can replace that code on your template or copy the code from fiddle that is in the comment.
Here is the result of the fix.
Cheers
Outlook doesn't really like width="100%" and it doesn't like inline CSS. So set your width on the image to width="920" and in style, keep the width:100%; which other browsers will use.
This is the table as an example:
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center">
<img data-assetid="35864" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/b1be6e76-4a9f-4e7a-89cc-5adf22373d62.jpg" alt="View your current grocery savings" height="auto" width="920" style="height:auto;width:100%;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-align: center;">
</td>
</tr>
</tbody>
</table>
I should add that your hero image is 900 pixels, which is 100 pixels wider than some email clients like Outlook and Gmail really support. Keep that in mind if you're having issues with other email clients.
You should look at your emails on an iPhone because it's a mess. The same with AOL. In every desktop email client, you have alignment issues with the Discounts Rewards banner.
Good luck.
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 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.