What would be the best way to make a whole block of content clickable in an html email so that it also works in Outlook (2003, 2007, 2010).
For example, I have this Call-To-Action:
So far I've come up with this:
<table cellpadding="0" cellspacing="0" style="border: 1px #ffffff dashed;">
<!-- NAVIGATION AREA START -->
<tr>
<td width="370" style="font-family:'Times New Roman', Times, serif;font-size: 22px;font-weight:bold;line-height:52px;">
<div style="margin-left: 15px; margin-top: 0; margin-bottom: 0; height:100%;">
<a href="http://${servername}/" style="text-decoration:none;color:#fff;">
LEARN MORE ABOUT ABOUT THIS
</a>
</div>
</td>
<td width="160">
<table cellpadding="0" cellspacing="0" height="24">
<tr>
<td>
<div style="background-color:#fff; margin-top: 0; margin-bottom: 0;width:128px;height:24px;color: #000000;text-decoration: none;font-size: 12px;line-height: 24px;">
<a href="http://${servername}/" style="text-decoration:none;color:#000;margin-left: 5px;">
CLICK HERE
</a>
</div>
</td>
<td>
<img style="display: block;" width="13" height="24" border="0" alt="" title="" src="http://${servername}/images/mailing/arrow-white.png" />
</td>
</tr>
</table>
</td>
</tr>
<!-- NAVIGATION AREA END -->
</table>
The problem is that the whole area within the dashed border should be clickable. I tried wrapping the whole table with an a tag, but this doesn't work in Outlook or IE (it works in Firefox).
Or, consider this:
<table width="255" cellspacing="0" cellpadding="0" bgcolor="#000000" style="border: 10px solid #fff;">
<tr>
<td valign="top" style="width:130px;padding-bottom: 15px; padding-top: 15px; padding-left: 15px;">
<p style="color:#ffffff;font-family:'Times New Roman', Times, serif;font-size: 16px;margin-top: 0; margin-bottom: 5px;">
<strong>FAQ</strong>
</p>
<p style="font-family: arial,sans-serif; font-size: 14px; color:#d0d0d0; line-height: 20px; margin-top: 0; margin-bottom: 0;">
Learn more about our services.
</p>
</td>
<td align="center" style="padding-bottom: 15px; padding-top: 15px;">
<p style="margin-top: 0;margin-bottom: 0;">
<img width="54" height="102" border="0" src="http://${servername}/images/mailing/questionmark.png" title="" alt="">
</p>
</td>
</tr>
</table>
Here too, the whole block (within the white border) should be clickable, not just the individual lines of text.
How would you go about this, considering the bad support for CSS in Outlook 2007/2010 (e.g. no display CSS-property)?
Bottom line: How to link a block level alement without being able to wrap it with a (tried with table and div) or using display: block;?
This answer will aim to show how all different options render in Outlook (2013), starting with the "best" solution found so far:
<table width="100%" style="background-color: #ccc;"><tr>
<td style="padding: 15px; text-align: center;">
<a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
Go to some great website!
</a>
</td>
</tr></table>
This will be rendered like this:
Or, with the link hitbox annotated:
Yeah, that sucks: you want the entire block to be clickable. Basically I'm here to tell you that the answer to the question "how to link block elements (outlook-compatible)" is: this is not possible, not without workarounds.
To support my claim (PS. I highly welcome anyone proving this claim wrong!), here's all the variations I've tried, with their respective renderings in Outlook. I've tried to include some solutions suggested in other answers too.
Here's the code I've used to generate e-mails:
<html>
<head>
<title>My e-mail</title>
</head>
<body>
<table width="660px" align="center" border="0" cellspacing="0" cellpadding="0" style="width: 660px;">
<tr>
<td style="padding: 15px;">
<p>1. The "best" text-only version I've found:</p>
<table width="100%" style="background-color: #ccc;"><tr>
<td style="padding: 15px; text-align: center;">
<a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
Go to some great website!
</a>
</td>
</tr></table>
<hr />
<p>2a. Workaround using an image. Setting size through style attribute does not work.</p>
<a href="http://www.stackoverflow.com">
<img alt="Go to some great website!" src="your custom image" style="width: 100%; height: 30px;" />
</a>
<hr />
<p>2b. Workaround using an image. Kind of works, but requires an image of exactly correct size through attributes.</p>
<a href="http://www.stackoverflow.com">
<img alt="Go to some great website!" src="your custom image" width="640px" height="30px" />
</a>
<hr />
<p>3. Attempt to link the entire table. Does not work.</p>
<a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
<table width="100%" style="background-color: #ccc;"><tr>
<td style="padding: 15px; text-align: center;">
Go to some great website!
</td>
</tr></table>
</a>
<hr />
<p>5. Attempt to link the entire div. Does not work.</p>
<a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
<div style="background-color: #ccc; padding: 15px; text-align: center;">
Go to some great website!
</div>
</a>
<hr />
<p>6. Setting anchor tag to display as a block. Does not work.</p>
<a href="http://www.stackoverflow.com" style=" display: block; text-decoration: none; color: #333; background-color: #ccc; padding: 15px; text-align: center;">
Go to some great website!
</a>
<hr />
<p>6. Hacking with line-height, does not work.</p>
<div style="background-color: #ccc; text-align: center;">
<a href="http://www.stackoverflow.com" style="line-height: 3em; text-decoration: none; color: #333;">
<span style="vertical-align: middle;">Go to some great website!</span>
</a>
</div>
</td>
</tr>
</table>
</body>
</html>
And here's how they're rendered by Outlook 2013, annotated with the link hitbox:
Put an <a> in each of the fields. Not elegant, but this works.
If there is a field that is empty, just put a transparent image in there that's the right width and height. (image itself, not resized in html)
Personally I'd add the call to action as an image in the email and simply wrap it with an anchor tag.
<img src="http://myimage.com/image.png" alt="" />
Given that this is for an email, is there a reason you want to build up the call-to-action in HTML?
UPDATE
Alternatively you could do something like this:
http://jsfiddle.net/gv5aZ/
(Quick fiddle i've put together for you)
I've not tested this extensively but I did manage to get something working.
In you header styles and in the 'a href=""' add the below:
Header style:
#outlook a { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; }
Link inline style:
<a style="font-family: #; font-size: #px; text-decoration: #; border: #color #px #; color: #; padding-bottom: #px; padding-top: #px; padding-left: #px; display: inline-block; padding-right: #px; font-style: #;" href="#" target="_blank">Read more...</a>
Replace # with your styles of course except for the display property (leave that one in!)
Again, I haven't tested this extensively but for me it worked so don't miss anything out from what I've written here :)
EDIT: You might not have a border in your design so make it the same colour as your background
Why don't you just put an anchor around the table? Not entirely sure if it works in outlook though, but it's the easiest solution
<table>....</table>
Related
I have no basic clue about html and and right now am kinda stuck, I need two images side by side around the bottom half part of a email template, thing is no matter what I do I can't get the image to be side by side. there is already a hero image on the email template I am not sure if that's what causing the error. Can you please help me with this or give me some learning metrials so that I can figure this out.
Can you please help me with this or give me some learning metrials so that I can figure this out.
PS: Please don't mind the rickroll video, I added it to replace the link
The below code is how the banner hero image is setup
<tr>
<td class="hero" style="border-collapse: collapse; border-spacing: 0px; margin: 0px; padding: 0px;" align="center" valign="top">
<a title="placeholdertext" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" rel="noopener">
<img class="fr-dib" style="width: 620px; max-width: 560px; color: #000000; font-size: 13px; padding: 0px; outline: currentcolor none medium; text-decoration: none;" title="rick roll" src="test_mail_f.jpg" alt="rick roll" width="560" height="349" border="0" />
</a>
</td>
</tr>
Use a <table>, it should be compatible with Outlook email client as well. For more on HTML email see this article.
<table>
<tr>
<td>
<a href="#">
<img src="https://placem.at/places?w=160&h=90&random=1&txt=1&txtclr=fc0">
</a>
</td>
<td>
<a href="#">
<img src="https://placem.at/places?w=160&h=90&random=1&txt=2&txtclr=fc0">
</a>
</td>
</tr>
</table>
You can do it by several ways. The easiest is use another table in td with two columns, like this:
<tr>
<td class="hero" style="border-collapse: collapse; border-spacing: 0px; margin: 0px; padding: 0px;" align="center" valign="top">
<a title="placeholdertext" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" rel="noopener">
<img class="fr-dib" style="width: 620px; max-width: 560px; color: #000000; font-size: 13px; padding: 0px; outline: currentcolor none medium; text-decoration: none;" title="rick roll" src="test_mail_f.jpg" alt="rick roll" width="560" height="349" border="0" />
</a>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<a href="#">
<img src="#">
</a>
</td>
<td>
<a href="#">
<img src="#">
</a>
</td>
</tr>
</table>
</td>
</tr>
Don't forget to let me know if it works for you or not.
I would recommend using the display: flex; property, which automatically makes the flow of the content inside a container to a row.
<div style="display: flex;">
<img src="example.com" />
<img src="example.com" />
</div>
I'm hoping someone can help me with this. I have tried everything I know and read all the articles I could find. Nothing has worked
Basically, there is what seems to be a neon blue background color showing up ONLY on Gmail in the <td> containing the header image.
Screenshot (with image missing):
Screenshot (with image showing neon background):
Table code:
<table border="0" cellspacing="0" class="body-wrap" bgcolor="#FFFFFF" style="max-width: 600px">
<tbody>
<tr>
<td align="center" class="container" bgcolor="=FFFFFF" style="padding: 0px; margin: 0px; line-height:10px; font-size:6px">
<div class="container1">
<a href="http://www.rolla.com" style="text-decoration: none; border: none"><img src="https://rolla.igamingcloud.com/Images/Emails/MailSystem/Upload/rolla_system_header.gif" align=“absbottom” width="100%" style="display:block; max-height: 172px; max-width: 600px; border:none; padding: 0px; margin 0px" border="0" alt="Rolla Casino Logo"
/></a>
</div>
</td>
</tr>
</tbody>
</table>
I have specified background colour white in the table and td. I have also added style attributes to the border to the href and img tags. None of these have worked.
The classes container and container1 both contain:
border-width:0 none;
background: #ffffff;
text-decoration: none;
text-decoration-color: #ffffff;
Even when I unlinked the header image and sent another test, the blue was there!
I think you added an equal rather than a hash in background color decoration for the td. You have bgcolor="=FFFFFF" instead of bgcolor="#FFFFFF". Below is the fixed code:
<table border="0" cellspacing="0" class="body-wrap" bgcolor="#FFFFFF" style="max-width: 600px">
<tbody>
<tr>
<td align="center" class="container" bgcolor="#FFFFFF" style="padding: 0px; margin: 0px; line-height:10px; font-size:6px">
<div class="container1">
<a href="http://www.rolla.com" style="text-decoration: none; border: none"><img src="https://rolla.igamingcloud.com/Images/Emails/MailSystem/Upload/rolla_system_header.gif" align=“absbottom” width="100%" style="display:block; max-height: 172px; max-width: 600px; border:none; padding: 0px; margin 0px" border="0" alt="Rolla Casino Logo"
/></a>
</div>
</td>
</tr>
</tbody>
</table>
Cheers
i have a problem with 2 divs that have to show right next to each other with space between them. It has to be responsive ofc and the max-width can only be 600px while the min-width has to be 280px.
It actually works as intended when i open the html in the browser, but when i send it as a mail, the two divs are right next to each other, with the space being above the second div instead of between them. Also they are fixated to the left for some reason.
How it looks in the browser (and how it should look):
How it looks after being sent per mail:
So i dont really know why it doesnt work as intended..
Also sorry for all that code, but if you test it in a browser u can see, that it works perfectly fine , which it doesnt when used as a mail template..
<div style="background: url('http://www.iuno-projekt.de/media/com_acymailing/templates/newsletter/img/hintergrund.png'); max-width: 700px; margin-left: auto; margin-right: auto;">
<div class="layout two-col" style="Margin: 0 auto;max-width: 600px;min-width: 280px; width: calc(28000% - 167400px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
<div class="layout__inner" style="border-collapse: collapse;display: table;width: 100%;">
<div class="column" style="background: #ffffff; Float: left;max-width: 280px;min-width: 280px; width: 280px;text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif; margin-left: auto; margin-right: auto;">
<div style="">
<div style="font-size: 12px;font-style: normal;font-weight: normal;line-height: 19px;Margin-bottom: 20px;" align="center">
<img style="border: 0;display: block;height: auto;width: 100%;max-width: 450px;" alt="some img" width="260">
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px; background: #ffffff;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<h3 style="Margin-top: 0;Margin-bottom: 12px;color: #3b4554; font-family: 'Raleway', Arial, Helvetica, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: 0.015em; line-height: 1.15em; text-transform: uppercase; padding: 0 20px;"><strong>Title</strong></h3>
</div>
</div>
<div style="background: #ffffff; Margin-left: 20px;Margin-right: 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<p style="Margin-top: 0;Margin-bottom: 20px;">..........</p>
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px;">
<div class="btn btn--depth btn--medium" style="Margin-bottom: 20px;text-align: center;">
<img src="http://www.iuno-projekt.de/media/com_acymailing/templates/newsletter/img/right-arrow-grn.png" alt="icon" />MORE
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px;">
<div style="mso-line-height-rule: exactly;line-height: 15px;font-size: 1px;"> </div>
</div>
</div>
<div style="Float: left; max-width: 40px; width: 40px; margin-left: auto; margin-right: auto;" align="center">
<div style="mso-line-height-rule: exactly;line-height: 15px;font-size: 1px;"> </div>
</div>
<div class="column" style="background: #ffffff; Float: left;max-width: 280px;min-width: 280px; width: 280px;text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif; margin-left: auto; margin-right: auto;">
<div style="">
<div style="font-size: 12px;font-style: normal;font-weight: normal;line-height: 19px;Margin-bottom: 20px;" align="center">
<img style="border: 0;display: block;height: auto;width: 100%;max-width: 450px;" alt="some img" width="260">
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px; background: #ffffff;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<h3 style="Margin-top: 0;Margin-bottom: 12px;color: #3b4554; font-family: 'Raleway', Arial, Helvetica, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: 0.015em; line-height: 1.15em; text-transform: uppercase; padding: 0 20px;"><strong>Title</strong></h3>
</div>
</div>
<div style="background: #ffffff; Margin-left: 20px;Margin-right: 20px;">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<p style="Margin-top: 0;Margin-bottom: 20px;">.........</p>
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px;">
<div class="btn btn--depth btn--medium" style="Margin-bottom: 20px;text-align: center;">
<img src="http://www.iuno-projekt.de/media/com_acymailing/templates/newsletter/img/right-arrow-grn.png" alt="icon" />MORE
</div>
</div>
<div style="Margin-left: 20px;Margin-right: 20px;">
<div style="mso-line-height-rule: exactly;line-height: 15px;font-size: 1px;"> </div>
</div>
</div>
</div>
</div>
</div>
As #N. Ivanov said :
Email templates do not work the same way that would a browser work. You will be best off generating a proper HTML template using the table tag rather than divs.
So for those of you who must use tables in your HTML emails
, I have some information about how they perform across the board. I ran some tests and discovered that, while I couldn’t find a perfect solution, I did manage to collect some useful tips to make your tables behave for the most part.
Table Math, Meet Box-Model Math
So it turns out that when one places table widths, td widths, td padding and CSS padding into a blender, the results are quite chaotic. Inconsistent, to the say the least. Take, for example, the following table:
<table cellspacing="0" height="450" cellpadding="0" border="1px" width="400">
<tr height="100%">
<td width="100" border="1px" height="100%"></td>
<td width="300" border="1px" height="100%"></td>
</tr>
</table>
Just as intended, the resulting width of this table is 400 pixels and the width of the columns are 100 and 300 pixels:
But when some padding is added—via either CSS or HTML—the widths of the columns are compromised:
However, when table width is kissed good bye, the results are not unlike a CSS box model. If padding is added to the original example and the table widthis removed, the code looks like this:
<table cellspacing="0" height="450" cellpadding="10" border="1">
<tr>
<td width="80" height="100%" border="1"></td>
<td width="280" height="100%" border="1"></td>
</tr>
</table>
And, as intended, the resulting widths are correct for both the table and the columns:
But note how the td widths were reduced to accommodate the new padding. This is just like the CSS box model in which 100 pixels wide + 10 pixels padding = 120 pixels total.
**
Nested Tables
**
If a table is nested inside another, the aforementioned rules apply with the exception of a couple important variances:
Yahoo Mail (new), Gmail, Outlook 2007 and Eudora apply extra width to account for borders. But only when they are nested, as the parent table behaves appropriately.
Applying widths to td tags that also have CSS or HTML padding creates confusion across the board. Nearly every client renders the widths in its own unique fashion.
Even without any borders there are variances in width by 2–4 pixels for a nested table with two columns. My tests were inconclusive as to the rhyme and reason behind this unnatural phenomenon. Just know that pixel perfect isn’t an option (unless there is some hidden secret behind this).
source->
Email templates do not work the same way that would a browser work. You will be best off generating a proper HTML template using the <table> tag rather than divs. Further you should only use inline CSS and not use any classes for example bootstrap ones. Hope this helps!
I have put together the following email signature and pasted it in to gmail. I've tested it thoroughly, but have recently noticed a problem where iOS Mail app forces the body text of the email to 50% width of the screen (See screenshot attached).
I've tried inserting media queries which I now know get stripped from Gmail. I also tried removing the table and creating the signature with p tags and inline styles. That messed up the width even more.
So I just can't understand why iOS mail changes the width of the body text above the signature?
<table cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
<tbody><tr>
<td style="line-height: 100%;">
<table cellpadding="0" cellspacing="0" border="0" align="left" height="274"
style=" border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width: 480px;">
<tbody>
<tr>
<td colspan="2">
<a href="http://www.hostel.com/" target="_blank">
<img src="http://i57.tinypic.com/2vmar0i.png" style="padding: 12px 20px 0 0;">
</a>
</td>
</tr>
<tr>
<td colspan="2" valign="center" height="5">
<p style="font-family: Arial; font-weight: bold;
font-size: 19px; line-height: 1.3; text-align: left; padding: 10px 0; margin: 20px 0 10px 20px;">
Senders Name<br>
<span style="font-size: 16px;">Job Title</span>
</p>
</td>
</tr>
<tr style="height: 50px;">
<td valign="top" style="line-height: 100%; width: 47%;">
<p style="line-height:1.7; margin-top: 0px; font-size: 11px; padding-right: 10px; margin-left: 20px;">
<a href="https://goo.gl/maps/twgHt" target="_blank" style="text-decoration: none !important; color: #000 !important;">
<strong>Address</strong><br>
Street Name<br>
London</p></a>
</td>
<td width="230" valign="top" style="line-height:1.7">
<p style="line-height:1.7; margin-top: 0px; font-size: 11px;">
<strong>T</strong>:
+44 (0)207 729 1833<br>
<strong>M</strong>:
+44 (0)771 216 9796<br>
<strong>W</strong>:
<a href="http://www.hostel.com/" target="_blank" style="color: #000; text-decoration: none;">
www.hostel.com </a></p>
</td>
</tr>
<tr>
<td colspan="2">
<p style="
padding: 7px 15px;
font-size: 12px;
font-weight:bold;
letter-spacing: 0.8px;
display: inline-block;
background: #FFD558;
margin: 20px 0 0 20px;">
<a href="https://twitter.com" target="_blank" style="
color: #000 !important; text-decoration: none;">
Twitter</a> |
<a href="https://www.facebook.com" target="_blank" style="
color: #000 !important; text-decoration: none;">
Facebook</a> |
<a href="https://plus.google.com" target="_blank" style="
color: #000 !important; text-decoration: none;">
Google+</a> |
<a href="http://instagram.com" target="_blank" style="
color: #000 !important; text-decoration: none;">
Instagram</a> |
<a href="http://www.pinterest.com" target="_blank" style="
color: #000 !important; text-decoration: none;">
Pinterest</a>
</p>
</td>
</tr>
<tr>
<td colspan="4">
<p style="
font-size: 10px;
color: #ADADAD;
padding-top: 15px;
border-top: 2px solid #CCC;
line-height: 1.5;
margin: 0 20px;
width: 83%;">
This email and any files transmitted with it are confidential and intended
solely for the use of the individual or entity to whom they are addressed.
No Curfew Ltd trading as 'Name' is a registered company
with registration number 123456789.
</p>
</td>
</tr>
</tbody></table>
</td>
The iPhone resizes the email to the largest element. (Email on Acid)
The cause of the resize is your signature, as the largest element, and is likely caused by the 2 columns you have for address and contact info. Despite being resized by your media queries, the table cells of these two columns are pushed wider to accommodate the text. This causes the table to become wider than defined and break the CSS layout you set up.
To fix this, I would change it to a responsive design with 2 tables (left and right align) instead of 2 columns. This should likely solve your problem.
By having it 2 tables, you can make the contact info slide underneath the address when mobile (or vice versa) so that both can still be full width and not stretch the table. (Campaign Monitor 2-1 column Responsive Design walkthrough)
I am coding in html-email. There is a <td> with inline CSS code. What I have to do for attach an anchor tag on whole <td>. Please tell me how can I do it. I have tried many options but these are not valid.
<td valign="top" width="204" class="leftColumnContent" mc:edit="left_column_content" align="center" bgcolor="#dee0e2" style="border-left:6px solid #FFF; border-top:5px solid #FFF;"">
<div align="center" style=" margin-top:10px;">
<img src="" width="119" height="199" style="max-width:180px;" mc:label="image" />
</div>
<p style=" margin-left:20px; width:80%; font-family:Arial, Helvetica, sans-serif; font-size:14px;"> <strong>Text here </strong><br />
<br />
text here</p>
<div style="width:80%; margin-top:10px; margin-left:20px; margin-bottom:15px;">
<div align="left" style="float:left;"><strong> read more</strong></div>
<div align="right">
<img align="none" height="20" id="headerImage2" mc:allowdesigner="" mc:allowtext="" mc:label="header_image" src=".." style="max-width: 55px; width: 55px; height: 23px;" width="55" /></div>
</div>
</td>
You cannot have <a ...><td>...</td></a>, by HTML rules. You can nest them the other way around, <td><a ...>...</a></td>. If you need to make the entire cell clickable, then you need to style the a element so that it occupies the entire cell. The way to do that depends on context, but if the td element has fixed dimensions, then set the following on the a element inside it:
display: block; height: 100%;
you can use the onclick property at the place of Anchor Tag in your table (code).
the Table example is as follows
<table>
<tr>
<td onclick="javascript:alert('your HTML');">HTML Code is here</td>
</tr>
</table>
at the place of alert("") you can use window.location("")
for send the page redirection on another page.