I have a recurrent issue with Outlook email rendering, gaps appear in the email
It looks like lines between the table and the color of the background doesn't apply
Here is an example :
email screenshot
I know this is an issue that is common but I couldn't find a solution with the search bar
Here is some code :
<table class="responsive-table" border="0" cellspacing="0" cellpadding="0" align="center" width="650" bgcolor="#ffffff">
<tbody>
<tr>
<td align="center" >
<img src="picto-Certifie-BIO.png" alt="Certifie BIO" width="100" height="100" />
</td>
<td style="background-color: #ffffff;" width="15">
</td>
<td align="center" >
<img src="picto-Anti-gaspi.png" alt="Anti gaspi" width="100" height="100" />
</td>
<td style="background-color: #ffffff;" width="15">
</td>
<td align="center" >
<img src="picto-Clean-et-naturel.png" alt="Clean et naturel" width="100" height="100" />
</td>
<td style="background-color: #ffffff;" width="15">
</td>
<td align="center" >
<img src="Picto-Fait-en-France.png" alt="Fait en France" width="100" height="100" />
</td>
</tr>
</tbody>
</table>
Thank you for your help,
Hind
I'm sharing here what I found out it case someone needs it:
The issue was with the tables height, so I had to find ways to reduce the height of the tables surrounding the ones with the gaps.
Here is a link that helped me (in French)
https://www.badsender.com/2019/05/28/bug-daffichage-sur-outlook-2016/
Related
I'm trying to make a template on MailChimp, but I can't style it properly. There are a few caveats though: the CSS styles have to be in-line and it has to be structured as <table> tags.
This is what I have so far
This is the end-goal
Here is my code so far:
<section id="header" style="background-color: #148e97;">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="600" id="emailHeader">
<tr>
<td align="right" valign="">
<div class="socialMediaIcons">
<img src="img/facebook.png"/>
<img src="img/twitter.png"/>
<img src="img/mail.png"/>
<img src="img/linkedin.png"/>
</div>
</td>
</tr>
</table>
<table id="title" width="500">
<tr>
<td align="left" valign="">
<img src="img/logo.png"/>
</td>
<td style="">
<h1 style="text-align: right; "
style="font-family: arial;">Brand USA E-News -- April 2016</h1>
</td>
</tr>
</table>
</td>
</tr>
</table>
</section>
When creating HTML emails, you need to transport yourself back in time, to a time when Internet Explorer 6 was cool.
You cannot use <section id="header"> or class="socialMediaIcons" because not all email clients support the <style> tag. HTML5 elements are most unsupported, and your CSS needs to be inlined and used with the style="..." attribute. There's a lot of mixed support for CSS in email clients, so you're forced to cater for the lowest common denominator.
The following code gives you a starting point for how to create your layout:
<html>
<body style="margin: 0; padding:0">
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#fff">
<tr>
<td valign="center">
<div style="background-color: #148e97; width:660px; margin:auto;">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="660" bgcolor="#148e97">
<tr>
<td width="30">
<img src="http://placehold.it/1x1" width="30" alt="Spacer">
</td>
<td width="130">
<img src="http://placehold.it/130x115" alt="Logo">
</td>
<td valign="top" width="500">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="500">
<tr>
<td>
<img src="http://placehold.it/1x1" width="1" height="20" alt="Spacer">
</td>
</tr>
<tr>
<td align="right">
<div class="socialMediaIcons">
<img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
<img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
<img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
<img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" />
</div>
</td>
</tr>
<tr>
<td align="right">
<h1 style="text-align: right; font-family: arial; color: #fff;">Brand USA E-News -- April 2016</h1>
</td>
</tr>
</table>
</td>
<td width="30"><img src="http://placehold.it/1x1" width="30" alt="Spacer"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
One thing you'll notice is there are a lot of <table> tags in other <table> tags inside even more <table> tags. Things get messy.
I've used the old school technique of spacer.gif (using http://placehold.it/1x1 in lieu of a 1x1.gif image), which is no longer needed these days when building websites.
Hopefully this code sets you on the right path. I haven't built HTML emails for 5+ years, so I'm a little rusty.
I am trying to create a "cool" email signature for my company using only text and html with NO images whatsoever. I am trying to recreate our company's logo using only tables since it is basically a four cell table with different bg colors. What seemed easy at first has become quite a nuisance. It obviously looks good in browsers but once I paste it into Outlook 2013 the cells don't retain their height and width values. Any suggestions on how to make this work across most current email clients??
http://codepen.io/anon/pen/wqaLm
Firstly, a good technique is to style your cells inline like:
<td style="width:10px; height:10px;">
Secondly: have a look at this article: "A complete breakdown of the CSS support for every popular mobile, web and desktop email client"
Here is a basic example. Not sure exactly what the logo looks like, so here are a few versions. If you want to have the gap between the cells smaller than 20px, you need to use the 3rd technique. This is because Outlook has a min-height on cells of around 19px which will create a larger gap between the rows.
<table width="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" height="50" bgcolor="#333333">
</td>
<td width="50" height="50" bgcolor="#555555">
</td>
</tr>
<tr>
<td width="50" height="50" bgcolor="#444444">
</td>
<td width="50" height="50" bgcolor="#666666">
</td>
</tr>
</table>
<br><br>
<table width="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="40" height="40" bgcolor="#333333">
</td>
<td width="20" height="40">
</td>
<td width="40" height="40" bgcolor="#555555">
</td>
</tr>
<tr>
<td width="40" height="20">
</td>
<td width="20" height="20">
</td>
<td width="40" height="20">
</td>
</tr>
<tr>
<td width="40" height="40" bgcolor="#444444">
</td>
<td width="20" height="40">
</td>
<td width="40" height="40" bgcolor="#666666">
</td>
</tr>
</table>
<br><br>
<table width="60" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="30" height="30" align="left" valign="top">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#333333">
</td>
</tr>
</table>
</td>
<td width="30" height="30" align="right" valign="top">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#555555">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="30" height="30" align="left" valign="bottom">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#444444">
</td>
</tr>
</table>
</td>
<td width="30" height="30" align="right" valign="bottom">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#666666">
</td>
</tr>
</table>
</td>
</tr>
</table>
I am trying to create an email template like following. I have used table. I am able to do everything except the image is not displayed at proper position. The images should be displayed in middle and on top of the container(see screen 1), but I am not able accomplished it. I have tried to provide negative margin to container, but gmail and other mail services are ignoring the negative margin.
Here's what I was able to accomplishd till so far.
The code is present here. Can anyone please help with this?
Updated answer:
You can't use negative margin in html email. To mimic this, there are 2 ways to do it, the nested tables way and the more complex rowspan way:
<!-- The nested way -->
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"><!-- coloring the whole table instead of just the cells you want, will stop gaps forming on forwarding from Outlook -->
<tr>
<td width="200" height="80" bgcolor="#007700">
<table width="100%" height="80" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td height="40" bgcolor="#CCCCCC">
</td>
</tr>
</table>
</td>
<td width="100" height="80" bgcolor="#4444FF">
<img alt="" src="" width="100" height="80" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td width="200" height="80" bgcolor="#FFFFFF">
<table width="100%" height="80" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td height="40" bgcolor="#CCCCCC">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="500" height="200" colspan="3">
</td>
</tr>
</table>
<br><br>
<!-- The fancy rowspan way -->
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"><!-- coloring the whole table instead of just the cells you want, will stop gaps forming on forwarding from Outlook -->
<tr>
<td width="200" height="40" bgcolor="#FFFFFF">
</td>
<td width="100" height="80" rowspan="2" bgcolor="#4444FF">
<img alt="" src="" width="100" height="80" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td width="200" height="40" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td width="200" height="40">
</td>
<td width="200" height="40">
</td>
</tr>
<tr>
<td width="500" height="200" colspan="3">
</td>
</tr>
</table>
Original answer:
For basic positioning:
Horizontally, use align="left|center|right", vertically use valign="top|middle|bottom"
Here is how to place an image center top of a table:
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td height="500" align="center" valign="top">
<img alt="" src="" width="100" height="100" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
</table>
As I said:
If it was me i would make the top border and the image a row. – Alex
Thomas 23 mins ago
Change you top row to:
<td valign="bottom">
<b style="border-top-left-radius:5px; background-color:#fff; display:block; border:3px solid #a3a9ac; border-bottom:0; height:100%; margin:0; padding-bottom:20px; border-right:none;"> </b>
</td>
<td class="text-center" width="64">
<img class="top-image" src="https://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/64/gmail.png"> </td>
<td valign="bottom">
<b style="border-top-right-radius:5px; background-color:#fff; display:block; border:3px solid #a3a9ac; border-bottom:0; height:100%; margin:0; padding-bottom:20px; border-left:none;"> </b>
</td>
check out the result - http://jsfiddle.net/562ux.
I've not tested this in a email Client, but as #Kheema Pandey says, you should try to use inline styles.
It is a good practice to use inline style while creating newsletter. Also outlook doesn't support margin negative property.
in your case the image is not appear center so you can use a inline style here 'style="text-align:center;"'.
<td style="text-align:center;">
<img class="top-image" src="https://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/64/gmail.png" />
</td>
I made a newsletter, but whenever I (or the client) zoom in or out it messes up the proportions. I wasn't able to fix it, nor find (enough) helpful information on how to solve this.
Here's an example: http://fiddle.jshell.net/nmK6R/
Try to play with the zoom (Ctrl -) to see what's wrong. notice the top left section:
Notice that (at least in my PC) at 100% Zoom the proportions are great but either zoom in or out messes it up.
More than fixing the problem I would like to understand it better-
What is happening when I zoom in/out that makes the proportions change- why some elements change differently than others- I feel that if I truly understand how this works- more than fixing this mailer's problem i'll be able to this problem in further newsletters.
So Even if you won't solve this problem but explain me how zooming works- I might be able to solve it myself- it's just that I don't know what's happening so I don't know what's need to be fixed :p
I thank you for your help.
As requested, here's the (simplified ) code:
<table id="Table_01" width="872" height="500" border="0" cellpadding="0" cellspacing="0" dir="rtl" style="margin: auto;">
<tbody><tr>
<td>
<img style="border:0; display:block;" src="http://newsletter.pwizard.com/upload/account_86/template/images/newslettter-boz-new3_01.jpg" width="871" height="39" alt="">
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td bgcolor="f8ebbe">
<img width="61" style="border:0; display:block;" src="http://newsletter.pwizard.com/upload/pix.gif">
</td>
<td bgcolor="9e7641">
<img width="25" style="border:0; display:block;" src="http://newsletter.pwizard.com/upload/pix.gif">
</td>
<td bgcolor="f5f2e3">
<img width="23" style="border:0; display:block;" src="http://newsletter.pwizard.com/upload/pix.gif">
<td bgcolor="red">
<img width="651" style="border:0; display:block;" src="http://newsletter.pwizard.com/upload/pix.gif">
<td bgcolor="f5f2e3">
<img width="26" style="border:0; display:block;" src="http://newsletter.pwizard.com/upload/pix.gif">
</td>
<td bgcolor="9e7641">
<img width="27" style="border:0; display:block;" src="http://newsletter.pwizard.com/upload/pix.gif">
</td>
<td bgcolor="f8ebbe">
<img width="58" style="border:0; display:block;" src="http://newsletter.pwizard.com/upload/pix.gif">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
I am having trouble making a rounded button with images.. the button displays fine in a browser but inside an email client (this includes yahoo and gmail) the button breaks..
here is the HTML table code that i am using:
<table width="144" cellpadding="0" cellspacing="0" border="0" style="background-color: #9C084A">
<tr>
<td width="12"><img src="http://thehotdeal.net/clients/1/padma/1.gif" width="12" height="12" border="0" alt="...">
</td>
<td width="130"></td>
<td width="12">
<img src="http://thehotdeal.net/clients/1/padma/2.gif" width="12" height="12" border="0" alt="...">
</td>
</tr>
<tr>
<td cellpadding="0" cellspacing="0" border="0"></td>
<td align="center">
<p style="padding: 0"> <span mc:edit="date" style="color: #ffffff;">2012 - $25</span></p>
</td>
<td cellpadding="0" cellspacing="0" border="0"></td>
</tr>
<tr>
<td>
<img src="http://thehotdeal.net/clients/1/padma/3.gif" width="12" height="12" border="0" alt="...">
</td>
<td cellpadding="0" cellspacing="0" border="0"></td>
<td>
<img src="http://thehotdeal.net/clients/1/padma/4.gif" width="12" height="12" border="0" alt="...">
</td>
</tr>
</table>
Here is how this looks.. notice a line below it..!
There are a few elements could be altered to make this render better cross client:
display:block; on your images
put your background color on each td individually using bgcolor="#9C084A"
explicitly set width and height on each td
use valign on your images if need be
Here is the jsfiddle with these alterations - http://jsfiddle.net/X5QTR/