I've put togethor a simple html email where X 'td' has background images, coded as below...
<td bgcolor="#FFFFFF" width="47" height="661" style="background-image:url(http://mysite.com/_includes/emails/invoice/images/l.jpg); background-repeat:repeat-y;">
 
</td>
My problem is that in Outlook the style isnt applied, from what I've found there's nothing wrong with my code, has anybody any idea?
Thanks
They're not supported.
For a handy reference, see: http://www.campaignmonitor.com/css/
Outlook actually uses the craptacular MS Word rendering engine for HTML. The bane of every email campaign designer.
Related
I know, I should use something like Bulletproof Email Buttons service for such purposes, but I have a case, where I need to use an image wrapped with an <a> tag to represent a link in my email template. I ran a test with testi.at and it appears to be represented correctly for almost 100% of clients (up to Outlook 2007). I cannot check if such image link is 100% clickable though. My question is if there are any known issues with this approach?
<tr>
<td style="text-align: center;">
<a href="http://example.com">
<img src="https://some-image-src.png" width="100" height="50" alt="Sample image" />
</a>
</td>
</tr>
This is a very common practice and there is no downside that I can think of. One recommandation I'd make is to add the following styles on your image element:
vertical-align:middle; This prevents a small gap to appear below images in email clients using an HTML5 doctype.
border:none; This prevents a blue outline to appear on older email clients running on Internet Explorer’s rendering engine (like Outlook 2003 for example).
Also, be careful, there's a typo in your code (scr instead of src).
No matter what I try Outlook on Windows adds blue links to my HTML email signature - how can I remove them...
<td style="margin:0;padding:0;padding-left:8px;font-family:Verdana,Tahoma,Arial,sans-serif;white-space:nowrap;font-size:11px;">
Mobile:
<a href="tel:0456666555" style="border:none;text-decoration:none!important;color:#9d9fa2;">
<font color="#9d9fa2">0456 666 555</font>
</a>
</td>
Your example gave me an idea as a solution, and it seems to work for the colour but not the underline.
<td style="margin:0;padding:0;padding-left:8px;font-family:Verdana,Tahoma,Arial,sans-serif;white-space:nowrap;font-size:11px;">
Mobile:
<a href="tel:0456666555" style="border:none;text-decoration:none;color:#9d9fa2;">
<span style="text-decoration:none;color:#9d9fa2;">0456 666 555</span>
</a>
</td>
You wrap the link around a <span>.
On inspecting the signature in Gmail, Outlook strips the link of any styling. So it looks like there is no way around it.
I have found an answer that works for me! I am also amazed it works!
It involves duplicating any styling on the <a> tag and then adding an !important attribute to it.
BOOK NOW
Outlook will strip out the style with !important attribute leaving the regular style, thus no underline. The !important attribute will overrule the web based email clients' default style, thus leaving no underline.
Source
I'm developing email templates and I need to use display:inline-block but it's not working on gmail and outlook.
I just need to align an image with a text and I can't use a table .
Any suggestions to make the display:inline-block work or any other solution that works on outlook and gmail?
this my code:
<div>
<span style="display:inline-block;">this is not<br/> working:</span>
<img style="vertical-align:middle;" alt="" border="0" src="img.jpg">
</div>
thanks
There's only partial support in Outlook for display:inline-block;. Gmail should work fine.
Outlook 2000–03
Partial. Supports block, inline, list-item, and none.
Outlook 2007–16
Partial. Sometimes supports none.
Outlook Express
Partial. Supports block, inline, list-item, and none.
https://www.campaignmonitor.com/css/
Outlook doesn't support <div>
Outlook doesn't really support <div> Classes and styles You can use them, but styles do not always get applied. I would suggest a table for reliability.
Div styles not working in Outlook Emails
Good luck.
Try to use float:left in the style of "a" and "span"
<span style="float:left;">this is not<br/> working:</span>
<a style="float:left;" href="" target="_blank"><img alt="" border="0" src="yourImage.jpg"></a>
it works in my code
If it doesn't work on outlook it's because when it comes to rendering HTML, most email clients are primitive and will break a lot of well formed HTML elements.
I would recommend some online resources such as:
How To Code HTML Emails: MailChimp
This SO discussion may be helpful:
What guidelines for HTML email design are there?
Outlook just displays a small box with a red X, when I test my HTML email. All the images looks like this:
<td align="center">
<img src="https://c1.staticflickr.com/6/5516/29542162544_71ebdbac9f_z.jpg" alt="second-typo" style="display: block;" width="100%"/>
</td>
Is there any solution, to fix this?
Outlook does not download remote images unless the user explicitly allows Outlook to do that for that particular email.
Embed the images as an attachments and refer to it through the cid (<img src=cid:xyz>). Note that Outlook does not support embedding binary data into the img tag.
I am building HMTL emails and I use nested tables to layout the email. To change text I apply the styles directly to the < td > tags and this works for the most part across the board. I am noticing though on SOME heavily nested tabled (Greater then 5) the style is being removed completely on Gmail in Internet Explorer, and on Yahoo in various browsers (on a PC). Below is my code:
(This code is ~5 tables deep)
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding-bottom:10px;font-family:'Century Gothic',Arial, Helvetica, sans-serif; font-size:26px; color:#202020;">The Latest</td>
</tr>
</table>
Has anyone ran into this before or know why they might be stripping the style? It's not only text styles but the padding is also removed on these < td > tags.
I've never had the issue myself, but there is known to be issues with nesting tables too deep. I'm willing to bet that there is a more precise way to layout your email to avoid the issue. Don't be scared to use colspans and rowspans when necessary. Post your code if you like.
I think I may know why this is happening. I've seen issues when using a font-family with quotes throw off the inline CSS. If you move the font-family to the end of your inline styles it may work. See below.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding-bottom:10px; font-size:26px; color:#202020; font-family:'Century Gothic',Arial, Helvetica, sans-serif;">The Latest</td>
</tr>
</table>
In case this is useful for anyone: I ran into this problem with a specific <td> that was getting all the inline CSS stripped. After checking it, I found I had an incorrect property declared, like so:
padding-bottom;
Removing that incorrect property resolved the issue.
It seems to me that Gmail somehow validates the css of each element, and strips it all if it finds an error.
Not a direct answer so my apologise, but could you not use CSS instead of HTML tables? You will be able to achieve the same result I would think?
I just tested an html email that works for Gmail.
Generally speaking, I learned that Gmail tends to strip out the whole inline style attribute when you declare font-family, this behavior sometimes happens when:
1) when you declare a custom font using ' or ", es: <span class="small-text" style="font-family:'Titillium Web',Arial,sans-serif;"></span>
2) if don't put spaces between ; , , and : chars, in a font-family declaration.
3) every time you declare 2 <span> with a font-family in the same <td>, Gmail will strip the second's <span> rules
but I don't know what is the general rule, so my solution was: always declare font-family inside a separate tag, at least, in this way you won't lose all the styles.
example:
<span style="color:#8d8c87;display:block;font-size:12px;line-height:120%;text-align:center">
<span style="font-family:'Titillium Web',Arial,sans-serif;">text</span>
</span>