This code for a HTML email renders nicely in all clients except gmail. For some reason, the link is not underlined, so the reader doesn't realize its a link. Any ideas on how to overcome this?
Thanks!
<td align="center" bgcolor="#337711" style="color: #ffffff;"><a style="color: #ffffff; text-decoration:underline;" href = "http://www.example.com/">Click</a></td>
Try changing
<td align="center" bgcolor="#337711" style="color: #ffffff;"><a style="color: #ffffff; text-decoration:underline;" href = "http://www.example.com/">Click</a></td>
To
<td align="center" bgcolor="#337711" style="color: #ffffff;"><a style="color:#ffffff;text-decoration:underline;" href="http://www.example.com/">Click</a></td>
So remove the spaces between your href and the link.
From my email experience, sometimes the client will do some pretty awful things and you can't do anything about it. Have you tried either using !important or declaring your styles in a style block at the top of your html?
If that doesn't work, I'd recommend maybe bolding the link :\
If by gmail you mean the email inbox you access from your browser, I think you are going to need to look at the default display settings from your browser and the gmail account. Maybe move the text-decoration:underline; from the a tag to the td tag as well and see if that changes something.
This link may also help you.
Try the code below. Gmail may have not recognized the spacing you had between
href = "yourlink". I can't think of any other reason why it wouldn't have worked. I code html emails everyday and always test for gmail.
<td align="center" bgcolor="#337711" style="color: #ffffff;">
<a style="color: #ffffff; text-decoration: underline;" href="http://www.example.com/">Click</a></td>
Another option to do is rearrange the code a bit by appending the style after the link. Like below.
<td align="center" bgcolor="#337711" style="color: #ffffff;">
Click</td>
Designing HTML e-mails sucks. It's official. It always makes me feel dirty! :P
That said, it's always a compromise getting HTML e-mails working across the board - until we get standards-compliance across the board there will always be compromises.
A few suggestions though, some may be a bit clunky but that's the nature of this particular beast...
The odd thing is, it should underline by default so you shouldn't need to specify it using inline CSS. Are you sure you haven't got a contradictory style declaration elsewhere that's overriding this inline one?
Remove the white-space from the element attributes
<td align="center" bgcolor="#337711" style="color: #ffffff;"><a style="color: #ffffff; text-decoration:underline;" href="http://www.example.com/">Click</a></td>
try wrapping the text in a <span> and stick the underline on that instead
<td align="center" bgcolor="#337711" style="color: #ffffff;"><a style="color: #ffffff; text-decoration:underline;" href="http://www.example.com/"><span style="text-decoration:underline;">Click</span></a></td>
if all else fails, change the style of the link to make it more obvious to the reader that it is a link
<td align="center" bgcolor="#337711" style="color: #ffffff;"><a style="color: #fcff01;font-weight:bold; text-decoration:underline;" href="http://www.example.com/">Click</a></td>
Related
Developers and enthusiasts!
Since I have a little experience with HTML I figured it would be fun to try to create an html email signature, and it was! Until I checked the result on Litmus. So many tiny flaws I can not figure out how to fix:
• personal information appears partly or completely under the logo in Outlook on PC, instead of next to the logo.
• social media icons not visible in Apple mail, only before sending.
• correct space between social media icons in browsers, iPad mail and iPhone mail but not in Outlook on PC (or when running the code on here).
Are these compatibility problems that can not be fixed?
If they can, I need your help!
This is how the signature is supposed to look (the logo is an animation).
And this is the code:
<table border="0" cellpadding="0" cellspacing="0" width="800">
<tbody>
<tr>
<td border="0" cellpadding="0" cellspacing="0">
<p style="line-height: 11px; padding: 0px; font-family: Helvetica; font-size: 12px;">
<a style="font-style: bold; color: #333333;"><strong>Joram Esveld</strong></a><br>
<a style="line-height: 18px; color: #017d85">branding specialist</a>
<br><br>
<a href="https://www.joramipsum.com/" onMouseOver="this.style.color='#017d85'" onMouseOut="this.style.color='#333333'" target="_blank"
style="text-decoration: none; color:#333333;" >www.joramipsum.com</a><br>
+316 12 34 56 78<br><br>
</p>
</td>
</tr>
</tbody>
</table>
Let me know if you need more information.
And if anyone has any branding related questions;
feel free to ask thrue dm, or my website.
Kind regards,
Joram
JavaScript will not work in an email client.
Outlook ignores padding on images.
float mostly does not work with Outlook.
A better approach would be to divide the signature into two separate columns using td.
For more information on what works with email, try this handy source:
https://www.campaignmonitor.com/css/
Good luck.
I am using office365 email at my workplace to access emails. I am required to generate a dynamic newsletter which will be developed in HTML, However, I cannot seem to figure out how to add that HTML page into the email, pasting plain HTML doesn't seem to work as outlook does not render that.
I found a work around after some research, which is to open the html page on a browser, simply copy the content using CTRL + A and paste onto email editor, that seems to add the html but this is not a proper solution!
The aim is to write HTML, (Have done that) and add the HTML page into the outlook email. Any help/suggestion is highly appreciated
Both email clients and web browsers can display HTML/CSS, but they have different ways of doing so. So if you copy/paste an HTML page, chances are it will not display the same way in an email client like Outlook365.
Email layouts need to use <table>s for layout instead of <div>s. Emails also only support a small of CSS rules that need to be inlined.
Email code looks more like this:
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" style="vertical-align: top;background: #aaaaaa;">
<span style="color: red; font-size: 12px;">text</span>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" style="vertical-align: top;">
<img src="full path to image" alt="alt text" width="50" height="50">
</td>
</tr>
</table>
If you rebuild your email like this, it should display better in email clients like Outlook365.
First of all please look at this list of supported CSS in various email clients.
Than make sure you also have CSS inside email. Best way is using inline CSS:
<div style="color: red; font-size: 12px;">HALO!</div>
When pasting make sure you are pasting it as HTML (don't know if you can do it in all email clients). Otherwise it will encode your pasted text and sending it will expose all HTML markup as text.
I'm trying to get outlook to display a background-image. Is another rule I can use in it's place for outlook 2003-2015 email clients? Be see markup below.
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td class="mbl-header" align="center" style="width:600px; height:122px; background-image: url('images/banner2.jpg'); background-repeat:no-repeat;background-size:600px 100%; padding-left:35px; padding-right:35px;">
<p style="font-family:Arial, sans-serif; color:#fff; text-align:left;"><strong>As Assistant U.S. Attorney Seth Wilkinson</strong> said in relation to a recent Lacey Act case, “The message is clear, you can’t turn a blind eye, you can’t buy products that you know are stolen, make a huge profit off it and then just say, ‘I didn’t know what I was doing</p>
</td>
</tr>
</table>
Outlook 07/10/13 & Outlook.com do not support background-image (Campaign Monitor - CSS). Instead, you can either substitute sliced images (not recommended) for all email clients or a solid background color where background-image isn't supported.
Bulletproof Background Images is probably the most reliable source.
I am coding html email template , I did slice psd to html because of graphical work in template , now problem is that it looks perfect in my browsers but when I send it to my email id there are some problems that you can see in attached image
now this is <tr> with 3 <td> but problem is that there is gap between left blue image and logo right one is perfectly fine , code for this <tr> is:
<tr>
<td colspan="2">
<img src="left.jpg" alt="top_left" width="220" height="102" border="0">
</td>
<td colspan="2">
<a href="http://www.google.com">
<img src="logo.jpg" width="191" height="102" border="0" alt="Logo"></a>
</td>
<td colspan="3">
<img src="right.jpg" alt="top_right" width="200" height="102" border="0">
</td>
</tr>
Please let me know how I can fix it.
Also, make sure to always use this style on your images : display:block;
Some mail clients will do whatever they want with your code (Looking at you, gmail), and unless you specify that your images are rendered as block elements, it will add white spaces around those.
There are a couple of important fixes for gmail. Black links should always be colored as #000001 (gmail removes the black color on links, as well as on regular text for redundant content in conversations (It will turn this text purple when reposted unless you specify that the text color is #000001) ).
Also, make sure you use inline styling for your TDs height and width, sometimes the regular html value won't do.
Remove whitespace after a tag. Also make sure table have cellspacing, cellpadding and border set to 0. You might need to remove all whitespace in cells.
E-mail browsers are a mess. Much more then IE6 was ;-).
It may be an easier solution to just to use a single image if keeping the line together is important.
Unless you know what e-mail user agent each recipient is going to be using to view the e-mail, it is difficult to target them in the manner that you proposed. Each e-mail client may use a different renderer, causing them to display the whitespace incorrectly. There are times, when using older e-mail clients, that you will need to remove ALL spaces and linebreaks to get table-based formatting to display correctly; this means having all of the HTML on a single line.
Also, keep in mind that if your recipients are viewing the content in HTML5, the border attribute of the img element is obsolete; it is instead correct to add style="border: 0;" to the img element. You may want to try using style="margin: 0; padding: 0; border: 0;" on the table cells and rows.
Make sure that you have your table set to collapse as well, using
<table style="border-collapse: collapse;">
Im coding html newsletter and faced up with strange thing in gmail. Code:
<table cellpadding="0" cellspacing="0" width="700" height="122">
<tr>
<td valign="top" colspan="3" width="689" height="8"><img src="http://www.url.com/img/product_top_border.gif"></td>
</tr>
<tr>
<td valign="top" width="12" height="106"><img src="http://www.url.com/img/product_left_border.gif"></td>
<td valign="top" height="106" width="689">
some content
</td>
<td valign="top" width="12" height="106"><img src="http://www.url.com/img/product_right_border.gif"></td>
</tr>
<tr>
<td valign="top" colspan="3" width="689" height="8"><img src="http://www.url.com/img/product_bot_border.gif"></td>
</tr>
</table>
Gmail screenshot:
Screenshot from other email clients:
Any hints?
Your help would be appreciated.
It's a browser issue. When you put an image inside a table, the image should be an inline element, sitting on a text line. That means there will be space below it (for parts of a line of text that go below the baseline, ie. descenders) and GMail's rendering is ‘correct’.
However, in Quirks mode, as well as “almost standards” mode, an image that is alone in a cell behaves like a block instead of an inline element, so it doesn't get the extra spacing. It looks like the ‘other’ client is in Quirks mode, as it has reset the font size inside the table (a typical Quirks mode bug).
Normally you want to avoid Quirks mode at all costs, so you'd use Standards mode and fix up the img-in-table problem by setting CSS display: block or vertical-align:-anything-but-baseline on the <img> elements, or, better, dump the ugly layout-table and use some background images instead. However of course in a e-mail context your opportunities for styling are strictly limited.
So yeah, try setting style="display: block" on the images to try to make them display the same in Quirks vs Standards if you like, but be aware that this is the least of your problems when dealing with HTML mail. You will face much, much worse breakages than that. HTML e-mail completely sucks on every level; if you have any chance to get out of it, by just mailing a link to a proper web page, then do that.
In regard to the change of fonts, it somewhat seems like the 'other client' might show a non-HTML body and I think gmail supports HTML by default.
Have you set the content-data to be HTML?
For instance in c# you might need to set:
MailMessage mail = new MailMessage();
mail.IsBodyHtml = true;