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>
Related
i am trying to embed the following html form in email, using Thunderbird.
<html>
<head>
<title>eisitirio</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (eisitirio.psd) -->
<table id="Table_01" width="835" height="4724" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4">
<img src="eisitirio_01.png" width="835" height="1338" alt=""></td>
</tr>
<tr>
<td colspan="4">
<a href="https://www.ticketservices.gr/event/goutou-goupatou-theatro-aneton/?fbclid=IwAR0Gy0HRV9hRApR7jZajDtZ9Bt4Xa7FliSTHbDR7M1-kOO8kHgMdIvveLNw" target="_blank">
<img src="tickets.png" width="835" height="245" border="0" alt=""></a></td>
</tr>
<tr>
<td colspan="4">
<img src="eisitirio_03.png" width="835" height="1231" alt=""></td>
</tr>
<tr>
<td colspan="4">
<a href="https://www.youtube.com/watch?v=03upwfqlKEo" target="_blank">
<img src="teaser.png" width="835" height="305" border="0" alt=""></a></td>
</tr>
<tr>
<td colspan="4">
<img src="eisitirio_05.png" width="835" height="1325" alt=""></td>
</tr>
<tr>
<td>
<a href="https://www.facebook.com/endynameiensemble" target="_blank">
<img src="facebook.png" width="243" height="280" border="0" alt=""></a></td>
<td>
<a href="https://www.youtube.com/channel/UC4ecFndGyTEbycrUpnEkqUw" target="_blank">
<img src="youtube.png" width="186" height="280" border="0" alt=""></a></td>
<td>
<a href="https://www.instagram.com/endynamei.ensemble/" target="_blank">
<img src="instagram.png" width="174" height="280" border="0" alt=""></a></td>
<td>
<a href="http://www.endynamei.com/menoy" target="_blank">
<img src="site.png" width="232" height="280" border="0" alt=""></a></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
I try to insert the html code by choosing insert->HTML in thunderbird
I can not make it work properly . Can somebody help me please.
I am having an issue when I send this email template to Outlook, it adds a space after one image. I have done some research and removed all div and floats but it still will not show this one section correctly. It works fine in OWA, Outlook for Mac, and Gmail. The only issue is when you view it in Outlook on a PC. Thanks for the help.
I have found several other sites that say to change the CSS to inline, so I did that and also removed all div and floats.
The social media icons should be in line, but they show with a space after the first icon.
Incorrect Image:
Correct Image:
Here is the code for that section:
<table border="0" cellpadding="0" cellspacing="0" width="110">
<tr>
<td>
<tr>
Office of Admissions<br>
One John Marshall Drive<br>
Huntington, WV 25755<br>
1-877-GOHERD-1<br>
admissions#marshall.edu<br>
</tr>
<br>
<br>
<tr>
<td>
<a href="https://www.facebook.com/marshallu">
<img alt="Facebook" src="http://www.marshall.edu/admissions/files/Facebook-grey.jpg"></a>
</td>
<td>
<a href="https://twitter.com/marshallu">
<img alt="Twitter" src="http://www.marshall.edu/admissions/files/Twitter-grey.jpg"></a>
</td>
<td>
<a href="https://www.linkedin.com/company/19059?trk=tyah">
<img alt="LinkedIn" src="http://www.marshall.edu/admissions/files/LinkedIn-grey.jpg"></a>
</td>
<td>
<a href="https://www.instagram.com/marshallu/">
<img alt="Instagram" src="http://www.marshall.edu/admissions/files/Instagram-grey.jpg"></a>
</td>
<td>
<a href="https://www.snapchat.com/add/marshallulife">
<img alt="Snapchat" src="http://www.marshall.edu/admissions/files/SnapChat-grey.jpg"></a>
</td>
</tr>
</tr>
</table>
This looks good in every version of Outlook:
<table role="presentation" cellspacing="0" cellpadding="0" border="1" width="110">
<tr>
<td>
Office of Admissions<br>
One John Marshall Drive<br>
Huntington, WV 25755<br>
1-877-GOHERD-1<br>
admissions#marshall.edu
</td>
</tr>
<tr>
<td style="padding: 2px;">
</td>
</tr>
<tr>
<td>
<table role="presentation" cellspacing="0" cellpadding="0" border="1" width="96">
<tr>
<td width="24">
<a href="https://www.facebook.com/marshallu" target="_blank">
<img alt="Facebook" src="http://www.marshall.edu/admissions/files/Facebook-grey.jpg" width="22">
</a>
</td>
<td width="24">
<a href="https://twitter.com/marshallu" target="_blank">
<img alt="Twitter" src="http://www.marshall.edu/admissions/files/Twitter-grey.jpg" width="22">
</a>
</td>
<td width="24">
<a href="https://www.linkedin.com/company/19059?trk=tyah" target="_blank">
<img alt="LinkedIn" src="http://www.marshall.edu/admissions/files/LinkedIn-grey.jpg" width="22"></a>
</td>
<td>
<a href="https://www.instagram.com/marshallu/" target="_blank">
<img alt="Instagram" src="http://www.marshall.edu/admissions/files/Instagram-grey.jpg" width="22">
</a>
</td>
<td width="24">
<a href="https://www.snapchat.com/add/marshallulife" target="_blank">
<img alt="Snapchat" src="http://www.marshall.edu/admissions/files/SnapChat-grey.jpg" width="23">
</a>
</td>
</tr>
</table>
</td>
</tr>
But here's the caveat, you might need to figure out how to make it look better in all mobile clients like the iPhone 6. It works, but it needs a bit more polish to work properly. I'll let you figure that out.
Good luck.
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'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.
This question already has answers here:
White space at bottom of anchor tag
(5 answers)
How to avoid White line between img and td bottom?
(1 answer)
Closed 8 years ago.
I have been working on a simple html landing page and I can't seem to remove the white spacing mid way through the page that my image links are causing. Does anyone have a simple fix for this? Thank you.
Here is a link to the page:
https://www.facebook.com/RevivalCabs/app_190322544333196
Here is my HTML:
<body marginwidth="0" marginheight="0" bgcolor="#FFFFFF" topmargin="0" leftmargin="0">
<table id="Table_01" height="792" width="814" cellspacing="0" cellpadding="0" border="0" valign="top">
<tbody>
<tr>
<td valign="top" colspan="8">
<img height="369" width="814" border="0" alt="" src="http://i212.photobucket.com /albums/cc139/takeonecar/Kolossal_MGMT_TOP.jpg">
</td>
</tr>
<tr>
<td valign="top">
<img height="35" width="84" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_MID1F.jpg">
</td>
<td valign="top">
<a target="blank" href="https://www.facebook.com/counttofour" >
<img height="35" width="85" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_MID2.jpg">
</a>
</td>
<td valign="top">
<a target="blank" href="https://twitter.com/CountToFour">
<img height="35" width="85" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_MID3F.jpg">
</a>
</td>
<td valign="top">
<a target="blank" href="https://www.facebook.com/counttofour">
<img height="35" width="127" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_MID4.jpg">
</a>
</td>
<td valign="top">
<img height="35" width="90" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_MID5F.jpg">
</td>
<td valign="top">
<a target="blank" href="https://www.facebook.com/BATTLEGHOST">
<img height="35" width="87" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_MID6.jpg">
</a>
</td>
<td valign="top">
<a target="blank" href="https://twitter.com/BATTLEGHOSTRVA">
<img height="35" width="86" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_MID7.jpg">
</a>
</td>
<td valign="top">
<a target="blank" href="https://www.facebook.com/counttofour">
<img height="35" width="170" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_MID8.jpg">
</a>
</td>
</tr>
<tr>
<td valign="top" colspan="8">
<div style="height:100%;">
<img height="388" width="814" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_BOTF.jpg"></div>
</td>
</tr>
<tr>
<td valign="top" colspan="8">
<img height="12" width="814" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_FOOT.jpg">
</td>
</tr>
<tr>
<td valign="top" colspan="8">
<img height="12" width="814" border="0" alt="" src="http://i212.photobucket.com/albums/cc139/takeonecar/Kolossal_MGMT_FOOT.jpg">
</td>
</tr>
</tbody>
</table>
</body>