I am formatting an HTML email and it seems to work on several browsers - but it seems like Outlook is not playing nice on Chrome and IE. I have done a bit of research and know this is something I am missing - I have included the <border="0" style="display: block;"> on all of my images and included the table collapse command in the head:
{
border-collapse: collapse;
}
Yet it is still not working in Outlook on the above browsers.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>SSTM-PSD_email- FINAL</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body{
width:100%;
background-color:#ffffff;
margin:0;
padding:0;
}
table{
border-collapse:collapse;
}
table,td,th{
border:0;
}
</style></head>
<body yahoo="fix" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="600" border="0" cellpadding="0" cellspacing="0" style="height:1424px;">
<tr>
<td colspan="2" rowspan="2">
<a href="http://www.southernsoils.com" target="_blank">
<img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807284/SSTM-PSD_email_01_uhhway.png" width="112" height="77" border="0" style="display: block;" alt="SSTM-PSD_email_01_uhhway.png">
</a>
</td>
<td colspan="3" rowspan="2">
<img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807283/SSTM-PSD_email-FINAL_02_zhnbtq.jpg" width="234" height="77" border="0" alt="" style="display: block;">
</td>
<td>
<a href="http://www.southernsoils.com/about.html" target="_blank">
<img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807283/SSTM-PSD_email_03_im3rnp.jpg" width="59" height="53" border="0" alt="" style="display: block;">
</a>
</td>
<td rowspan="2">
<img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807284/SSTM-PSD_email-FINAL_04_bc73iu.jpg" width="17" height="77" border="0" alt="" style="display: block;">
</td>
<td>
<a href="http://www.southernsoils.com/services-and-solutions.html" target="_blank">
<img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807285/SSTM-PSD_email_04_nn4m6d.jpg" width="72" height="53" border="0" alt="" style="display: block;">
</a>
</td>
<td rowspan="2">
<img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807284/SSTM-PSD_email-FINAL_06_zvyubc.jpg" width="20" height="77" border="0" alt="" style="display: block;">
</td>
<td>
<a href="http://www.southernsoils.com/contact.html" target="_blank">
<img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807283/SSTM-PSD_email_05_xzvndy.jpg" width="71" height="53" border="0" alt="" style="display: block;">
</a>
</td>
<td rowspan="2">
<img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807284/SSTM-PSD_email-FINAL_08_a5kwvf.jpg" width="15" height="77" border="0" alt="" style="display: block;">
</td>
</tr>
<tr>
<td>
<img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807284/SSTM-PSD_email-FINAL_09_yg0who.jpg" width="59" height="24" border="0" alt="" style="display: block;">
</td>
<td>
<img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807284/SSTM-PSD_email-FINAL_10_zjyaqu.jpg" width="72" height="24" border="0" alt="" style="display: block;">
</td>
<td>
<img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807283/SSTM-PSD_email-FINAL_11_iniomw.jpg" width="71" height="24" border="0" alt="" style="display: block;">
</td>
</tr>
<tr>
<td colspan="11">
<img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807284/SSTM-PSD_email-FINAL_12_g6gbdk.jpg" width="600" height="291" border="0" alt="" style="display: block;">
</td>
</tr>
<tr>
<td colspan="11">
<img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807285/SSTM-PSD_email-FINAL_13_dcksnd.jpg" width="600" height="33" border="0" alt="" style="display: block;">
</td>
</tr>
<tr>
<td colspan="11">
<img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807285/SSTM-PSD_email-FINAL_14_xigxsd.jpg" width="600" height="410" border="0" alt="" style="display: block;">
</td>
</tr>
<tr>
<td colspan="11">
<img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807283/SSTM-PSD_email-FINAL_15_se2wpq.jpg" width="600" height="16" border="0" alt="" style="display: block;">
</td>
</tr>
<tr>
<td rowspan="2">
<img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807285/SSTM-PSD_email-FINAL_16_ataaen.jpg" width="100" height="478" border="0" alt="" style="display: block;">
</td>
<td colspan="7">
<a href="http://www.southernsoils.com/curfewpromo.html" target="_blank">
<img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807283/LandingPage_nztzrz.jpg" width="394" height="64" border="0" alt="" style="display: block;">
</a>
</td>
<td colspan="3" rowspan="2">
<img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807283/SSTM-PSD_email-FINAL_18_r3kia6.jpg" width="106" height="478" border="0" alt="" style="display: block;">
</td>
</tr>
<tr>
<td colspan="7">
<img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807283/SSTM-PSD_email-FINAL_19_txmwcl.jpg" width="394" height="414" border="0" alt="" style="display: block;">
</td>
</tr>
<tr>
<td colspan="11">
<img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807284/SSTM-PSD_email-FINAL_20_js5p6s.jpg" width="600" height="90" border="0" alt="" style="display: block;">
</td>
</tr>
<tr>
<td colspan="3">
<img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807284/SSTM-PSD_email-FINAL_21_kx0vci.jpg" width="177" height="28" border="0" alt="" style="display: block;">
</td>
<td>
<a href="http://www.southernsoils.com" target="_blank">
<img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807285/WebAddress_eeisgv.jpg" width="134" height="28" border="0" alt="" style="display: block;">
</a>
</td>
<td colspan="7">
<a href="mailto:salesadmin#southernsoils.com">
<img src="http://res.cloudinary.com/marketingmaven/image/upload/v1485807283/Email_d4crmz.jpg" width="289" height="28" border="0" alt="" style="display: block;">
</a>
</td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
Looks like you need a few more resets for Outlook. Try adding this to CSS in your <style> tag:
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fix for Yahoo mail table alignment bug. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
Related
Hi I'm working with a Mail template. Facing some issues with alignment in some versions of Outlook in the icons sections, maybe because of it's Word rendering engine. What alternative solution do we have to make the image align with text in Outlook ?
Icons not aligning with text.
<td style="background:#fff;">
<h2 style="color:#000000;font-size:30px;line-height:22px;font-family:'Francois One',Arial,Sans-Serif;margin:30px 0 10px;font-weight: 400;">TU PEDIDO</h2>
<h3 style="color:#000000;font-size:20px;line-height:22px;font-family:'Francois One',Arial,Sans-Serif;margin:0 0 12px;font-weight: 400;">PEDIDO #{{orderNumber}}</h3>
<p style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;margin:0 0 10px;">
<img src="https://i.postimg.cc/nzZ5SbZ8/ico-calendar2x.png" width="20" height="21" alt="" border="0" style="vertical-align: middle;" /> {{orderDate}}
</p>
<p style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;margin:0 0 10px;">
<img src="https://i.postimg.cc/NffxJGH7/ico-shop2x.png" width="20" height="21" alt="" border="0" style="vertical-align: middle;" /> {{storeName}}
</p>
<p style="font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;margin:0 0 10px;">
<img src="https://i.postimg.cc/sf58d2xk/ico-phone2x.png" width="20" height="21" alt="" border="0" style="vertical-align: middle;" /> {{storePhone}}
</p>
<p style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;margin:0 0 10px;">
<img src="https://i.postimg.cc/4xyBd44N/ico-pin2x.png" width="20" height="21" alt="" border="0" style="vertical-align: middle;" /> {{deliveryAddress}}
</p>
<p style="color:#000000;font-size:16px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;margin:20px 0 10px;letter-spacing: 1.6px;text-align: center;">
<img src="https://i.postimg.cc/8cv1dgm2/asterisco.png" width="395" height="5" alt="" border="0" style="vertical-align: middle;" />
</p>
<table align="center" border="0" cellpadding="0" cellspacing="0" id="templateContainer" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;width:100%;">
{{#each items}}
<tr>
<td width="45%" style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 4px;">
x{{quantity}} {{name}}
</td>
<td width="35%" style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 4px;text-align:right;">
+{{price}} €
</td>
</tr>
{{#each modifiers}}
<tr>
<td style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 16px 14px;">
- {{quantity}} {{name}}
</td>
<td style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 16px;text-align:right;">
{{price}}
</td>
</tr>
{{/each}} {{/each}}
<tr>
<td colspan="3" style="border-bottom: 1px solid #000000;"> </td>
</tr>
<tr>
<td width="45%" style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 4px;">
</td>
<td width="35%" style="color:#000000;font-size:16px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:10px 0 4px;text-align:right;">
<strong>{{subTotal}} €</strong>
</td>
</tr>
<tr>
<td style="color:#000000;font-size:16px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:2px 0 10px">
Envío
</td>
<td style="color:#000000;font-size:16px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:2px 0 10px;text-align:right;">
+{{deliveryCharge}} €
</td>
</tr>
<tr>
<td style="color:#000000;font-size:20px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 16px">
<strong>TOTAL</strong>
</td>
<td style="color:#000000;font-size:20px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 16px;text-align:right;">
<strong>{{total}} €</strong>
</td>
</tr>
<tr>
<td style="color:#000000;font-size:12px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 24px">
<img src="https://i.postimg.cc/sDq36XNt/ico-card2x.png" width="22" height="17" alt="" border="0" style="vertical-align: middle;" /> {{tender}}
</td>
<td style="color:#000000;font-size:20px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 24px;text-align:right;">
</td>
</tr>
</table>
</td>
I've seen some sites with SOF. find some solutions. none of them seems working. Let me know If I'm missing any additional CSS property for Outlook ?
For this it appears the only way to get it working for Outlook is to wrap it in a table.
<tr>
<td style="background:#fff;">
<h2 style="color:#000000;font-size:30px;line-height:22px;font-family:'Francois One',Arial,Sans-Serif;margin:30px 0 10px;font-weight: 400;">TU PEDIDO</h2>
<h3 style="color:#000000;font-size:20px;line-height:22px;font-family:'Francois One',Arial,Sans-Serif;margin:0 0 12px;font-weight: 400;">PEDIDO #{{orderNumber}}</h3>
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="22">
<!--Use this to control space between icon and text-->
<p style="color:#000000;font-size:14px;line-height:21px;font-family:Helvetica,Arial,Sans-Serif;margin:0;">
<img src="https://i.postimg.cc/nzZ5SbZ8/ico-calendar2x.png" width="20" height="21" alt="" border="0" style="vertical-align: middle;" />
</p>
</td>
<td>
<!--No need to put width here. It will automatically size (and is responsive without a width) -->
<p style="color:#000000;font-size:14px;line-height:14px;font-family:Helvetica,Arial,Sans-Serif;margin:0;">{{orderDate}}
</p>
</td>
</tr>
<tr>
<td width="22">
<p style="color:#000000;font-size:14px;line-height:21px;font-family:Helvetica,Arial,Sans-Serif;margin:0;">
<img src="https://i.postimg.cc/nzZ5SbZ8/ico-calendar2x.png" width="20" height="21" alt="" border="0" style="vertical-align: middle;" />
</p>
</td>
<td>
<p style="color:#000000;font-size:14px;line-height:14px;font-family:Helvetica,Arial,Sans-Serif;margin:0;"><span style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;margin:0;">{{storeName}}</span></p>
</td>
</tr>
</table>
</td>
</tr>
I've put in an extra <tr><td><table> so that when you use two columns, you don't have to use colspan, which can cause issues.
You can now also fine-tune spacing with padding on the <td> elements.
I'm coding emails using adobe CRM and HTML 5 and CSS.
I have a problem with Vertical-Align:Middle it's working fine in Outlook but when forward email to gmail it's not working it's like it adds a space in my image table.
this my code
table
{
border-spacing : 0;
border-collapse : collapse;
margin: 0 auto;
}
td
{
padding: 0;
}
<table width="680" cellspacing="0" cellpadding="0" align="center">
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td>
<img alt="" src="1.png" style="vertical-align:middle;">
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td><img alt="" src="2.png" style="vertical-align:middle;"></td>
<td>
<img alt="" src="3.png" style="vertical-align:middle;"></td>
<td>
<img alt="" src="4.png" style="vertical-align:middle;"></td>
<td>
<img alt="" src="5.png"style="vertical-align:middle;"></td>
<td>
<img alt="" src="6.png" style="vertical-align:middle;">
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td>
<img alt="" src="7.png" style="vertical-align:middle;">
</table>
Dont know why it's not working for Gmail and it's working fine for Outlook...
Can someone help me please ?
thanks
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 send the HTML email, the result is bigger than the screen. Is there anyway I can make it fit on any type of screen?
Here is my HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>NEWS LETTER</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body{
-webkit-transform:scale(0.67);
-moz-transform:scale(0.67);
-ms-transform:scale(0.67);
transform:scale(0.5);
-ms-transform-origin:0 0;
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
transform-origin:0 0;
}
table{
-webkit-transform:scale(0.67);
-moz-transform:scale(0.67);
-ms-transform:scale(0.67);
transform:scale(0.5);
-ms-transform-origin:0 0;
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
transform-origin:0 0;
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="wrapper">
<!-- Save for Web Slices (NEWS LETTER.png) -->
<table id="Table_01" width="1900" height="3459" border="0" cellpadding="0" cellspacing="0" align="center" valign="top">
<tr>
<td colspan="16">
<a href="http://www.centrale-casablanca.ma/">
<img src="http://i.imgur.com/Lb36PgA.jpg" width="1900" height="439" border="0" alt=""></a></td>
</tr>
<tr>
<td>
<img src="http://i.imgur.com/FzmJeIc.jpg" width="145" height="67" alt=""></td>
<td colspan="2">
<a href="https://twitter.com/centralecasa">
<img src="http://i.imgur.com/pBfKQPz.jpg" width="66" height="67" border="0" alt=""></a></td>
<td>
<img src="http://i.imgur.com/We2fz1U.jpg" width="72" height="67" alt=""></td>
<td>
<a href="https://www.linkedin.com/company/3747130">
<img src="http://i.imgur.com/We2fz1U.jpg" width="71" height="67" border="0" alt=""></a></td>
<td>
<a href="https://www.youtube.com/user/centralecasablanca">
<img src="http://i.imgur.com/9A9A78U.jpg" width="71" height="67" border="0" alt=""></a></td>
<td>
<a href="https://www.facebook.com/ForumECC/?ref=page_internal">
<img src="http://i.imgur.com/eeR6Rys.jpg" width="72" height="67" border="0" alt=""></a></td>
<td colspan="2">
<img src="http://i.imgur.com/UOEz98z.jpg" width="70" height="67" alt=""></td>
<td colspan="7">
<img src="http://i.imgur.com/6H7AABM.jpg" width="1333" height="67" alt=""></td>
</tr>
<tr>
<td colspan="16">
<img src="http://i.imgur.com/B6WReG6.jpg" width="1900" height="613" alt=""></td>
</tr>
<tr>
<td colspan="2">
<a href="http://www.centrale-casablanca.ma/lecole">
<img src="http://i.imgur.com/ixN7WX6.jpg" width="192" height="64" border="0" alt=""></a></td>
<td colspan="6">
<a href="http://www.centrale-casablanca.ma/formation-dingenieur">
<img src="http://i.imgur.com/vwHw3CE.jpg" width="349" height="64" border="0" alt=""></a></td>
<td colspan="3">
<a href="http://www.centrale-casablanca.ma/executive-education">
<img src="http://i.imgur.com/SWH3v3L.jpg" width="311" height="64" border="0" alt=""></a></td>
<td>
<a href="http://www.centrale-casablanca.ma/recherche">
<img src="http://i.imgur.com/82sJQq3.jpg" width="185" height="64" border="0" alt=""></a></td>
<td colspan="2">
<a href="http://www.centrale-casablanca.ma/entreprise">
<img src="http://i.imgur.com/QxalLhP.jpg" width="371" height="64" border="0" alt=""></a></td>
<td>
<a href="http://www.centrale-casablanca.ma/mobilite">
<img src="http://i.imgur.com/s6V5VYl.jpg" width="164" height="64" border="0" alt=""></a></td>
<td>
<a href="http://www.centrale-casablanca.ma/vie-sur-le-campus">
<img src="http://i.imgur.com/vwS1uNT.jpg" width="328" height="64" border="0" alt=""></a></td>
</tr>
<tr>
<td colspan="16">
<img src="http://i.imgur.com/lCLygkp.jpg" width="1900" height="712" alt=""></td>
</tr>
<tr>
<td colspan="10">
<a href="http://www.centrale-casablanca.ma/lecole/concours-admissions/concours-sur-licence">
<img src="http://i.imgur.com/cevnIzl.jpg" width="764" height="90" border="0" alt=""></a></td>
<td colspan="3">
<a href="http://www.centrale-casablanca.ma/actualites">
<img src="http://i.imgur.com/3A9aOad.jpg" width="560" height="90" border="0" alt=""></a></td>
<td colspan="3">
<a href="http://www.centrale-casablanca.ma/formation-dingenieur/cursus-de-lingenieur-centralien">
<img src="http://i.imgur.com/qS0M7Zh.jpg" width="576" height="90" border="0" alt=""></a></td>
</tr>
<tr>
<td colspan="16">
<img src="http://i.imgur.com/iCsYxLh.jpg" width="1900" height="692" alt=""></td>
</tr>
<tr>
<td colspan="10">
<a href="https://www.facebook.com/ForumECC/?fref=ts">
<img src="http://i.imgur.com/HsCa8EZ.jpg" width="764" height="87" border="0" alt=""></a></td>
<td colspan="3">
<a href="https://www.facebook.com/centract/?fref=ts">
<img src="http://i.imgur.com/3A9aOad.jpg" width="560" height="87" border="0" alt=""></a></td>
<td colspan="3">
<a href="http://www.centrale-casablanca.ma/diaporama/conference-2">
<img src="http://i.imgur.com/dzkthaq.jpg" width="576" height="87" alt=""></td>
</tr>
<tr>
<td colspan="16">
<a href="https://www.youtube.com/watch?v=GzWF9ao5Ibw">
<img src="http://i.imgur.com/mswVjLl.jpg" width="1900" height="694" border="0" alt=""></a></td>
</tr>
<tr>
<td>
<img src="http://i.imgur.com/e2VFp8N.jpg" width="145" height="1" alt=""></td>
<td>
<img src="http://i.imgur.com/e2VFp8N.jpg" width="47" height="1" alt=""></td>
<td>
<img src="http://i.imgur.com/e2VFp8N.jpg" width="19" height="1" alt=""></td>
<td>
<img src="http://i.imgur.com/e2VFp8N.jpg" width="72" height="1" alt=""></td>
<td>
<img src="http://i.imgur.com/e2VFp8N.jpg" width="71" height="1" alt=""></td>
<td>
<img src="http://i.imgur.com/e2VFp8N.jpg" width="71" height="1" alt=""></td>
<td>
<img src="http://i.imgur.com/e2VFp8N.jpg" width="72" height="1" alt=""></td>
<td>
<img src="http://i.imgur.com/e2VFp8N.jpg" width="44" height="1" alt=""></td>
<td>
<img src="http://i.imgur.com/e2VFp8N.jpg" width="26" height="1" alt=""></td>
<td>
<img src="http://i.imgur.com/e2VFp8N.jpg" width="197" height="1" alt=""></td>
<td>
<img src="http://i.imgur.com/e2VFp8N.jpg" width="88" height="1" alt=""></td>
<td>
<img src="http://i.imgur.com/e2VFp8N.jpg" width="185" height="1" alt=""></td>
<td>
<img src="http://i.imgur.com/e2VFp8N.jpg" width="287" height="1" alt=""></td>
<td>
<img src="http://i.imgur.com/e2VFp8N.jpg" width="84" height="1" alt=""></td>
<td>
<img src="http://i.imgur.com/e2VFp8N.jpg" width="164" height="1" alt=""></td>
<td>
<img src="http://i.imgur.com/e2VFp8N.jpg" width="328" height="1" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</div>
</body>
</html>
It gets resized on the navigator, but not when I send the email.
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.