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.
Related
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/
Hi I am trying to send an html in an Email.(Support related stuff)
Problem is that it is working fine on my local notepad.
LINKEDIN image is right on its place.
But when I send this html in gmail mail to user by my backend system (storing html in wso2 local entry point) then this LINKEDIN Icon move a little up.
Also Link of youtube video is also showing as attachment.
How can I solve this?
<tbody>
<tr>
<td style="text-align:center;padding:0px 0px">
<table align="center" bgcolor="#505050" border="0" cellpadding="0" cellspacing="0" style="max-width:650px;margin:auto;text-align:center" width="100%">
<tbody>
<tr>
<td align="center" style="text-align:center">
<img height="10%" width="5%" border="0" src="http://twitter-256.png" style="display:inline-block;padding:0px 8px"/>
<img height="6%" width="5% border=" src="http://facebooklogo.png" style="display:inline-block;padding:0px 8px"/>
<a href="https://youtube.com/mysitelink" ><img height="10%" width="5%" border="0" src="http://youtube.png" style="padding-top:100px:display:inline-block;padding:0px 8px"/></a>
<img height="20%" width="7%" border="0" src="http://Linkedin.png" style="position: relative;top: 12px;display:inline-block;padding:0px 6px"/>
</td>
</tr>
<tr>
<td align="center" style="text-align:center">
<p style="letter-spacing:3px;font-size:12px;margin:0;line-height:18px;text-align:center;font-family:'Nunito Sans',Arial,Verdana,Helvetica,sans-serif;color:#bababa;padding:20px 30px">
<span>CONTACT US</span>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
You were missing Semicolon in your styling and also you had a top: 12px; that was causing your linked in to be out of positioning just copy and paste my code I altered for you.
I Hope I was able to help!
<tbody>
<tr>
<td style="text-align:center;padding:0px 0px">
<table align="center" bgcolor="#505050" border="0" cellpadding="0" cellspacing="0" style="max-width:650px;margin:auto;text-align:center" width="100%">
<tbody>
<tr>
<td align="center" style="text-align:center">
<a href="https://twitter.com/mysitelink" target="_blank">
<img height="auto" width="5%" border="0" src="http://twitter-256.png" style="display:inline-block;padding:0px 8px;"/></a>
<a href="https://facebook.com/mysitelink" target="_blank">
<img height="auto" width="5%" border="0" src="http://facebooklogo.png" style="display:inline-block; padding:0px 8px;"/></a>
<a href="https://youtube.com/mysitelink" target="_blank" >
<img height="auto" width="5%" border="0" src="http://youtube.png" style="display:inline-block; padding:0px 8px;"/></a>
<a href="https://linkedin.com/mysitelink" target="_blank">
<img height="auto" width="5%" border="0" src="http://Linkedin.png" style="display:inline-block;padding:0px 8px;"/></a>
</td>
</tr>
<tr>
<td align="center" style="text-align:center">
<p style="letter-spacing:3px;font-size:12px;margin:0;line-height:18px;text-align:center;font-family:'Nunito Sans',Arial,Verdana,Helvetica,sans-serif;color:#bababa;padding:20px 30px">
<span>CONTACT US</span>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
I've visited frequently for answers to my HTML problems, but this one has me stumped. I have tested the email backwards and forwards in Litmus, and it looks great in everything, but I had one colleague say that a copy that she received in her personal Gmail (using Chrome) always has a 1 pixel line between slices 2 + 3. I've picked apart the HTML character by character and cannot find a difference that would cause this line to only insert itself between these two slices, and none of the others.
A sample is posted below;
<tr>
<td align="center" valign="top">
<a href="http://sample.com" target="_blank">
<img src="http://Events_02.jpg" width="600" height="155" alt="Text1" style="display:block;" border="0"/>
</a>
</td>
</tr>
<tr>
<td align="center" valign="top">
<a href="http://sample.com" target="_blank">
<img src="http://Events_03.jpg" width="600" height="146" alt="Text2" style="display:block;" border="0"/>
</a>
</td>
</tr>
<tr>
<td align="center" valign="top">
<a href="http://sample.com" target="_blank">
<img src="http://Events_04.jpg" width="600" height="177" alt="Text3" style="display:block;" border="0"/>
</a>
</td>
</tr>
please have a look on the snippet i have created , this may help you.
Thanks
<html>
<head>
<title></title>
<style type="text/css">
body,table {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<a href="http://sample.com" target="_blank">
<img src="http://placehold.it/600x155" width="600" height="155" alt="Text1" style="display:block;" border="0"/>
</a>
</td>
</tr>
<tr>
<td align="center" valign="top">
<a href="http://sample.com" target="_blank">
<img src="http://placehold.it/600x155" width="600" height="146" alt="Text2" style="display:block;" border="0"/>
</a>
</td>
</tr>
<tr>
<td align="center" valign="top">
<a href="http://sample.com" target="_blank">
<img src="http://placehold.it/600x155" width="600" height="177" alt="Text3" style="display:block;" border="0"/>
</a>
</td>
</tr>
</table>
</body>
</html>
I have written this code and want to know if this is a good solution to have a table inside a li tag as I have 2 tables ? And I dont want to show li bullet in front of my table.
Here is my code:
<ul id="widget_update">
<li id="Fahrzeuge"><img src="arrow.png" alt="move" width="16" height="16" class="handle" />
<table width="538" cellspacing="0" cellpadding="0" border="0" >
<tr>
<td id="fahrzeuge">
</td>
</tr>
</table>
</li>
<li id="NEWS"><img src="arrow.png" alt="move" width="16" height="16" class="handle" />
<table width="538" cellspacing="0" cellpadding="0" border="0">
<tr>
<td id="news">
</td>
</tr>
</table>
</li>
</ul>
You can use divs in this case which will remove the bullets automatically and no css fixes will be required. Fiddle
<div id="widget_update">
<div id="Fahrzeuge"><img src="https://lh3.googleusercontent.com/-SWOcB8HK24k/AAAAAAAAAAI/AAAAAAAAAAA/idI3VNCg4KI/photo.jpg" alt="move" width="16" height="16" class="handle" />
<table width="538" cellspacing="0" cellpadding="0" border="0" >
<tr>
<td id="fahrzeuge">
</td>
</tr>
</table>
</div>
<div id="NEWS"><img src="https://lh3.googleusercontent.com/-SWOcB8HK24k/AAAAAAAAAAI/AAAAAAAAAAA/idI3VNCg4KI/photo.jpg" alt="move" width="16" height="16" class="handle" />
<table width="538" cellspacing="0" cellpadding="0" border="0">
<tr>
<td id="news">
</td>
</tr>
</table>
</div>
</div>
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>