All the questions I've read on stackoverflow have had the opposite problem, of a space being added unnecessarily.
In my case, I tried adding styles to the email template to space out the icons, but none seem to work. For example:
<a href="http://www.instagram.com/thing" title="thing">
<span style="font-size:12.0pt;font-family:"Times New Roman",serif;mso-fareast-language:EN-GB;text-decoration:none;padding:0.2cm 0.2cm 0.2cm 0.2cm">
<img src="instagram.png" HSPACE="50" VSPACE="50">
</span>
</a>
<table cellpadding="0" cellspacing="0" border="0" width="300" align="center">
<tr>
<td width="280" align="center">
<table cellpadding="0" cellspacing="0" border="0" width="275">
<tr>
<td align="center">
<img src="https://gallery.mailchimp.com/71be465a8d8b6e9c35e279697/images/c7f897c9-5491-41c5-b73a-40d1e29f1185.png" width="32px" height="32px" alt="facebook" vspace="10" hspace="25"/>
</td>
<td width="20">
</td>
<td align="center">
<img src="https://gallery.mailchimp.com/71be465a8d8b6e9c35e279697/images/9c7aac20-d385-4bde-a0cf-1ddb7d6f7060.png" width="32px" height="32px" alt="Twitter" vspace="10" hspace="25"/>
</td>
<td width="20">
</td>
<td align="center">
<img src="https://gallery.mailchimp.com/71be465a8d8b6e9c35e279697/images/3b801696-a19c-4de3-adbe-c4cb9976d40b.png" width="32px" height="32px" alt="Instagram" vspace="10" hspace="25"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
Use nested tables and empty <td> with heights and/or widths. Tables are the best when it comes to HTML email.
I found the easiest way is to simply add a space PNG in between the icons.
This seems to work reliably in Outlook and Gmail.
<a href="http://www.instagram.com/thing" title="thing">
<span style="font-size:12.0pt;font-family:"Times New Roman",serif;mso-fareast-language:EN-GB;text-decoration:none;padding:0.2cm 0.2cm 0.2cm 0.2cm">
<img src="instagram.png" HSPACE="50" VSPACE="50">
</span>
</a>
<img src="space.png" HSPACE="50" VSPACE="50">
Related
I have two tables aligned left at 30% each so that when it goes responsive the change to 100% and stack underneath each other.
Problem is as per the screenshot below the second one has a gap at the top and i have no idea why?
My snippet of code is here
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" class="fullWidth" style="padding-left:30px;padding-right:30px;">
<!-- CONTENT TABLE // -->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="30%" class="tableFullWidth">
<tr>
<td valign="top" class="topTen"> <p><span>1</span> FIRST AND LAST NAME</p>
<hr>
<p><span>2</span> FIRST AND LAST NAME</p>
<hr>
<p><span>3</span> FIRST AND LAST NAME</p>
<hr>
<p><span>4</span> FIRST AND LAST NAME</p>
<hr>
<p><span>5</span> FIRST AND LAST NAME</p>
<hr>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
<!-- CONTENT TABLE // -->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="30%" class="tableFullWidth">
<tr>
<td valign="top" class="topTen">
<p><span>6</span> FIRST AND LAST NAME</p>
<hr>
<p><span>7</span> FIRST AND LAST NAME</p>
<hr>
<p><span>8</span> FIRST AND LAST NAME</p>
<hr>
<p><span>9</span> FIRST AND LAST NAME</p>
<hr>
<p><span>10</span> FIRST AND LAST NAME</p>
<hr>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
Outlook 2010 - Screenshot
Doesn't look like the same code from the screenshots, background colors are missing and fonts as well. Either way I think you need a ghost column between the tables to align, try the code below:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" class="fullWidth" style="padding-left:30px;padding-right:30px;">
<!-- CONTENT TABLE // -->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="30%" class="tableFullWidth">
<tr>
<td valign="top" class="topTen"> <p><span>6</span> FIRST AND LAST NAME</p>
<hr>
<p><span>7</span> FIRST AND LAST NAME</p>
<hr>
<p><span>8</span> FIRST AND LAST NAME</p>
<hr>
<p><span>9</span> FIRST AND LAST NAME</p>
<hr>
<p><span>10</span> FIRST AND LAST NAME</p>
<hr>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="50%">
<![endif]-->
<!-- CONTENT TABLE // -->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="30%" class="tableFullWidth">
<tr>
<td valign="top" class="topTen">
<p><span>6</span> FIRST AND LAST NAME</p>
<hr>
<p><span>7</span> FIRST AND LAST NAME</p>
<hr>
<p><span>8</span> FIRST AND LAST NAME</p>
<hr>
<p><span>9</span> FIRST AND LAST NAME</p>
<hr>
<p><span>10</span> FIRST AND LAST NAME</p>
<hr>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
You can change the width of the ghost column if you need to. let me know how you go.
I have a question regarding the magento order emails.
I have created my own order template by loading the default template and modifying it. When i take a look via the 'preview template' button on there, the email appears without order information (of course) but with every styling etc.
However when my customer gets the email it is pure text with no styling at all.
What could i have been doing wrong
Idk if it helps but here is my email template:
{{template config_path="design/email/header"}}
{{inlinecss file="email-inline.css"}}
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style='background: #fff' class="email-heading">
<h1 style='color: #68883e;'>Thank you for your order</h1>
<p>Your order is being process right now</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="order-details">
<h3 style='display: inline; float: left'>Your order <span class="no-link">#{{var order.increment_id}}</span></h3>
<p style='display: inline; float: right'>Placed on {{var order.getCreatedAtFormated('long')}}</p>
</td>
</tr>
<tr class="order-information">
<td>
{{if order.getEmailCustomerNote()}}
<table cellspacing="0" cellpadding="0" class="message-container">
<tr>
<td>{{var order.getEmailCustomerNote()}}</td>
</tr>
</table>
{{/if}}
{{layout handle="sales_email_order_items" order=$order}}
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="address-details">
<h6>Bill to:</h6>
<p><span class="no-link">{{var order.getBillingAddress().format('html')}}</span></p>
</td>
<td class="address-details">
<h6>Client:</h6>
<p><span class="no-link">{{var order.getclientfirstname().format('html')}}</span></p>
</td>
</tr>
<tr>
{{depend order.getIsNotVirtual()}}
<td class="method-info">
<h6>Shipping method:</h6>
<p>{{var order.shipping_description}}</p>
</td>
{{/depend}}
<td class="method-info">
<h6>Payment method:</h6>
{{var payment_html}}
</td>
</tr>
</table>
</td>
</tr>
</table><!-- asd-->
{{layout handle="sales_email_order_items" order=$order}}
{{template config_path="design/email/footer"}}
You shouldn't use the CSS classes to stylize the templates.
Also, you shouldn't use the file with the styles info, that is located anywhere else, as they are not supported by the majority of the email services.
Instead, you can directly use the attribute tags (to implement the stylazation) or use the styles right in the email code (using the tag <style>)
And here is the list of tags you can use:
https://www.campaignmonitor.com/css/
I am trying to use TinyMCE to allow my users to modify a handlebars report template. The template contains several elements that are not valid to TinyMCE and they are being moved around. See the {{#each data}} and {{/each}}
Here is good HTML code for my handlebars template:
<table class="table table-bordered">
<thead>
<tr>
<th><h4>Item</h4></th>
<th><h4 class="text-right">Quantity</h4></th>
<th><h4 class="text-right">Rate/Price</h4></th>
<th><h4 class="text-right">Sub Total</h4></th>
</tr>
</thead>
<tbody>
{{#each Details}}
<tr>
<td>{{Item}}<br><small>{{Description}}</small></td>
<td class="text-right">{{Quantity}}</td>
<td class="text-right">{{Rate}} {{UnitOfMeasure}}</td>
<td class="text-right">{{Amount}}</td>
</tr>
{{/each}}
</tbody>
</table>
After I past the code into TinyMCE, it results to the following:
{{#each Details}}{{/each}}
<table class="table table-bordered">
<thead>
<tr><th>
<h4>Item</h4>
</th><th>
<h4 class="text-right">Quantity</h4>
</th><th>
<h4 class="text-right">Rate/Price</h4>
</th><th>
<h4 class="text-right">Sub Total</h4>
</th></tr>
</thead>
<tbody>
<tr>
<td>{{Item}}<br /><small>{{Description}}</small></td>
<td class="text-right">{{Quantity}}</td>
<td class="text-right">{{Rate}} {{UnitOfMeasure}}</td>
<td class="text-right">{{Amount}}</td>
</tr>
</tbody>
</table>
Has anyone ran across a plugin or something else that may help me?
I just ran into this... I have an order confirmation email that I need to be configurable with a list of order items in a table; same issue.
I did just realize I probably shouldn't be using tables anyway, since they are not responsive, but I ultimately was able to solve the problem with HTML comments, like this:
<tr style="font-weight: bold;">
<td style="width: 145px;">Qty</td>
<td>Item</td>
<td>Unit Price</td>
<td>Total</td>
</tr>
<!--{{#order.line_items}} -->
<tr repeat="">
<td style="width: 145px;">{{quantity}}</td>
<td>{{product.name}}</td>
<td>{{currency unit_price}}</td>
<td>{{currency total}}</td>
</tr>
<!--{{/order.line_items}} -->
<tr>
<td style="width: 145px;"> </td>
<td> </td>
<td><strong>Subtotal:</strong></td>
<td>{{currency order.subtotal}}</td>
</tr>
I was able to use a custom attribute on my Element and use:
<tr repeat="{{#each Details}}">
</tr repeat="{{/each}}">
I created a html email, it's working correctly in Thunderbird and Gmail but not in Outlook.
I want to have side by side one image and on table.
I use display:inline in order to do that.
But Outlook show the image and below the table.
Here the code:
http://jsfiddle.net/675db7ca/1/
<br/>
<div style="display:inline !important"><a href="http://www.google.com/" style="text-decoration:none">
<img border="0" height="106" width="186" src="http://pheonix.jw.lt/killercat186px.jpg" alt="logo"/>
</a></div><table cellspacing="0" style="table-layout: fixed; display:inline !important; max-width:412px; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" cellpadding="0" border="0" width="412">
<tbody>
<tr>
<td width="200" border="0" style="vertical-align: bottom">
<span style="font-family:Helvetica;font-size:17px;color:#000000;">Super Scral</span>
<br/>
<span style="font-family:Helvetica;font-size:16px;color:green;">Developper</span>
</td>
<td width="20" style="background-image: url('http://s.atchik-services.com/signature/signature_lignerouge.png');" rowspan="3">
<div id="lignerouge"></div>
</td>
<td width="150" rowspan="2" border="0">
<span style="font-family:Helvetica;font-size:12px; color:#000001;"><strong>Tel</strong> : <a style="line-height:12px;padding:0px;margin:0px;color:#000001;text-decoration:none;" href="tel:0033xxxxxxxx">+33 <strong>x xx xx xx xx</strong></a>
</span>
<br/>
<span style="font-family:Helvetica;font-size:12px; color:#000001;"><strong>Site</strong>:
<a style="line-height:12px;padding:0px;margin:0px;color:#000001;" href="http://www.google.com/">google.com</a></span>
</td>
</tr>
</tbody>
</table>
<br/>
Thanks!
I can't really understand what it is that you are asking for help on.
I'm guessing you want the image next to the text, rather than above...
Put the image in a cell in that same table
<table cellspacing="0" style="max-width:412px; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" cellpadding="0" border="0" width="412">
<tbody>
<tr>
<td><a href="http://www.google.com/" style="text-decoration:none">
<img border="0" height="106" width="186" src="http://pheonix.jw.lt/killercat186px.jpg" alt="logo"/>
</a></td>
<td width="200" border="0" style="vertical-align: bottom">
<span style="font-family:Helvetica;font-size:17px;color:#000000;">Super Scral</span>
<br/>
<span style="font-family:Helvetica;font-size:16px;color:green;">Developper</span>
</td>
<td width="20" style="background-image: url('http://s.atchik-services.com/signature/signature_lignerouge.png');" rowspan="3">
<div id="lignerouge"></div>
</td>
<td width="150" rowspan="2" border="0">
<span style="font-family:Helvetica;font-size:12px; color:#000001;"><strong>Tel</strong> : <a style="line-height:12px;padding:0px;margin:0px;color:#000001;text-decoration:none;" href="tel:0033xxxxxxxx">+33 <strong>x xx xx xx xx</strong></a>
</span>
<br/>
<span style="font-family:Helvetica;font-size:12px; color:#000001;"><strong>Site</strong>:
<a style="line-height:12px;padding:0px;margin:0px;color:#000001;" href="http://www.google.com/">google.com</a></span>
</td>
</tr>
</tbody>
</table>
Best not to bother with divs in email if you don't know a lot about email client quirks.
Display:inline/block/etc won't work on elements like tables. Don't bother with things like that.
I'm creating an email template for a client. There are so many small bugs.
I can't get the side images to line up without having space between them and the tables width won't match up.
Check out the cross client previews here:
[removed]
and here is my code:
<table width="600" bgcolor="000000" style="padding-left: 14xpx;">
<tr>
<td align="left" cellspacing="0" cellpadding="0" style="padding: 5px 0 0 0;margin-bottom: 0;">
<ul style="padding:0;">
<li style="list-style: none;">
<span><img src="http://www.kieshajewel.com/sirio/left-img-01.jpg" alt=" Join Executive Chef Massimo Bebber" style="margin-bottom: -4px !important;"/></span></li>
<li style="list-style: none;"><span><img src="http://www.kieshajewel.com/sirio/left-img-02.jpg" alt=" Join Executive Chef Massimo Bebber" style="margin-bottom: -4px !important;"/></span><singleline /></li>
<li style="list-style: none;"><span><img src="http://www.kieshajewel.com/sirio/left-img-03.jpg" alt=" Join Executive Chef Massimo Bebber" style="margin-bottom: -4px !important;"/></span></li>
</ul>
</td>
<td align="left" cellspacing="0" cellpadding="0" style="padding: 10px 0 0 0; position: relative; left: -5px;">
<span>
<a href="http://siriony.com/sample-page/chef-massimo-bebber/" style="border: none !imporant;">
<img src="http://www.kieshajewel.com/sirio/chef-massimo-bebber.jpg" alt-"Sirio Chef" /></a>
</span>
</td>
<td align="left">
<img src="http://www.kieshajewel.com/sirio/sirio-thumbnails.png" alt="Sirio Ristorante" />
</td>
</tr>
</table>
<table width="605" bgcolor="000000" style="margin-top: -20px;">
<tr>
<td align="left"><img src="http://www.kieshajewel.com/sirio/lines.gif" /></td>
</tr>
</table>
<table width="606" bgcolor="000000" style="">
<tr>
<td align="left"> <img src="http://www.kieshajewel.com/sirio/footer-01.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-02.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-03.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-04.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-05.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-06.gif" alt="Reserve Now" />
</td>
</tr>
</table>
There are so many problems in what you posted it's hard to tell exactly what it is you were trying to do.
The following is meant to be harsh:
First off, get everything laid out in the right spot before you start randomly adding negative positioning styles; there was no reason for that. Second, you might want to pick up a book on html and css before you take on another client. You have quite a bit to learn. Pay attention to text layout, image alignment and cell positioning.
The following gets rid of most of the garbage.
<table width="600" bgcolor="000000" style="padding-left: 14px;">
<tr>
<td align="left" valign="top" cellspacing="0" cellpadding="0" style="padding:0px;margin:0px;">
<img src="http://www.kieshajewel.com/sirio/left-img-01.jpg" alt=" Join Executive Chef Massimo Bebber" style="border:0px;margin:0px;" /><br />
<img src="http://www.kieshajewel.com/sirio/left-img-02.jpg" alt=" Join Executive Chef Massimo Bebber" style="border:0px;margin:0px;"/><br />
<img src="http://www.kieshajewel.com/sirio/left-img-03.jpg" alt=" Join Executive Chef Massimo Bebber" style="border:0px;margin:0px;"/>
</td>
<td align="left" valign="top" cellspacing="0" cellpadding="0" style="padding:0px;margin:0px;">
<span>
<img src="http://www.kieshajewel.com/sirio/chef-massimo-bebber.jpg" alt-"Sirio Chef" style="border:0px;" />
</span>
</td>
<td align="left" valign="top">
<img src="http://www.kieshajewel.com/sirio/sirio-thumbnails.png" alt="Sirio Ristorante" />
</td>
</tr>
<tr>
<td align="left" valign="top" colspan="3"><img src="http://www.kieshajewel.com/sirio/lines.gif" /></td>
</tr>
<tr>
<td align="left" valign="top" colspan="3"> <img src="http://www.kieshajewel.com/sirio/footer-01.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-02.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-03.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-04.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-05.gif" alt="Reserve Now" />
<img src="http://www.kieshajewel.com/sirio/footer-06.gif" alt="Reserve Now" />
</td>
</tr>
</table>
99% of the time there are spaces between images, it is because people forget display:block; on the image tags. In this case though, you are floating your images, which is the rare case where display block is not needed. I wouldn't recommend this technique in html email however, unless there is a lot of spare room, as different clients have slightly different spacing between images.
Put each of your images in their own table cell, and it should fix the problems:
<td width="">
<img alt="" src="" width="" height="" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
If you still have issues, repost your code and I'll take another look at that point.