Mailchimp is so frustrating. I'm trying to make a campaign with the template that I did. It's supposed to look like this:
BUT when I'm trying to paste a table that I copied from google sheets, it's looking like this
How do I fix it? How can I make the borders disappear every time I'm going to paste a table?
If you're wondering this is the source code (I removed the content because it's classified and it exceeded the 30,000 characters limit):
<style type="text/css"><!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}-->
</style>
<table border="1" cellpadding="0" cellspacing="0" dir="ltr">
<colgroup>
<col width="277" />
<col width="100" />
<col width="100" />
<col width="113" />
<col width="114" />
<col width="49" />
<col width="79" />
<col width="2" />
<col width="100" />
<col width="100" />
</colgroup>
<tbody>
<tr>
<td data-sheets-value="{"1":2,"2":"AS OF: 8/29/16"}">AS OF: 8/29/16</td>
<td colspan="6" data-sheets-value="{"1":2,"2":"DIGITAL CARDS / CODES\n Official Pins or Scans with Text"}" rowspan="1">DIGITAL CARDS / CODES<br />
Official Pins or Scans with Text</td>
<td> </td>
<td colspan="2" data-sheets-value="{"1":2,"2":"PHYSICAL CARDS\n Free shipping on 500+ units"}" rowspan="1">PHYSICAL CARDS<br />
Free shipping on 500+ units</td>
</tr>
<tr>
<td> </td>
<td colspan="2" data-sheets-value="{"1":2,"2":"< 100 Units"}" rowspan="1">< 100 Units</td>
<td colspan="2" data-sheets-value="{"1":2,"2":"100+ Units\n Call/Email for pricing on 1000+ units per item"}" rowspan="1">100+ Units<br />
Call/Email for pricing on 1000+ units per item</td>
<td colspan="2" data-sheets-value="{"1":2,"2":"Format"}" rowspan="1">Format</td>
<td> </td>
<td colspan="2" data-sheets-value="{"1":2,"2":"Call/Email for pricing\n on 1000+ units per item"}" rowspan="1">Call/Email for pricing<br />
on 1000+ units per item</td>
</tr>
<tr>
<td> </td>
<td data-sheets-value="{"1":2,"2":"Unit Cost"}"> </td>
<td data-sheets-value="{"1":2,"2":"% Off MSRP"}"> </td>
<td data-sheets-value="{"1":2,"2":"Unit Cost"}"> </td>
<td data-sheets-value="{"1":2,"2":"% Off MSRP"}"> </td>
<td data-sheets-value="{"1":2,"2":"Pins"}"> </td>
<td data-sheets-value="{"1":2,"2":"Scans + Text"}"> </td>
<td> </td>
<td data-sheets-value="{"1":2,"2":"Unit Cost"}"> </td>
<td data-sheets-value="{"1":2,"2":"% Off MSRP"}"> </td>
</tr>
<tr>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0",1]" data-sheets-value="{"1":3,"3":10}"> </td>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0.00",1]" data-sheets-value="{"1":3,"3":9.15}"> </td>
<td data-sheets-numberformat="[null,3,"0.00%",1]" data-sheets-value="{"1":3,"3":0.085}"> </td>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0.00",1]" data-sheets-value="{"1":3,"3":9.1}"> </td>
<td data-sheets-numberformat="[null,3,"0.00%",1]" data-sheets-value="{"1":3,"3":0.09}"> </td>
<td data-sheets-value="{"1":2,"2":"\u25cf"}"> </td>
<td> </td>
<td> </td>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0.00",1]" data-sheets-value="{"1":3,"3":9.1}"> </td>
<td data-sheets-numberformat="[null,3,"0.00%",1]" data-sheets-value="{"1":3,"3":0.09}"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0",1]"> </td>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0.00",1]"> </td>
<td data-sheets-numberformat="[null,3,"0.00%",1]"> </td>
<td data-sheets-numberformat="[null,4,"\"$\"#,##0.00",1]"> </td>
<td data-sheets-numberformat="[null,3,"0.00%",1]"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
table border applied change border="0"
<table border="0" cellpadding="0" cellspacing="0" dir="ltr">
Step 1: set each <table> to border="0"
<table border="0" cellpadding="0" cellspacing="0" dir="ltr">
Step 2: delete the commented-out td {border: 1px solid #ccc;}
You should now have no borders anywhere, so go back and add only the borders you want with inline styles on either <td>s (best) or <table>s. Eg:
<table border="0" cellpadding="0" cellspacing="0" dir="ltr">
<tr>
<td style="border-top: 1px solid #ffffff;">
content
</td>
</tr>
</table>
This should produce an email with no unintentional borders anywhere. I'm not sure what pasting from Google Sheets is like, but you'll want to edit the HTML in this way to make sure it displays correctly.
I had to create an emailing html and I can say it is definitely a hard thing to do. Now, making sure it is responsive is beyond obnoxious.
I'm stuck right now on a seemingly unsolvable problem.
Here is the problem : I have a table with 3 columns (column 1 is a table, column 2 a spacer colum, column 3 is a table).
When I go mobile, I want the third column to go under the column 1. But no matter what I try I cant do it.
Please note that the display parameter CANT be used. That's very important. Google mail doesnt know what display means (...)
The only thing that seem ok to use are : float and align.
Here is my jsfiddle
https://jsfiddle.net/cnw0o3wy/
the follow us and contact us cells are in the same table; that table must go under the first table. I fail to achieve that effect for now
<tr>
<td>
<table align="center">
<tr>
<td class="align-top grey responsive">
<table border="0" cellpadding="0" cellspacing="0" width="307">
<tbody>
<tr class="grey">
<td class="align-top"colspan="3"><img alt="" src="images/mobile.png" /></td>
</tr>
<tr class="grey">
<td width="113" class="w113"> </td>
<td>
<img src="images/appstore.png" title="Apple Store" />
</td>
<td>
<img src="images/googleplay.png" title="Google Play" />
</td>
</tr>
</tbody>
</table>
</td>
<td width="4"class="responsive">
</td>
<td class="responsive">
<table border="0" cellpadding="0" cellspacing="0" width="307" class="w307">
<tbody class="grey">
<tr class="grey">
<td class="align-top grey">
<table cellpadding="0" cellspacing="0" width="151" class="w151">
<tbody class="grey">
<tr>
<td style="line-height:6px;" height="6" width="151" class="w151"> </td>
</tr>
<tr>
<td style="padding-left: 7px;" class="t-gris px12 bold align-top">Follow us !</td>
</tr>
<!-- 32 PX SPACING -->
<tr>
<td height="36" width="151" class="w151"><img src="images/shim.png" alt="" height="31" /> </td>
</tr>
<tr class="align-center">
<td>
<img class="social" src="images/fb.png" alt="Facebook" />
<img class="social" src="images/twitter.png" alt="Twitter" />
<img class="social" src="images/mail.png" alt="Mail" />
</td>
</tr>
</tbody>
</table>
</td>
<td class="white">
<img alt="" src="images/shim.png" width="4" />
</td>
<td class="align-top grey">
<table cellpadding="0" cellspacing="0" width="151" class="w151">
<tbody class="grey">
<tr>
<td style="line-height:6px;" height="6" width="151" class="w151"> </td>
</tr>
<tr>
<td style="padding-left: 7px;" class="px12 bold t-gris align-top">Contact us !</td>
</tr>
<tr>
<td><img alt="" src="images/logo2.png" /></td>
</tr>
<tr>
<td style="padding-left: 7px;" class="px10 t-gris bold">
50/54 <br/>92100 <br/>+33 1 49 00 00 00 www.mail.fr
<span style="text-decoration: underline;">
courrier#mail.fr
</span>
</td>
</tr>
<tr>
<td style="line-height:7px;"height="7" width="151" class="w151"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
solved my problem with the following lines :
td[class="responsive-grey"],
td[class="responsive-grey responsive-grey-spacing"],
td[class="align-top grey responsive-grey"] {
float: left; width:100%;
}
basically float left on all three columns
I am trying to create a "cool" email signature for my company using only text and html with NO images whatsoever. I am trying to recreate our company's logo using only tables since it is basically a four cell table with different bg colors. What seemed easy at first has become quite a nuisance. It obviously looks good in browsers but once I paste it into Outlook 2013 the cells don't retain their height and width values. Any suggestions on how to make this work across most current email clients??
http://codepen.io/anon/pen/wqaLm
Firstly, a good technique is to style your cells inline like:
<td style="width:10px; height:10px;">
Secondly: have a look at this article: "A complete breakdown of the CSS support for every popular mobile, web and desktop email client"
Here is a basic example. Not sure exactly what the logo looks like, so here are a few versions. If you want to have the gap between the cells smaller than 20px, you need to use the 3rd technique. This is because Outlook has a min-height on cells of around 19px which will create a larger gap between the rows.
<table width="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" height="50" bgcolor="#333333">
</td>
<td width="50" height="50" bgcolor="#555555">
</td>
</tr>
<tr>
<td width="50" height="50" bgcolor="#444444">
</td>
<td width="50" height="50" bgcolor="#666666">
</td>
</tr>
</table>
<br><br>
<table width="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="40" height="40" bgcolor="#333333">
</td>
<td width="20" height="40">
</td>
<td width="40" height="40" bgcolor="#555555">
</td>
</tr>
<tr>
<td width="40" height="20">
</td>
<td width="20" height="20">
</td>
<td width="40" height="20">
</td>
</tr>
<tr>
<td width="40" height="40" bgcolor="#444444">
</td>
<td width="20" height="40">
</td>
<td width="40" height="40" bgcolor="#666666">
</td>
</tr>
</table>
<br><br>
<table width="60" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="30" height="30" align="left" valign="top">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#333333">
</td>
</tr>
</table>
</td>
<td width="30" height="30" align="right" valign="top">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#555555">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="30" height="30" align="left" valign="bottom">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#444444">
</td>
</tr>
</table>
</td>
<td width="30" height="30" align="right" valign="bottom">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#666666">
</td>
</tr>
</table>
</td>
</tr>
</table>
I am currently using perl HTML::Strip to extract text from my HTML file, however i have run into a minor problem with HTML specific spaces ie the " ". For some reason HTML::Strip->parse() doesnt seem to work in this instance. I know i can run the replace command later on. But i was checking to see if there another way i can accomplish this by tweaking the new() constructor? Thanks in advance
Perl Code:
my $hs = HTML::Strip->new();
my $line = join('',#htmlSource);
my $clean_text = $hs->parse( $line );
push #processedLines, grep { /\S/ } split (/\n/,$clean_text);
foreach my $f ( #processedLines ) {
print "$f\n";
}
Sample Output:
CBD_UnitTest
MtrTempEst
MtrTempEst_Init1 (C1-Coverage: 100.00 %, 1 out of 1 Testcases passed)
LeadLagFilt (C1-Coverage: 100.00 %, 1 out of 1 Testcases failed)
AssMechFiltInit (C1-Coverage: 100.00 %, 1 out of 1 Testcases passed)
Sample Dataset:
<table bgcolor="white" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table width="100%" cellspacing="0" cellpadding="1" bgcolor="white" border="0">
<tr bgcolor="#dcdcdc">
<td width="1%" bgcolor="white">
<img border="0" src="pictures/batch_module_notok.jpg"/>
</td>
<td colspan="3" width="1%">
<font face="tahoma" size="-2" color="black">
CBD_UnitTest
</font>
</td>
<td width="1%">
</td>
<td width="1%">
</td>
<td width="1%">
<img border="0" src="pictures/batch_check_notok.gif"/>
</td>
</tr>
<tr bgcolor="white">
<td width="1%" bgcolor="white">
</td>
<td width="1%" bgcolor="white">
<img border="0" src="pictures/batch_module_notok.jpg"/>
</td>
<td colspan="2">
<font face="tahoma" size="-2" color="black">
MtrTempEst
</font>
</td>
<td width="1%">
</td>
<td width="1%">
</td>
<td width="1%">
<img border="0" src="pictures/batch_check_notok.gif"/>
</td>
</tr>
<tr bgcolor="#dcdcdc">
<td width="1%" bgcolor="white">
</td>
<td width="1%" bgcolor="white">
</td>
<td width="1%" bgcolor="white">
<img border="0" src="pictures/batch_ok.jpg"/>
</td>
<td>
<a href="#CBD_UnitTest:MtrTempEst:ts_MtrTempEst_Init1"><font face="tahoma" size="-2" color="black">
MtrTempEst_Init1 (C1-Coverage: 100.00 %, 1 out of 1 Testcases passed)
</font></a>
</td>
<td width="1%">
</td>
<td width="1%">
</td>
<td width="1%">
<img border="0" src="pictures/batch_check_ok.gif"/>
</td>
</tr>
<tr bgcolor="#FF0000">
<td width="1%" bgcolor="white">
</td>
<td width="1%" bgcolor="white">
</td>
<td width="1%" bgcolor="white">
<img border="0" src="pictures/batch_notok.jpg"/>
</td>
<td>
<a href="#CBD_UnitTest:MtrTempEst:ts_LeadLagFilt"><font face="tahoma" size="-2" color="white">
<b>LeadLagFilt (C1-Coverage: 100.00 %, 1 out of 1 Testcases failed)</b>
</font></a>
</td>
<td width="1%">
<a name="LeadLagFilt_0"></a>
</td>
<td width="1%">
</td>
<td width="1%">
<img border="0" src="pictures/batch_check_notok.gif"/>
</td>
</tr>
<tr bgcolor="#dcdcdc">
<td width="1%" bgcolor="white">
</td>
<td width="1%" bgcolor="white">
</td>
<td width="1%" bgcolor="white">
<img border="0" src="pictures/batch_ok.jpg"/>
</td>
<td>
<a href="#CBD_UnitTest:MtrTempEst:ts_AssMechFiltInit"><font face="tahoma" size="-2" color="black">
AssMechFiltInit (C1-Coverage: 100.00 %, 1 out of 1 Testcases passed)
</font></a>
</td>
<td width="1%">
</td>
<td width="1%">
</td>
<td width="1%">
<img border="0" src="pictures/batch_check_ok.gif"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
Have you installed HTML::Entities?
The docs for HTML::Strip state:
"HTML::Strip will only attempt decoding of HTML entities if HTML::Entities is installed."
Figured out the answer from the link to HTML::Entities above. Thx #edibleEnergy
use HTML::Strip;
use HTML::Entities;
my $hs = HTML::Strip->new();
my $line = join('',#htmlSource);
_decode_entities($line, { nbsp => "" }, 1);
my $clean_text = $hs->parse( $line );
push #processedLines, grep { /\S/ } split (/\n/,$clean_text);
foreach my $f ( #processedLines ) {
print "$f\n";
}
I understand that we could just use the simple replace here (ie s/\ //g) But the above example works for instance with or without the ";" at the end. Please check the link provided in the #edibleEnergy's answer.
I'm coding a HTML e-mail but i run into a problem with the following HTML:
<table width="510" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="7" width="30" valign="top"><img src="http://www.dmxs.nl/upc/Luiaard/UPC5_08.jpg" alt="Voor slecht € 28,20 per maand" style="display:block;" border="0" /></td>
<td rowspan="2" width="455" bgcolor="#fff209" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:18px;" align="left"><span style="font-size:14px;"><strong>Titel</strong></span><br /><br />
<strong>- kop 1</strong><br />
<strong>- kop2</strong><br />
<span style="margin-left:20px;">• mini1<br />
</span>
<span style="margin-left:20px;">• mini2<br />
</span>
<span style="margin-left:20px;">• mini3<br />
</span>
<strong>- kop3<span style="text-decoration:none;"></span></strong><br />
<br />
<img src="http://www.dmxs.nl/upc/Luiaard/UPC4_14.jpg" alt="" border="0" width="141" /></td>
<td colspan="6" width="25" height="72" valign="top"><img src="http://www.dmxs.nl/upc/Luiaard/UPC5_10.jpg" alt="Voor slecht € 28,20 per maand" style="display:block;" border="0" /></td>
</tr>
<tr>
<td width="5" bgcolor="#e7e7e8" style="font-size:1px; width:5px;"> </td>
<td width="1" bgcolor="#e7e7e8" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#dededf" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#cbcbcc" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#b0b0b1" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#8b8b8b" style="font-size:1px; width:1px;"> </td>
<td width="20" bgcolor="#fff209"></td>
<td width="20" bgcolor="#fff209"></td>
<td width="1" bgcolor="#8f8e81" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#adadae" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#cacacb" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#ddddde" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#e6e6e7" style="font-size:1px; width:1px;"> </td>
</tr>
</table>
In Chrome and Firefox this works great however in Internet explorer the following part ain't working (not showing).
<td width="5" bgcolor="#e7e7e8" style="font-size:1px; width:5px;"> </td>
<td width="1" bgcolor="#e7e7e8" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#dededf" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#cbcbcc" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#b0b0b1" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#8b8b8b" style="font-size:1px; width:1px;"> </td>
<td width="20" bgcolor="#fff209"></td>
<td width="20" bgcolor="#fff209"></td>
<td width="1" bgcolor="#8f8e81" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#adadae" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#cacacb" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#ddddde" style="font-size:1px; width:1px;"> </td>
<td width="1" bgcolor="#e6e6e7" style="font-size:1px; width:1px;"> </td>
Does anybody had a solution for this problem(and no, we can't set the height static)?
Fiddle example.
Put in your 2 empty table cells.
Explorer/Outlook are known to collapse empty table cells, which for some reason is preventing the rest of the row from rendering.