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).
Related
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?
My HTML email template has a few images. All images are saved and served from the same Google Cloud Platform Storage Bucket and all images are set to be publicly available.
When the email is delivered, Gmail only loads half the images. In the other half, it removes the src attribute altogether! The same template works fine when I open it in Chrome and the same emails works great on Outlook.com as well. See the example of what the <img> tag looks like in Gmail below:
<img alt="image" style="display:block" width="191">
The HTML block for that specific image looks like this:
<td align="center">
<a href="#" target="_blank">
<img src="http://storage.googleapis.com/tripcloud-email-assets/campaigns/1-holidays-2016/banner-content-1.png" alt="image" border="0" height="67" width="199">
</a>
</td>
The only other thread I found about this subject was this but I did not have a similar error and so, it was unrelated. Can someone please tell me why this might be happening?
I can suggest you two options-
Don't use imagenames like googleads or googleadspreview. Just avoid 'ads words'.
If it removes src attribute, you can add it with jQuery.
We've got an application which opens a new E-Mail with Outlook 2013 based on custom code. The code is
<img width="298px" height="28px" src="https://www.ahd.de/sites/default/files/logo_0.gif"/>
but Outlook opens the E-Mail with the following:
<p class=MsoNormal><span style='font-size:10.0pt;font-family:"Arial",sans-serif;
mso-fareast-font-family:"Times New Roman";color:#6E6E6E;mso-no-proof:yes'><img
width=1024 height=768 id="_x0000_i1025"
src="https://www.ahd.de/sites/default/files/logo_0.gif"
alt="ahd your business. (Logo)"></span><span style='font-size:10.0pt;
font-family:"Arial",sans-serif;mso-fareast-font-family:"Times New Roman";
color:#6E6E6E'>
Is there any way around this? The image ist hugely out off proportion in the mail.
Note: The funny bit is, that when I close the Outlook window and reopen it through our application, the code is still changed, but with the correct width and height!
Thanks for your help!
Everytime when we are writing codes for Email Templates we should follow inline CSS always and if we want to use images then we must follow in this particular manner as(viz the OP case):
<img alt="your alt text" border="0" height="28" src="https://www.ahd.de/sites/default/files/logo_0.gif" style="width: 298px; height:28px;line-height: 100%;outline: none;text-decoration: none;display: inline;margin: 0px;border: 0;" width="298" />
The main reasons behind this are:
Always provide alt text of your image tag
Always set border to zero to avoid unnecessary border that most of the mailer clients put around your image
And most important of them all, always **fix height and width of your image in both manners, i.e. using inline CSS as well as using image tag attributes to restrict the area of your image covers to its actual dimensions in all platforms.
Hope this will make things clear for you.
I am building a html email. it looks fine in outlook 2003, outlook 2007, hotmail, gmail, yahoo but in outlook web app has breaks between the rows. has anyone had these issues with outlook web app?
i have display block on the images but it looks like they get stripped out.
This was fixed by wrapping the elements in <span style="display:block"></span>
E.G:
<a href="http://www.url.com">
<img src="example.jpg" />
</a>
becomes
<a href="http://www.url.com">
<span style="display:block;">
<img src="example.jpg" />
</span>
</a>
but needs doing on all broken elements
Various styling is being stripped, so inline-styling will NOT work with images in OWA.
Here's a simple example of what Bill the Lizard was referring too:
<span style="display:block"><img src="myFancyImage.gif"/></span>
Without the above code it may look like extra padding/margin is creating space between tables and table rows/columns.... basically the issue that brought you to this page.
Use this inline css
<span style="margin:0; padding:0; display:block;"><img src="myFancyImage.gif"/></span>
I had the same problem, and unfortunately none of these solutions worked.
The display:block was always being striped out, no matter whether I wrapped the image in span or font tags.
Eventually, I found that wrapping the image in a DIV with inline width and height solved the problem. I guess because DIVs are block elements already, and it seems the only styles that OWA doesn't strip out are width and height.
e.g.
<td width="475" height="73" valign="top" bgcolor="#e9e9e9">
<div style="display:block;width:475px;height:73px"><img src="../images/email/email_02.jpg" alt="Three Barrels" width="475" height="73" style="display:block;border:none;outline:none;line-height:0;float:left;" /></div>
</td>
I tried the fix above and it didn't work - but this worked for me:
I just added this code at the top of the email code.
/* FIX FOR OWA */
.bdyItmPrt img { display:block !important; }