I am programming a HTML Email to be sent out and can not figure out why its going crazy like this.
I have sent out emails in the past using the same pieces of code ( the footer sections) and it worked fine then and wont work this time around. The code seems to render just fine in chrome via the Dreamworks "real-time Preview" but does not render correctly when opened in Internet Explorer or Edge, or more importantly the outlook mail system. I am new to HTML still and have racked my brain over this to no avail. I spent hours adding in "align="center"" and trying many other things to fix not only the insane footer placement but also the fact it wont center!
Image of what i want it to look like when done
Thanks for the help!
<html>
<head>
<title>8,22,17 eNewsleter 477 and mikrotik</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="width: 700" align="center">
<table id="Header" width="700" height="75" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td rowspan="2">
<a href="https://www.linktechs.net/productcart/pc/home.asp" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_01.png" height="78">
</a>
</td>
<td valign="top" align="right" height="36">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_03.png" width="130">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_04.png" height="48">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_05.png" height="48">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_06.png" height="48">
</td>
</tr>
<tr align="right">
<td colspan="3" align="right" valign="top">
<a href="tel:314-7350270" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_07.png" width="120"></a><img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_08.png" width="170">
</td>
</tr>
</table>
<!--LINKS TO HEADER FILES IN ORDER
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_01.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_03.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_04.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_05.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_06.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_07.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_08.png
-->
<!-- Save for Web Slices (8,22,17 eNewsleter 477 and mikrotik.psd) -->
<table id="Table_01" width="700" height="923" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/2017/002_August/8,22,17_477_MikroTik_Sale/8,22,17-eNewsleter-477-and-mikrotik_01.png" width="700" height="420" alt="Caution: 477 Section 5.3 data your billing system provides is wrong! Don’t understate your actual coverage area by 90+% using data provided by your billing system. You must have accurate RF propagation maps to get this data correct!">
</td>
</tr>
<tr>
<td>
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/2017/002_August/8,22,17_477_MikroTik_Sale/8,22,17-eNewsleter-477-and-mikrotik_02.png" width="700" height="305" alt="Mikrotik Sale at Link Technologies Inc." style="display: block;">
</td>
</tr>
<tr>
<td>
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/2017/002_August/8,22,17_477_MikroTik_Sale/8,22,17-eNewsleter-477-and-mikrotik_03.png" width="700" height="198" alt="Link Technology Offers Support" style="display: block;">
</td>
</tr>
</table>
<!-- End Save for Web Slices -->
<!-- BEGIN OF FOOOTER -->
<table id="Footer" align="center" style="width:700px" cellspacing="0" cellpadding="0">
<!--insert additional parts below this line-->
<!-- Start of PowerLink Ad -->
<tr style="position: relative;display: block; padding:0;margin: 0;">
<td colspan="4">
<a href="https://www.linktechs.net/productcart/pc/viewPrd.asp?idproduct=2251&idcategory=0" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/2017/002_August/8,8,2017_Surveillance/5th-Power-Link-Footer.png" alt="PowerLink is a battery powered PoE injector with built-in Wi-Fi access point. No more running test cable! 8 watt or 15 watt options available." width="700" height="168" usemap="#Map2" border="0" style="display: block">
</a>
<map name="Map2" style="z-index: 50">
<area shape="rect" coords="344,113,446,155" href="https://www.linktechs.net/productcart/pc/viewPrd.asp?idproduct=2233&idcategory=0" target="_blank" alt="8 Watt">
<area shape="rect" coords="495,114,594,155" href="https://www.linktechs.net/productcart/pc/viewPrd.asp?idproduct=2251&idcategory=0" target="_blank" alt="15 watt">
</map>
</td>
</tr>
<!-- End of PowerLink Ad -->
<!--insert additional parts above this line-->
<tr style=";display: block;">
<td>
<a href="https://www.towercoverage.com//" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_01.png" width="175" height="88" alt="TowerCoverage.com">
</a>
</td>
<td>
<a href="http://www.ispradio.com/" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_02.png" width="175" height="88" alt="ISP Radio Network" style="display: block">
</a>
</td>
<td>
<a href="https://www.linktechs.net/productcart/pc/viewContent.asp?idpage=33" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_03.png" width="175" height="88" alt="Hotspot Network Manager" style="display: block" align="center">
</a>
</td>
<td>
<a href="https://www.linktechs.net/productcart/pc/viewPrd.asp?idproduct=2046&idcategory=0" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_04.png" width="175" height="88" alt="Power Router v4" style="display: block" align="center">
</a>
</td>
</tr>
<tr style="position: relative;display: block; padding:0;margin: 0;">
<td>
<a href="##HTMLNewsletterURL##" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_05.png" width="233" height="25" alt="View as HTML">
</a>
</td>
<td style="padding: 0">
<a href="http://news.linktechs.net/members.aspx?Task=FF&S=1&N=54&Format=HTML&E=support%40linktechs.net">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_006.png" width="234" height="25" alt="Forward to a Freind">
</a>
</td>
<td>
<a href="##OptOutURL##">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_07.png" width="233" height="25" alt="Opt Out">
</a>
</td>
</tr>
</table>
<!--LINKS FOR THE IMAGES IN ORDER!
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_01.png
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_02.png
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_03.png
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_04.png
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_05.png
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_06.png
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_07.png
-->
<!-- END OF FOOTER -->
</body>
</html>
I was able to answer my own question for anyone who happens across this. I do not understand why, but adding a second table to the bottom most part of the page fixed the issue.
here is the code fixed this way.
Even though i answered myself, and this is a solution to the problem. I do not understand as to why this is the solution. I just threw things at it until i figured something out that worked. If you know why feel free to answer again and get credit for the true answer.
<html>
<head>
<title>8,22,17 eNewsleter 477 and mikrotik</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Header" width="700" height="75" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td rowspan="2">
<a href="https://www.linktechs.net/productcart/pc/home.asp" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_01.png" height="78">
</a>
</td>
<td valign="top" align="right" height="36">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_03.png" width="130">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_04.png" height="48">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_05.png" height="48">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_06.png" height="48">
</td>
</tr>
<tr align="right">
<td colspan="3" align="right" valign="top">
<a href="tel:314-7350270" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_07.png" width="120"></a>
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_08.png" width="170">
</td>
</tr>
</table>
<!--LINKS TO HEADER FILES IN ORDER
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_01.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_03.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_04.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_05.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_06.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_07.png
http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewHeader_08.png
-->
<!-- Save for Web Slices (8,22,17 eNewsleter 477 and mikrotik.psd) -->
<table id="Table_01" height="923" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="699">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/2017/002_August/8,22,17_477_MikroTik_Sale/8,22,17-eNewsleter-477-and-mikrotik_01.png" width="700" height="420" alt="Caution: 477 Section 5.3 data your billing system provides is wrong! Don’t understate your actual coverage area by 90+% using data provided by your billing system. You must have accurate RF propagation maps to get this data correct!">
</td>
</tr>
<tr>
<td>
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/2017/002_August/8,22,17_477_MikroTik_Sale/8,22,17-eNewsleter-477-and-mikrotik_02.png" width="700" height="305" alt="Mikrotik Sale at Link Technologies Inc." style="display: block;">
</td>
</tr>
<tr>
<td>
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/2017/002_August/8,22,17_477_MikroTik_Sale/8,22,17-eNewsleter-477-and-mikrotik_03.png" width="700" height="198" alt="Link Technology Offers Support" style="display: block;">
</td>
</tr>
</table>
<!-- End Save for Web Slices -->
<!-- BEGIN OF FOOOTER -->
<table id="Footer" align="center" style="width:700px" cellspacing="0" cellpadding="0">
<!--Add extras below this line-->
<!-- Start of PowerLink Ad -->
<tr style="position: relative;display: block; padding:0;margin: 0;">
<td colspan="4">
<a href="https://www.linktechs.net/productcart/pc/viewPrd.asp?idproduct=2251&idcategory=0" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/2017/002_August/8,8,2017_Surveillance/5th-Power-Link-Footer.png" alt="PowerLink is a battery powered PoE injector with built-in Wi-Fi access point. No more running test cable! 8 watt or 15 watt options available."
width="700" height="168" usemap="#Map2" border="0" style="display: block">
</a>
<map name="Map2" style="z-index: 50">
<area shape="rect" coords="344,113,446,155" href="https://www.linktechs.net/productcart/pc/viewPrd.asp?idproduct=2251&idcategory=0" target="_blank" alt="8 Watt">
<area shape="rect" coords="495,114,594,155" href="https://www.linktechs.net/productcart/pc/viewPrd.asp?idproduct=2251&idcategory=0" target="_blank" alt="15 watt">
</map>
</td>
</tr>
<!-- End of PowerLink Ad -->
<!--Add extras above this line-->
<tr style="position: relative;display: block; padding:0;margin: 0;">
<td>
<a href="https://www.towercoverage.com//" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/2017/002_August/8,8,2017_Surveillance/Footer-1-TowerCoverage.png" width="175" height="88" alt="TowerCoverage.com" style="display: block">
</a>
</td>
<td>
<a href="http://www.ispradio.com/" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/2017/002_August/8,8,2017_Surveillance/Footer-2-ISP-Radio.png" width="175" height="88" alt="ISP Radio Network" style="display: block">
</a>
</td>
<td>
<a href="https://www.linktechs.net/productcart/pc/viewContent.asp?idpage=33" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/2017/002_August/8,8,2017_Surveillance/Footer-3-HSNM.png" width="175" height="88" alt="Hotspot Network Manager" style="display: block" align="center">
</a>
</td>
<td>
<a href="https://www.linktechs.net/productcart/pc/viewPrd.asp?idproduct=2046&idcategory=0" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/2017/002_August/8,8,2017_Surveillance/Footer-4-PR4.png" width="175" height="88" alt="Power Router v4" style="display: block" align="center">
</a>
</td>
</tr>
</table>
<table id="Footer2" align="center" style="width:700px" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="##HTMLNewsletterURL##" target="_blank">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_05.png" width="233" height="25" alt="View as HTML">
</a>
</td>
<td style="padding: 0">
<a href="http://news.linktechs.net/members.aspx?Task=FF&S=1&N=54&Format=HTML&E=support%40linktechs.net">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_006.png" width="234" height="25" alt="Forward to a Freind">
</a>
</td>
<td>
<a href="##OptOutURL##">
<img src="http://news.linktechs.net/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_07.png" width="233" height="25" alt="Opt Out">
</a>
</td>
</tr>
</table>
<!--LINKS FOR THE IMAGES IN ORDER!
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_01.png
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_02.png
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_03.png
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_04.png
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_05.png
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_06.png
/uploadedimages/000002/Newsletter/00-Permanent-Assets/NewFooterSliced_07.png
-->
<!-- END OF FOOTER -->
</body>
</html>
When I convert html to PDF margin & padding are not applied in PDF.
<tr>
<td>
<img src="2.jpg" alt="" title="" style="width:40px; height:40px;margin-top: -23px; margin-left: -6px;">
</td>
<td width="85%" valign="bottom">
<font size="4" face="Arial"><b>Happy to help</b></font>
<hr>
</td>
</tr>
Also, how to reduce height of hr element?
.styleHr{
border-top: 0px solid #8c8b8b;
}
<tr>
<td>
<img src="2.jpg" alt="" title="" style="width:40px; height:40px;margin-top: -23px; margin-left: -6px;">
</td>
<td width="85%" valign="bottom">
<font size="4" face="Arial"><b>Happy to help</b></font>
<hr class="styleHr">
</td>
</tr>
Use a class to hr and apply styles for that class.
Please try this and let me know
<tr>
<td style="display: block;">
<img src="2.jpg" alt="" title="" style="display: block; width:40px; height:40px; margin-top: 23px; margin-left: 6px;">
</td>
<td width="85%" valign="bottom">
<font size="4" face="Arial"><b>Happy to help</b></font>
<hr>
</td>
</tr>
I have a string HTML code like
<table id='topInfoBar' style=" width: 100%;" cellspacing='0' border='0'>
<Tr>
<td id='lockOrder' clientidmode='static' style="text-align:Right;color:black;font-weight:bold">
<img src='.../images/locked.gif' alt='This order is locked' title='This order is locked!' />
</td>
</Tr>
</table>
I want to check if id 'lockOrder' exists in the string and if yes, want to replace img node i.e
<img src='.../images/locked.gif' alt='This order is locked' title='This order is locked!' />
with
<i class="fa fa-search fa-2x cursorpointer" title="This order is locked"></i>
want to do it in c#.
Use property Visible and change it in if
HTML
<table id='topInfoBar' style="width: 100%;" cellspacing='0' border='0'>
<Tr>
<td id='lockOrder' clientidmode='static' style="text-align: Right; color: black; font-weight: bold">
<img src='.../images/locked.gif' alt='This order is locked' title='This order is locked!' runat="server" id="img"/>
<i class="fa fa-search fa-2x cursorpointer" title="This order is locked" runat="server" id="i" Visible="False"></i>
</td>
</Tr>
</table>
CodeBehind C#
if (true)
{
img.Visible = false;
i.Visible = true;
}
I have an email template I created but I can't seem to figure out what is stretching out the table, I've attached a screenshot for reference. Any help would be wonderful.
Here's the code for that part of the template:
<tr>
<td style="width:27px;height:53px;display:block;float:left;padding:0;margin:0;">
<img src="#" />
</td>
<td style="width:31px;height:53px;display:block;float:left;padding:0;margin:0;"> <img src="#" />
</td>
<td style="width:24px;height:53px;display:block;float:left;padding:0;margin:0;"> <img src="#" />
</td>
<td style="width:25px;height:53px;display:block;float:left;padding:0;margin:0;"> <img src="#" />
</td>
<td style="width:518px;height:53px;display:block;float:left;padding:0;margin:0;">
<img src="#" />
</td>
</tr>
<tr>
<td style="display:block;float:left;padding:0;margin:0;">
<img src="#" />
</td>
</tr>
Instead of float, use the html align="left" in your table cells. You don't need display:block; in the table cells, instead put it in your image tags.
Also, remove all the css width and height in your table cells and replace it with the html width="" and height=""
Also, if you put this in your table tag: border="0" cellpadding="0" cellspacing="0", you don't need the padding and margin in your table cell css.
Basic example of all combined:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="31" height="53" align="left">
<img alt="" src="" width="31" height="53" border="0" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
</table>
Note - align left is default, so it is not really needed.
I'm having what seems to be a basic CSS issue.
I have a table within a table, and the imbedded table is there to contain a sliced image to support a rollover graphic change.
The second row of the imbedded table is getting a space between the first row and itself.
Here is the HTML Markup:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th class="appResourceHead text14px textBold">Parametric Search</th>
</tr>
<tr>
<td class="appResourceBodyNoPad text12px">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td> <a href="http://web.centralsemi.com/paraSearch/parametricSearch_v1_1.php">
<img src="http://www.centralsemi.com/centralSemi/images/Parametric_Search_01.png" width="163" height="132" style="border-style: none;" />
</a>
</td>
<td> <a href="http://web.centralsemi.com/paraSearch/parametricSearch_v1_1.php">
<img src="http://www.centralsemi.com/centralSemi/images/Parametric_Search_02.png" width="67" height="132" style="border-style: none;" />
</a>
</td>
</tr>
<tr>
<td> <a href="http://web.centralsemi.com/paraSearch/parametricSearch_v1_1.php">
<img src="http://www.centralsemi.com/centralSemi/images/Parametric_Search_03.png" width="163" height="48" style="border-style: none;" />
</a>
</td>
<td><a href="http://web.centralsemi.com/paraSearch/parametricSearch_v1_1.php">
<img src="/centralSemi/images/Parametric_Search_04.png" rel="/centralSemi/images/Parametric_Search_Down_04.png" class="rollover" width="67" height="48" style="border-style: none;" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
I have the following jsfiddle to show you my markup in action.
http://jsfiddle.net/5bZtz/
When looking at the table in Firefox and Chrome I don’t have the space, but in IE the space is shown like you can see in the jsfiddle example.
Simple add below code in your css,
td {
line-height:0;
}
I update your fiddle here. Kindly see it works ! http://jsfiddle.net/5bZtz/1/
Good Luck ..)
Add to <img ... /> css properties: display:block; and height:132px;