Having trouble with emails that have multiple images side by side but each row has a different amount of columns/images. I'm putting a table in each row so I don't have to use colspan as the images are all different widths. The more images in a row, the wider the row even though all rows have the same combined width of all their images.
See image example here:
Example HTML (See JS fiddle as the code won't post correctly here for some reason):
<table id="Table_1_col" width="600" border="0" cellpadding="0" cellspacing="0" background="ffffff"
style="background:#fff;display:block;table-layout:fixed;border-collapse:collapse!important;mso-table-lspace:0;mso-table-rspace:0;border-spacing:0;border:0;mso-cellspacing:0;mso-padding-alt:0;padding:0;margin:0;font-size:0;line-height:0;width:600px;min-width:600px;max-width:600px;"
valign="top">
<tbody>
<tr style="display:block;white-space:nowrap;">
<td style="font-size:0;line-height:0;margin:0;padding:0;background:url(images/_TRAVEL-15_05.jpg);background-image:url(images/_TRAVEL-15_05.jpg);background-size:100% 100%;"
valign="top" align="left"><a href="https://www.afterpay.com/en-AU/categories/travel" align="left"
style="font-size:0;line-height:0;display:block;margin:0;padding:0;" target="_blank"><img src="images/_TRAVEL-15_05.jpg"
width="600" height="241" alt=""
style="float:left;width:600px;display:block;margin:0;outline:0;text-decoration:none;-ms-interpolation-mode:bicubic;border:0;"
border="0" align="left"></a></td>
</tr>
</tbody>
https://jsfiddle.net/jup4xw3v/3/
The email has a set width of 600px and the additional side width is most notable on mobile devices where it breaks the flow of the email. The rows are weird widths due to the click areas from our designer.
No matter what I try I can't seem to get the rows displaying at the exact same width.
Related
I'm using import.io to extract informations from a website but I'm stucked on the email field only. I managed to extract other information, but this is a little bit confusing for me.
This is the code on the website that I need to extract. And the website has several values with this kind of code, several email addresses.
<td valign="top"><table width="100%" cellspacing="0" cellpadding="3" border="0" class="text_black-11">
<tbody>
<tr>
<td width="35" align="center" class="text_02-11"><img width="16" height="16" src="/interface/icon_www.png"></td>
<td class="text_02-11"><a target="" href="http://www.website.com" class="text_02-11">Visit Website</a></td>
</tr>
<tr>
<td width="35" align="center" class="text_02-11"><img width="19" height="12" src="/interface/icon_email.png"></td>
<td class="text_02-11"><a target="" href="mailto:info#mail.com" class="text_02-11">Send Email</a></td>
</tr>
</tbody>
if you can't target the email directly and it always comes as an hrefinside an a tag with mailto
you can try this
//a[contains (#href, 'mailto:')]/#href
or
//a[contains (., 'Send Email')]/#href
if the website is constructed this way
also if you want to clean that field after selection you can add this regex to the regex field inside import.io
(?<=mailto:).*
just make sure that the xpath works first
I’ve set up a bare bones test here: https://www.emailonacid.com/app/acidtest/display/summary/eypNVE82ae543QsSdfiYJlcLNqtcmvKz1ybIvJRlCPj2n/shared
The simple goal is to have the main text align to the top of its TD, and the CTA text align to the bottom of its TD. As you can see, this is happening in every client except the Outlooks noted above (ignore mobile for this question).
Note that we do not know if the CTA will be more than one line, so it's not possible to determine its height.
I’ll post the code snippet below.
Thanks!
Don
<table width=“640” border=“0” cellpadding=“0” cellspacing=“0”>
<tr>
<td valign=“top”>http://imgs.elainemedia.de/w4gu/f8451d426cd5373fde24a98fcf496945.jpg</td>
<td valign=“top” bgcolor=”#000000”><table width=“100%” border=“0” cellspacing=“0” cellpadding=“0”>
<tr>
<td rowspan=“2” valign=“top”>http://imgs.elaine-asp.de/w4gu/1fce9767d9699082bfea5b0c475aece5.gif</td>
<td valign=“top”>Buy a Pro’s Bike
Ridden by the world’s finest, now available to you. With our Original Pro Bikes it’s easier than ever to own a unique piece of cycling history.</td>
</tr>
<tr>
<td valign=“bottom” style=“color:#ffffff;”>CTA GOES HERE</td>
</tr>
</table></td>
</tr>
</table>
Valign does not work because your inner table height does not scale up to the parent td height.
The problem you have, that there is no sure way to control the height of your inner table to fit outer table (besides fixed height on td's in both tables). I'm assuming you are trying to set height of the inner table by using invisible spacer gif image, but from your snippet I can't deduce if you have set height of the img tag.
Example:
<img src="http://imgs.elaine-asp.de/w4gu/1fce9767d9699082bfea5b0c475aece5.gif"
height="260" width="1" style="display: block; border: none;" alt="" />
Note: if the example above doesn't work, try changing spacer gif original image size from 1x1 to 10x10 pixels. Below is a quote from this article explaining spacer gifs in Outlook:
The fix is surprisingly easy and doesn't require any changes to the message markup. Instead just change the spacer GIF so that it is 10 x 10 pixels instead of 1 x 1. I think Outlook is maybe looking out for images that are 1 x 1 and treating them differently, maybe because they are often used as web beacons. (...) Of course you can still set the HEIGHT and WIDTH of the spacer GIFs to a size smaller than 10 x 10, so it's still possible to have them set to 1 x 1 and they'll still work as before.
Another solution is to remove inner table completely, and rebuild outer one as follows:
<table align="center" border="0" bgcolor="#000000" cellspacing="0" cellpadding="0"
width="640" style="width: 640px; background-color: #000000;">
<tr>
<td valign="top" rowspan="2">
<img src="http://imgs.elainemedia.de/w4gu/f8451d426cd5373fde24a98fcf496945.jpg"
width="460" height="280" style="display: block; border: none;" alt="">
</td>
<td valign="top" style="color: #ffffff;">
Buy a Pro’s Bike<br>
Ridden by the world’s finest, now available to you.
With our Original Pro Bikes it’s easier than ever to own
a unique piece of cycling history.
</td>
</tr>
<tr>
<td align="center" style="color: #ffffff;">
<!-- note you can go any align/valign combination here -->
CTA GOES HERE
</td>
</tr>
</table>
See how the two compare. I have added borders to illustrate how the td's and tables stacks against each other.
https://jsfiddle.net/jtquaja1/2/
Spacer images are a nice and simple solution, but can cause issues due to things like Outlook ignoring html image re-sizing, Outlooks different rendering of image size based on DPI as well as issues with image blocking or image-to-text ratio (importance is up for argument currently)
The most comprehensive cross email client alternative, although time consuming and complex, is to create a row above and below each and using height (with mso-line-height-rule for small rows in Outlook) to make each table the same size and the content centered.
sample: <tr><td height="10" style="font-size:10px; mso-line-height-rule:exactly; line-height:10px;"> </td></tr><tr><td>content goes here</td></tr> <tr><td height="10" style="font-size:10px; mso-line-height-rule:exactly; line-height:10px;"> </td></tr>
This can be accomplished using padding as well on the TD, instead of new rows. Some consider this to not be a comprehensive solution due to some mail clients may not render the padding correctly. I personally use the padding method as it is more efficient and more controllable for responsive design and have not found any issues in any email clients or browser.
sample: <tr><td style="padding-top:10px; padding-bottom:10px;">content goes here</td></tr>
Whatever you choose, my best advice is to test, test, test and test some more.
I did a template for our email marketing campaing. But on gmail, msn (browser based) are good but on outlook is bad. How can i solve the problem ?
A piece of my code:
<td valign="top" width="194" class="rightColumnContent">
<!-- // Begin Module: Top Image with Content \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="194px" height="194px" style="background-color:#fafafa; margin-top:20px;">
<tr mc:repeatable>
<td valign="top">
<img src="http://cdn.popsbuy.com/emailing/y/images/arama.png" style="max-width:69px;float:left;margin-right:15px;" mc:label="image" mc:edit="tiwc200_image01" /><h4 class="h4" style="float: left;">ARAMA</h4>
<div mc:edit="tiwc200_content01" style="text-align:center; margin-top:10px;clear:both;"><br />
Aradığın ürüne, siteye, markaya doğrudan Popsbuy hesabınla erişebilirsin.
</div>
</td>
</tr>
</table>
<!-- // End Module: Top Image with Content \\ -->
</td>
You need to re-declare your font stack in every table cell.
Also, avoid margin, instead use padding in <td> tags.
Float is also not widely supported. If you want to float, you should be using align="left" instead, but for your example, it is better to keep it in tables.
Your code should look something like this:
<table width="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="60">
<img src="http://cdn.popsbuy.com/emailing/y/images/arama.png" mc:label="image" mc:edit="tiwc200_image01" />
</td>
<td width="140" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000; font-weight:bold; padding-left:15px; font">
ARAMA
</td>
</tr>
<tr>
<td width="100%" colspan="2" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
<div mc:edit="tiwc200_content01" style="text-align:center; margin-top:10px;clear:both;"><br />
Aradığın ürüne, siteye, markaya doğrudan Popsbuy hesabınla erişebilirsin.
</div>
</td>
</tr>
</table>
I set the table width 200, you could change it to percentage based if you prefer.
Getting HTML emails to look great across all clients is something that pretty much everyone who has tried to do email marketing runs into. There is no simple answer to your question, but I would start by following some of this advice and testing your email templates with a tool like litmus.
Float simply will not work in Outlook 2007+. Versions of Outlook for Windows from 2007+ use Office as the rendering engine, and thus won't render standard HTML properly.
Align will often work, but the safest course of action is to create a two-column table with the image on the left and the text on the right. The image column should have an explicitly set width. (Don't try to make the table more than one row. In email HTML, it's better to nest a series of simple tables than to create one complex one.)
Make sure that you use the appopriate old-style pre-HTML 4 tag attributes in your table tags. In particular, to get your layout, make sure that the table cells have "valign='middle'".
If you're sending through one of the major email service providers, such as Mailchimp or Campaign Monitor (and you should be, to protect the integrity of your list), it will inline all your style code for you -- so you don't actually need to redeclare the styles for every table cell, you can simply use an embedded stylesheet.
First off:
I hate Outlook :)
Here is why:
I am trying to send an email with the following structure (this is just a simplified example so please don't tell me "Just get rid of the middle tds")
<table width="400">
<tbody>
<tr>
<td width="200"><img src="http://lorempixel.com/200/200/"></td>
<td width="0"></td>
<td width="0"></td>
<td width="200"><img src="http://lorempixel.com/200/200/"></td>
</tr>
</tbody>
</table>
The problem is, that the two tds in the middle lead to a space between the two pictures as you can see in this screenshot http://i48.tinypic.com/6i8rvk.png
I feel like I have already tried everything possible.
cellpadding = 0, cellspacing = 0, border = 0 on table
setting the width of every td with inline css
adding border-collapse: collapse to all tds and the table
adding margin:0, padding:0; border 0; to all tds in inline css
setting the font-size and line-height to 0 in inline css
Nothing worked.
Side notes:
If there is only one empty table cell in the middle, the rendering is fine. So it seems as if each td only accounts for half a pixel
This is already a simplified example and I cannot change the structure of the table meaning that I have to find a workaround for the rendering problems rather than fixing the rather unpretty coding style unfortunately.
Testing
Here is my testing environment - feel free to play around with it: http://putsmail.com/d58ffa01c4b3e29123baab00754716
try putting padding-left and/or padding-right to the tds containing the images, as inline css.
Latest edit: try this --
<tr>
<td style="border-collapse: collapse; margin:0;padding:0; border:0" align="right" width="200"><img src="http://lorempixel.com/200/200/" style="display:block;margin:0;padding:0; border:0" border="0"></td>
<td style="width: 0px;line-height: 0px; font-size: 0px; border-collapse: collapse;padding:0;margin:0;border:0" width="0"></td>
<td style="width: 0px;line-height: 0px; font-size: 0px; border-collapse: collapse;padding:0;margin:0;border:0" width="0"></td>
<td style="border-collapse: collapse; margin:0;padding:0; border:0" align="left" ><img src="http://lorempixel.com/200/200/" style="display:block;margin:0;padding:0; border:0" border="0"></td></tr>
i removed the width from tds containing images, hence it takes the default width of the images.
Outlook doesn't like hiding content ;-) But what should work - add some conditional code:
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;table-layout:fixed">
<tr>
<td style="width:217px" valign="top">
column 1
</td>
<!--[if !mso]><!--><td style="line-height:0;max-height:0;width:0;overflow:hidden;font-size:0;display:none" valign="top">
hidden column 2
</td>
<!--<![endif]--><td valign="top">
column 3
</td>
</tr>
</table>
To hide it from outlook, the comments around the column with [!mso / endif] are enough. However you may want to hide in also in outlook.com, gmail.com and some others - for this the other styles are included. Don't forget to restore the settings in mobile view with media queries.
Good luck
Oleg
Have you tried putting the <td>s on the same line? That is, removing the linebreak between elements?
(inner element linebreaks are ignored)
<td>Foo
</td><td>
Bar</td>
Does "display: none" help?
<table width="400">
<tbody>
<tr>
<td width="200"><img src="http://lorempixel.com/200/200/"></td>
<td width="0" style="display:none"></td>
<td width="0" style="display:none"></td>
<td width="200"><img src="http://lorempixel.com/200/200/"></td>
</tr>
</tbody>
</table>
Btw, I did not suffer your problem on Outlook 2003, so I cannot verify it.
I have continued trying to solve this problem - nothing (I have tried every proposal here and more) worked.
In the end I went the more difficult but also the cleanest way I believe and wrote a script that removes all empty columns and all empty rows with an xsl transformation. Now it works in Outlook 2003 - 2010.
I've been messing with this for far too long, and managed to get IE8 working, but IE7 has me stumped.
I've got a table, and for each column, I am trying to extract a number of divs. I am only extracting divs which match specific selectors, not all divs in the column.
My original jquery selector was
jQuery('div.a1, div.a3, div.a4, div.a7','table#a'+tableId+' td:nth-child('+columnNum+')').each(function(){
alert(jQuery(this).attr('id'));
});
This worked great in FF, but didn't trigger the .each function at all in IE.
After messing around for a bit, I got to
jQuery('td:nth-child('+columnNum+') > div.a1, td:nth-child('+columnNum+') > div.a3, td:nth-child('+columnNum+') > div.a4,td:nth-child('+columnNum+') > div.a7', table#a+'tableId).each(function(){
alert(jQuery(this.attr('id'));
});
Not so nice, but works in IE8.
I had tried all sorts of combinations using .eq(+'columnNum+') but nothing else was working.
Now I go and test in IE7, and again the .each isn't being triggered.
What is the nicest way (and cross-browser compatible) to work with this sort of .each element?
--------------addition--------------
After further testing and playing around with suggestions from DrJ and bdukes, I've found that the table#'+tableId breaks the function in both IE7&8.
I've gone back to my original code
jQuery('div.a1, div.a3, div.a4, div.a7','table#a'+tableId+' td:nth-child('+columnNum+')').each(function(){
alert(jQuery(this).attr('id'));
});
as that seems to me the most efficient.
If I remove 'table#a'+tableId, i get the correct response in all browsers, except that it is adding up the results from all tables, and I need to be able to get only the results from one table at a time.
I have also tried 'table#a'+tableId+'>td:nth-child('+columnNum+')').each, but that doesn't work either.
The first function i've used works perfectly in firefox.
----------------the html being selected---------------------------
The tables are being created dynamically in javascript so I can't really copy and past it, but here is what the output looks like. It ends up looking kinda like a gantt chart on a table.
<table id="a1">
<tr>
<th colspan="5">
Group Name
</th>
</tr>
<tr class="rowId1" >
<td>
<div class="a1" id="a43" style="margin-left:13px; width:60px" ></div>
</td>
<td>
</td>
<td>
<div class="a3" id="a93" style="margin-left:4px; width: 80px" ></div>
<div class="a2" id="a94" style="margin-left:4px; width: 30px" ></div>
</td>
<td>
<div class="a1" id="a24" style="margin-left: 15px; width: 65px;" ></div>
</td>
<td>
</td>
</tr>
</tr>
<tr class="rowId1" >
<td>
<div class="a7" id="a24" style="margin-left:10px; width:60px" ></div>
</td>
<td>
<div class="a2" id="a15" style="margin-left:14px; width: 22px" ></div>
</td>
<td>
;
<div class="a2" id="a105" style="margin-left: 8px; width: 50px" ></div>
</td>
<td>
</td>
<td>
<div class="a4" id="a102" style="margin-left: 5px; width: 45px;" ></div>
</td>
</tr>
</table>
It turns out this was an issue with IE failing when two different elements have the same ID. Apparently this breaks the .each function.
I had two tables
table.notes#a1 & table.inputs#a1
The .each function should have gone through each table but instead found neither.
jQuery also wouldn't run in ie with
jQuery('div.a1, div.a3, div.a4, div.a7','table.inputs#a'+tableId+' td:nth-child('+columnNum+')').each(function(){
alert(jQuery(this).attr('id'));
});
which it should have done, as I am them pointing directly to a specific table even if the id is not unique.
I'm using id's retrieved from the database for the id, and IE doesn't like id's that start with numbers, so I just added an 'a' to the beginning of the id.
However, it apparently doesn't like that either, so now I'm adding the first letter of the class and then the '1' or whatever the id number is.
This solves the issue.