Email template issue - Table overstretched - css

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.

Related

Vertical-align is not working in Outlook mail template ? Needs to align images with text ? any alternatives?

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.

Vertical-Align not working email

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

HTML breaks in email

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;
}

How to add scroll bar on table?

I am trying to add a scroll bar on my table but its not showing up on the table. I have tried to put my table in div as well. Here is my code:
<table class="table-condensed table-hover table-bordered" id="EligibiltyAndAccountingReportsTable" cellpadding="0" cellspacing="0" style="width: 45% !important; position: absolute;left: 52px;Top:100px">
<thead>
<tr>
<th>Eligibility Reports</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.duplicateAndOverlappingCoveragesReportPath}}">Duplicate And Overlapping Coverages</a>
<br/>
<p align="left">This report provides a list of SR IDs where<br/> duplicated or overlapping coverage is present.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.openBatchReportPath}}">Open Batches </a>
<br />
<p align="left">This report provides a list of Open Batches<br/> for a given date range by Batch Type.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a>
<br />
<p align="left">This report provides a list of Refund Details<br/> for a given Bid Year and Client Number.</p>
</td>
</tr>
</tbody>
</table>
I have tried to put overflow property in CSS

You need to do two things. First, you have to wrap your table in a container that will do the scrolling, like this:
<div style="height: 200px; overflow: auto;">
<table>
...
</table>
</div>
And you have to remove position: absolute from the style of the table.
Here's an example: http://jsfiddle.net/qbkfbrwd/
Hope that helps!
Edit If instead you only want the body of the table to be able to scroll, it's as simple as adding the following CSS:
tbody {
display: block;
height: 200px; //or whatever you want the height to be
overflow: auto;
}
Example: http://jsfiddle.net/f91pzj6d/

Create a div with:
<div id="myTable">
and in css:
myTable {
overflow:auto;
}

I add a div as container and use overflow: auto. You have also to set a height for your table:
#tableContainer {
overflow: auto;
height: 200px;
position: relative;
width: 300px;
}
<div id="tableContainer">
<table class="table-condensed table-hover table-bordered" id="EligibiltyAndAccountingReportsTable" cellpadding="0" cellspacing="0" style="width: 45% !important; position: absolute;left: 52px;Top:100px">
<thead>
<tr>
<th>Eligibility Reports</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.duplicateAndOverlappingCoveragesReportPath}}">Duplicate And Overlapping Coverages</a>
<br/>
<p align="left">This report provides a list of SR IDs where
<br/>duplicated or overlapping coverage is present.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.openBatchReportPath}}">Open Batches </a>
<br />
<p align="left">This report provides a list of Open Batches
<br/>for a given date range by Batch Type.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a>
<br />
<p align="left">This report provides a list of Refund Details
<br/>for a given Bid Year and Client Number.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a>
<br />
<p align="left">This report provides a list of Refund Details
<br/>for a given Bid Year and Client Number.</p>
</td>
</tr>
<tr>
<td>
<img src="images/reports.png" class="icon" style="margin: 1px;" />
<a target="_blank" data-ng-href="{{vm.refundReportPath}}">Refund</a>
<br />
<p align="left">This report provides a list of Refund Details
<br/>for a given Bid Year and Client Number.</p>
</td>
</tr>
</tbody>
</table>
</div>

CSS Table within Table, Space between rows (not columns)

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;

Resources