HTML emails in Outlook 2016 is ignoring width: auto;. This doesn't happen with the latest Outlook 365 email client; it works as expected using Outlook 365 email client. I tried searching for a solution using a Google search; however, the the issues/solutions reported seem to be a bit different than the
issue I'm having. Also, my HTML authoring skills is very limited currently to adapt a solution for my case.
I was hoping someone could offer the simplest solution to achieve the same result as width: auto; in my html code below. I would prefer to keep the code as close to the example I have as possible.
<HTML>
<BODY><a href="https://www.youtube.com/watch?v=GtWEB9L-ynY " target="_blank" /><span
style="font-size:13.0pt;font-family:"Segoe UI",sans-serif">Final Unboxing Video and Channel
Announcements<font size="1"><br><br></font><img src="https://i.ytimg.com/vi/GtWEB9L-ynY/maxresdefault.jpg"
height="315" width: auto;></a><br>
<font size=1>Source: https://www.youtube.com/watch?v=GtWEB9L-ynY<br>
</font><br>
<font size="2">Support The 8-Bit Guy on Patreon: <a class="comurl" href="https://www.patreon.com/8BitGuy1"
target="_blank" rel="nofollow">https://www.patreon.com/8BitGuy1</a><br> Visit my website: <a
class="comurl" href="http://www.the8bitguy.com/" target="_blank"
rel="nofollow">http://www.the8bitguy.com/</a><br>
</span></font><br></BODY>
</HTML>
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).
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 have a graphic that doesn't render properly in IE10. It was working fine and then about a month ago, it quit working on IE10 but continues to display properly on Chrome and Firefox. I've read that HTML5 does not work properly with IE10. Is that the issue? Not sure of the fix.
<table width="" border="0" cellspacing="0" cellpadding="0"><tr><td width="220" valign="top">
<div class="menu">
<!--#if expr="${REMOTE_HOST} = /.usgs.gov$/" -->
<b>NGP Intranet</b>
<!--#endif -->
<p>
<!--#include virtual="include/tnm_menu.html"-->
</div>
<!--<p class="space"></p> --><br class="space" />
<img src="images/nav_spacer.jpg" width="185" height="1700" border="0" alt="This is a formatting graphic." />
</td>
Looking at the website you provided, not the fiddle as it is still pretty pointless as it doesn't replicate the issue at all, you can fix the "skewed" green space by adding to the CSS:
#nav {
padding:0;
}
For the other problem of the CSS menu, and possibly the above problem, I believe this is due to the HTML code being completely invalid. There are so many problems with the code that it doesn't know how to render it correctly. Give it a quick pass through a validator and you will see some errors. Firstly, you are using HTML5 elements, but declared the DOCTYPE as XHTML. And that's just the start, you have unclosed tags, obsolete attributes, unescaped characters, plus others.
The reason why this is a problem is that when using position:absolute the browser looks for the parent of the element but if it can't work it out, it could position the element anywhere. FF and Chrome work because they are less strict than IE over this, and I think this is an issue with FF and Chrome, they try to "fix" what the developer has done, but in my opinion this just breeds lazy and bad development.
Fix the issues, especially the unclosed tags, and it should help. (At least help narrow down the issue.)
So I recently found out that the email web app on Office 365 is not displaying my emails correctly. I have some hypertext links that I have an inline-style setting my text-decoration to none.
<a href="http://wwww.example.com" style="color:#ffffff; text-decoration:none;">
Click Me!
</a>
Outlook 365 seems to be getting rid off all my styles and ends up rapping my link in a font tag like:
<a target="_blank" href="//wwww.example.com">
<font color="white">
Click Me!
</font>
</a>
Does anyone know how to prevent Office 365 from doing so.
Don't know why it is doing it, but one way to hopefully overwrite this is using the !important css declaration in the header:
<style>
font, a {
text-decoration: none !important;
}
</style>
Surprised Outlook doesn't include a class in their imposed tags. Instead you'll have to add your own 'un-overwriting' class to all font and a tags you don't want this overwriting css to take affect on.
It is possible to make certain styles work with Office 365:
<a href="http://wwww.example.com" style="color:#ffffff;">
<span style="color:#ffffff;">Click Me!</span>
</a>
This example taken from this guide: http://blog.jmwhite.co.uk/2014/07/22/office-365-quirks-for-email-designers/
However, text-decoration:none; specifically appears to be broken in Office 365: https://www.campaignmonitor.com/forums/topic/7553/office365-web-client-quirks-thread/. After testing this significantly I was unable to get it working as well.
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.