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; }
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?
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 designing an HTML email for a company. I'm having a problem with the footer at the bottom. Currently, it looks like this:
I love it!
When it's resized a lot, it looks like this:
Wonderful! I DO want the footer to break onto 3 lines.
However, when I resize the window halfway, it looks like this:
What CSS code can I use to make the footer to either break ALL lines, or none? It needs to ALWAYS look like either this:
or this:
But NEVER this:
and NEVER this:
I tried numerous combinations of white-space: nowrap; to no avail. When ANY lines break, they need to ALL break at the same time. Maybe this could be accomplished with a <table>?
Thank you for your help. The CSS needs to be inline and without media queries. JavaScript support for HTML email is very limited and non-reliable, therefore, I wish to do without it.
A JSFIDDLE for editing can be found here.
The layout which you are trying is possible using media queries or javascript. but most of the email templates doesn't support both solutions.
So, as I see, you have two options:
it will be better if you always keep the footer items independent to each row i.e add br tags between the nav tags.
or
Create different email templates based on the resolution.
Personal suggestion: I would have gone with the first option.
<nav style="display:inline; white-space:nowrap;">
<a moz-do-not-send="true" style="text-decoration:none; word-break:break-all; color:white;" href="tel:1234567890">
(123) 456-7890
</a>
</nav>
Use
word-break:break-all;
Jsfiddle
http://jsfiddle.net/f1uuwexy/8/
You can do this using only html:
<div>
www.hazardmoving.com<br />
Patrickhazard#yahoo.com<br />
(123) 456 7890<br /></div>
You seem to try pushing css beyond its limits
If you feel comfortable including bootstrap you can try:
<link rel="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<div style="width: 600px; margin: 60px auto; text-align: center;">
<div class="col-md-4">www.hazardmoving.com</div>
<div class="col-md-4">Patrickhazard#yahoo.com</div>
<div class="col-md-4">(123) 456 7890</div>
</div>
That should do the work. Check my pen:
http://codepen.io/anon/pen/EajwXp