I have some problem with my e-mail campaign.
I made all my boxes with correct width, height attribute, also made the img line-height to 0.1em and display them as block, so the question is on. What is this?
Every suggestion will be honored. Thanks.
<table width="594" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td width="25" align="left" valign="top"></td>
<td width="269" align="left" valign="bottom">
<h1>{TITLE}</h1>
<h2>{HOTEL} {HOTELCATEGORY}</h2>
<p>{ROOM}</p>
<p>{ACCOM}</p>
<p>{START}</p>
<p>{DATESTART} - {DATEEND}</p>
<p>{DAYS} nap, {NIGHTS} éjszaka</p>
<table border="0" cellpadding="0" cellspacing="0" width="230" height="67">
<tr height="11">
<td width="80" height="11" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_tl.png" width="80" height="11"></td>
<td width="117" height="11" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_t.png" width="117" height="11"></td>
<td width="33" height="11" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_tr.png" width="33" height="11"></td>
</tr>
<tr height="40">
<td width="80" height="40" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_l.png" width="80" height="40"></td>
<td width="117" height="40" align="center" valign="middle" bgcolor="#444444"><b class="priceboxb" style="margin: 0; padding: 0;">{PRICE}{CURRENCY}</b><span class="priceboxspan" style="margin: 0; padding: 0;">/fõ</span></td>
<td width="33" height="40" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_r.png" width="33" height="40"></td>
</tr>
<tr height="16">
<td width="80" height="16" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_bl.png" width="80" height="16"></td>
<td width="117" height="16" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_b.png" width="117" height="16"></td>
<td width="33" height="16" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/l_01_br.png" width="33" height="16"></td>
</tr>
</table>
</td>
<td width="300" align="right" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="10" height="11" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_tl.png"></td>
<td width="278" height="11" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_t.png"></td>
<td width="12" height="11" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_tr.png"></td>
</tr>
<tr>
<td width="10" height="192" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_l.png"></td>
<td width="278" height="192" class="imageholder"><img src="{IMGSRC}" width="278" height="192" class="image" style="width: 278pt; height: 192pt; border:0; margin:0; padding:0;"></td>
<td width="12" height="192" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_r.png"></td>
</tr>
<tr>
<td width="10" height="12" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_bl.png"></td>
<td width="278" height="12" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_b.png"></td>
<td width="12" height="12" align="left" valign="top"><img src="http://site.com/nwsltrv2/img/b_01_br.png"></td>
</tr>
</table>
</td>
<td width="0" align="left" valign="top"></td>
</tr>
</tbody></table>
Looks like three pixels. What happens if you make the images that make up the label display: block; ?
Or take a look at this answer: 3px extra height on a div with an image inside it
Related
I'm making a mailing html page and my social buttons keep having some kind of margin that I can't work away. I posted my code and a fiddle below so you can see where I'm stuck.
https://jsfiddle.net/zh78uc9s/
CODE:
<td rowspan="10" style="text-align: left" valign="top" width="auto" border="0" cellspacing="0" cellpadding="0">
<!--Social media knopkes en links-->
<table width="25px" height="100px" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="25" height="25"><img src="elementen/Spacer25.gif" width="25" height="25" border="0" cellspacing="0" cellpadding="0" alt="spacerke" /></td>
</tr>
<tr>
<td width="25" height="25">
<img src="elementen/facebook.gif" width="25" height="25" border="0" cellspacing="0" cellpadding="0" alt="facebook" />
</td>
</tr>
<tr>
<td width="25" height="25">
<img src="elementen/youtube.gif" width="25" height="25" border="0" cellspacing="0" cellpadding="0" alt="youtube" />
</td>
</tr>
<tr>
<td width="25" height="25">
<img src="elementen/linkedin.gif" width="25" height="25" border="0" cellspacing="0" cellpadding="0" alt="linkedin" />
</td>
</tr>
<tr>
<td width="25" height="25">
<img src="elementen/twitter.gif" width="25" height="25" border="0" cellspacing="0" cellpadding="0" alt="twitter" />
</td>
</tr>
</tbody>
</table>
</td>
The margin between each social buttons seams a td's style setting, try with
td {
display: inline-block;
}
JsFiddle
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>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="100%" height="131" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="570" height="131">
<img title="header_agado_zg_lv.jpg" alt="header_agado_zg_lv.jpg" border="0" src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_zg_lv.jpg" width="570" height="131">
</td>
<td>
<table width="130" height="131" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img title="header_agado_zg_ds1.jpg" alt="header_agado_zg_ds1.jpg" src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_zg_ds1.jpg" width="130" height="19" border="0"></td>
</tr>
<tr style="height: 25px;">
<td style="height: 25px;"><img src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_zg_ds2.jpg" width="130" height="25" border="0"></td>
</tr>
<tr>
<td><img title="header_agado_zg_ds3.jpg" alt="header_agado_zg_ds3.jpg" src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_zg_ds3.jpg" width="130" height="12" border="0"></td>
</tr>
<tr>
<td><img src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_zg_ds4.jpg" width="130" height="25" border="0"></td>
</tr>
<tr>
<td><img title="header_agado_zg_ds5.jpg" alt="header_agado_zg_ds5.jpg" src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_zg_ds5.jpg" width="130" height="12" border="0"></td>
</tr>
<tr>
<td><img src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_zg_ds6.jpg" width="130" height="25" border="0"></td>
</tr>
<tr>
<td><img title="header_agado_zg_ds7.jpg" alt="header_agado_zg_ds7.jpg" src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_zg_ds7.jpg" width="130" height="13" border="0"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img title="header_agado_sp.jpg" alt="header_agado_sp.jpg" src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_sp.jpg" width="700" height="152"></td>
</tr>
</table>
</tr>
</table>!
Gmail:
Browser:
Why does the page appear different in Gmail to how it appears in a browser? How can I solve this problem?
Add Inline style to each image tag in email :
For example:
<img title="header_agado_zg_lv.jpg" alt="header_agado_zg_lv.jpg" border="0" src="http://em.agadomarketing.com/admin/temp/user/2/header_agado_zg_lv.jpg" width="570" height="131" style='border: none; display:block;' />
In short style='border: none; display:block;'
<table width="33%" border="0" border-spacing: 0px; cellpadding="0" cellspacing="0">
<tr>
<td colspan="4"><img src="01.png" width="619" height="143" " /></td>
</tr>
<tr>
<td height="13" valign="top"><img 02.png" width="75" height="13" /></td>
<td width="32%" valign="top"><img src="03.png" width="200" height="13" /></td>
<td width="56%" colspan="2" valign="top"><04.png" width="344" height="13" /></td>
</tr>
<tr>
<td colspan="4" valign="top"><img 05.png" width="619" height="150" /></td>
</tr>
<tr>
<td colspan="4" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="85%"><img src="06.png" width="474" height="28" /></td>
<td width="11%"><img src="07.png" width="71" height="28" /></td>
<td width="4%"><img src="08.png" width="74" height="28" /></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="4" valign="top"><img src="09.png" width="619" height="144" /></td>
</tr>
<tr>
<td colspan="4" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="76%" height="32"><img src="10.png" width="474" height="32"/></td>
<td width="12%"><img src="11.png" width="71" height="32"/></td>
<td width="12%"><img src="12.png" width="74" height="32"/></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="4" valign="top"><img src="13.png" width="619" height="140" /></td>
</tr>
<tr>
<td colspan="4" valign="top"><table width="99%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="76%"><img src="14.png" width="474" height="36"/></td>
<td width="12%"><img src="15.png" width="71" height="36" /></td>
<td width="12%"><img src="16.png" width="74" height="36"/></td>
</tr>
</table></td>
</tr>
<tr>
<td height="109" colspan="4" rowspan="2" valign="top"><img 19.png" width="619" /></td>
</tr>
</table>
I have this code in my email template. When I compile it on my local page, it works fine, but when I send it though email, gaps are appearing in between the lines and tables. I tried this also
<style>
table { border-spacing: 0px; }
</style>
But not worked. Anybody know about this issue?
Or how I should print it in php? so that it sends as an image in email. Because after receiving an email, when I forward it, then its shows me correct because it become an image. So I am thinking to make it as an image before shooting email in the script. But how can I print this html in php?
<table ... border-spacing: 0px; ...>
This isn't valid markup. border-spacing would be put within a style property:
<table ... style="border-spacing: 0px;" ...>
To remove the spacing, you'd simply add:
table {
border-collapse: collapse;
}
try this
<table cellspacing="0" cellpadding="0">
</table>
I have this email creative. The bottom box is placed ok on ff and chrome, but in IE it's getting a bit weird.
What do I need to add/remove from my code in order for the bottom box to appear correctly?
Thanks.
here is the code:
<title></title>
<style type="text/css">
p
{
margin: 0px;
padding: 0px;
text-align: right;
}
a:link
{
color: #990000;
text-decoration: none;
}
a:visited
{
text-decoration: none;
color: #990000;
}
a:hover
{
text-decoration: none;
color: #990000;
}
img
{
border: none;
}
body{
margin:0px;
}
</style>
<div style="text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 13px;background-color: #EEF3FA">
<div style="text-align: right; font-family: Arial, Helvetica, sans-serif; font-size: 13px;background-color: #FFF;width: 720px;margin: 0px auto;">
<br />
<table align="center" border="0" cellpadding="4" cellspacing="0" dir="rtl" width="700">
<tbody>
<tr>
<td colspan="3">
<img src="Images/head.jpg" style="margin-bottom: 10px;" /></td>
</tr>
<tr>
<td colspan="3" style="border:2px #060">
<img src="Images/tophaedr1.jpg" style="margin-bottom: 10px;margin-right:23px;" /></td>
</tr>
</table>
<table align="center" border="0" cellpadding="4" cellspacing="0" dir="rtl" width="700" style="margin-right:17px;">
<!-- right -->
<tr>
<td valign="top" width="156" height="500">
<table width="156" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">
<tr>
<td width="14" valign="top"><img src="Images/rounded_corner2.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="top"><img src="Images/rounded_corner1.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
<tr>
</tr>
<tr>
<td width="14" valign="bottom"><img src="Images/rounded_corner4.gif" width="14" height="14"
border="0" alt="..." /></td>
<td></td>
<td width="14" valign="bottom"><img src="Images/rounded_corner3.gif" width="14" height="14"
border="0" alt="..." /></td>
</tr>
</table>
<table width="156" cellpadding="0" cellspacing="0" border="0"
style="background-color: 3778BC;margin-top: 10px;">
<tr>
<td width="14" valign="top"><img src="Images/rounded_corner2_b.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="top"><img src="Images/rounded_corner1_b.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
<tr>
</tr>
<tr>
<td width="14" valign="bottom"><img src="Images/rounded_corner4_b.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="bottom"><img src="Images/rounded_corner3_b.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
</table>
</td>
<td valign="top" width="156" >
<table width="156" cellpadding="0" cellspacing="0" border="0"
style="background-color: 3778BC">
<tr>
<td width="14" valign="top"><img src="Images/rounded_corner2_b.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="top"><img src="Images/rounded_corner1_b.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
<tr>
</tr>
<tr>
<td width="14" valign="bottom"><img src="Images/rounded_corner4_b.gif" width="14" height="14"
border="0" alt="..." /></td>
<td></td>
<td width="14" valign="bottom"><img src="Images/rounded_corner3_b.gif" width="14" height="14"
border="0" alt="..." /></td>
</tr>
</table>
<table width="156" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336;margin-top: 10px;">
<tr>
<td width="14" valign="top"><img src="Images/rounded_corner2.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="top"><img src="Images/rounded_corner1.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
<tr>
</tr>
<tr>
<td width="14" valign="bottom"><img src="Images/rounded_corner4.gif" width="14" height="14"
border="0" alt="..." /></td>
<td></td>
<td width="14" valign="bottom"><img src="Images/rounded_corner3.gif" width="14" height="14"
border="0" alt="..." /></td>
</tr>
</table>
</td>
<td valign="top" width="156">
<table width="156" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">
<tr>
<td width="14" valign="top"><img src="Images/rounded_corner2.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="top"><img src="Images/rounded_corner1.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
<tr>
</tr>
<tr>
<td width="14" valign="bottom"><img src="Images/rounded_corner4.gif" width="14" height="14"
border="0" alt="..." /></td>
<td></td>
<td width="14" valign="bottom"><img src="Images/rounded_corner3.gif" width="14" height="14"
border="0" alt="..." /></td>
</tr>
</table>
<table width="156" cellpadding="0" cellspacing="0" border="0"
style="background-color: 3778BC;margin-top: 10px;">
<tr>
<td width="14" valign="top"><img src="Images/rounded_corner2_b.gif" width="14"
height="14" border="0" alt="..." /></td>
<td width="172"></td>
<td width="14" valign="top"><img src="Images/rounded_corner1_b.gif" width="14"
height="14" border="0" alt="..." /></td>
</tr>
<tr>
</tr>
<tr>
<td width="14" valign="bottom"><img src="Images/rounded_corner4_b.gif" width="14" height="14"
border="0" alt="..." /></td>
<td></td>
<td width="14" valign="bottom"><img src="Images/rounded_corner3_b.gif" width="14" height="14"
border="0" alt="..." /></td>
</tr>
</table>
</td>
<!-- space -->
<!-- left -->
<td valign="top" width="180">
<table width="180" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">
<tr>
<td></td>
<td align="center"><a href="http://www.shvoong.co.il/" target="_blank"><img src="Images/left.jpg" width="180"
height="188" border="0" alt="..." /></a></td>
<td></td>
</tr>
</table>
<table width="180" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">
<tr>
<td></td>
<td align="center"><a href="http://www.shvoong.co.il/" target="_blank"><img src="Images/left.jpg" width="180"
height="188" border="0" alt="..." /></a></td>
<td></td>
</tr>
</table>
<table width="180" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">
<tr>
<td></td>
<td align="center"><a href="http://www.shvoong.co.il/" target="_blank"><img src="Images/left.jpg" width="180"
height="188" border="0" alt="..." /></a></td>
<td></td>
</tr>
</table>
<table width="180" cellpadding="0" cellspacing="0" border="0"
style="background-color: B4D336">
<tr>
<td></td>
<td align="center"><a href="http://www.shvoong.co.il/" target="_blank"><img src="Images/left.jpg" width="180"
height="188" border="0" alt="..." /></a></td>
<td></td>
</tr>
</table>
</table>
<table align="center" border="0" cellpadding="4" cellspacing="0" dir="rtl" width="700">
<tbody>
<tr>
<td colspan="3">
<img src="Images/pre.jpg" style="margin-bottom: 10px; margin-left: 8px; margin-top: -20px;" /></td>
<td colspan="3">
<img src="Images/logoleft.gif" style="margin-bottom: 10px; margin-left: 11px; margin-top: -10px;" /></td>
</tr>
</table>
</div>
</div>
You might want to stop using tables for the layout.
First of all I would highly recommend to stop using <table> tags for structuring a page. Thats what <div>'s are for.
IE is known to be problematic, usually I would add custom CSS rules that only apply to IE, by using the asterisk (*) marker.
#myDiv{
position: relative;
top: 20px;
left: 10px;
*top: 15px; /* Should be read only be IE */
*left: 8px; /* Should be read only be IE */
}
Shai