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.
Related
I want to make an html signature for my webmail. I have following html signature.
<html>
<head>
<title>last-one</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="900" height="420" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img src="EMAIL-SIGNETURE-2_01.png" width="960" height="119" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="EMAIL-SIGNETURE-2_02.png" width="960" height="109" alt="">
</td>
</tr>
<tr>
<td colspan="5">
<img src="EMAIL-SIGNETURE-2_03.png" width="960" height="16" alt="">
</td>
</tr>
<tr>
<td colspan="5">
<img src="EMAIL-SIGNETURE-2_04.png" width="960" height="19" alt="">
</td>
</tr>
<tr>
<td colspan="5">
<img src="EMAIL-SIGNETURE-2_05.png" width="960" height="30" alt="">
</td>
</tr>
<tr>
<td colspan="5">
<img src="EMAIL-SIGNETURE-2_06.png" width="960" height="26" alt="">
</td>
</tr>
<tr>
<td colspan="5">
<img src="EMAIL-SIGNETURE-2_07.png" width="960" height="88" alt=""></td>
</tr>
<tr>
<td>
<img src="EMAIL-SIGNETURE-2_08.png" width="179" height="79" alt="">
</td>
<td>
<img src="EMAIL-SIGNETURE-2_09.png" width="34" height="79" alt="">
</td>
<td>
<img src="EMAIL-SIGNETURE-2_10.png" width="35" height="79" alt="">
</td>
<td>
<img src="EMAIL-SIGNETURE-2_11.png" width="40" height="79" alt="">
</td>
<td>
<img src="EMAIL-SIGNETURE-2_12.png" width="675" height="79" alt=""></td>
</tr>
</table>
</body>
</html>
And my expected output if following
But when i paste the html code in Web mail html signature section my output slightly change which look like this.
Can you please tell me what's wrong with expected vs original output?
try this if css:
table {border-collapse: collapse;}
or inline html style
<table id="Table_01" width="900" height="420" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
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 did outlook HTML signature and it's look good and work good, but on mobile it's look pretty big. If it possible to do my signature responsive?
My HTML code:
<html>
<head>
<title>Signature</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 (Signature4.psd) -->
<table id="Table_01" width="880" height="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="6">
<img src="images/Signature4_01.png" width="880" height="263" alt=""></td>
</tr>
<tr>
<td>
<a href="matt.yesmaniski#themenorahgroup.com">
<img src="images/email.png" width="301" height="37" border="0" alt=""></a></td>
<td>
<img src="images/Signature4_03.png" width="58" height="37" alt=""></td>
<td>
<a href="https://www.facebook.com/pages/Imagine-Built-Homes/109522549076128" target="_blank">
<img src="images/facebook.png" width="28" height="37" border="0" alt=""></a></td>
<td>
<img src="images/Signature4_05.png" width="1" height="37" alt=""></td>
<td>
<a href="https://twitter.com/ImagineBltHomes" target="_blank">
<img src="images/twitter.png" width="28" height="37" border="0" alt=""></a></td>
<td>
<img src="images/Signature4_07.png" width="464" height="37" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
If you try replacing all your fixed widths with percentages, that should adjust to fit the device. For example, make table width 100% instead of 880 etc
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>
I've always used rowspan for web site development but now designing and developing email comms rowspan, it appears constantly breaks. In multiple clients it displays with a 10/20px gap. How can I avoid using row span even if I need to have two images side by side in an email (such as a header)?
<html>
<head>
<title>StPatricksDAy-PostCard</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (StPatricksDAy-PostCard.psd) -->
<table id="Table_01" width="657" height="684" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="6">
<img src="images/StPatricksDAy-PostCard_01.gif" width="19" height="643" alt=""></td>
<td colspan="3">
<img src="images/StPatricksDAy-PostCard_02.gif" width="636" height="14" alt=""></td>
<td rowspan="6">
<img src="images/StPatricksDAy-PostCard_03.gif" width="2" height="643" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/StPatricksDAy-PostCard_04.gif" width="636" height="96" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/StPatricksDAy-PostCard_05.gif" width="636" height="9" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/StPatricksDAy-PostCard_06.jpg" width="257" height="523" alt=""></td>
<td>
<img src="images/StPatricksDAy-PostCard_07.gif" width="368" height="449" alt=""></td>
<td rowspan="3">
<img src="images/StPatricksDAy-PostCard_08.gif" width="11" height="524" alt=""></td>
</tr>
<tr>
<td>
<img src="images/StPatricksDAy-PostCard_09.gif" width="368" height="74" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/StPatricksDAy-PostCard_10.gif" width="625" height="1" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/StPatricksDAy-PostCard_11.gif" width="657" height="28" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/StPatricksDAy-PostCard_12.gif" width="657"
height="13" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>