Welcome to our list of top fixes for Microsoft Outlook. We’ll continually update this page as we find more – book mark this page and check back as often as you need to. Advanced warning – This list uses some conditional content. If you’re not familiar what that is, skip over to our tutorial on conditional content for Microsoft Outlook.
(Date of last update 16 March 2017)
Let’s begin.
CTA buttons aren’t displaying properly in Outlook
Use padding and a border for this fix. It’s the most reliable solution. Simple as that.
<tr>
<td>
<table border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td align=”center” style=”-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;” bgcolor=”#e9703e”>
<a href=”http://www.digitalpeanut.co.uk” target=”_blank” style=”font-size: 18px; font-family: Helvetica, Arial, sans-serif; color: #000000; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #e9703e; display: inline-block;”>A beautiful button →</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
If you don’t like that option, give VML a try. This simple tool will help build the button for you.
Outlook vspace isn’t working
Yeah, Outlook doesn’t like vspace. Instead, you’ll want to use simple padding-left/right. The same applies for hspace
Microsoft Outlook not respecting font colour
Firstly, add the font colour to the element your text sits in, not a parent element.
Secondly, put the font colour as the last style within that element
Lastly and most importantly, don’t include a trailing semi-colon (;)
Here’s how it should look:
<tr>
<td style=”font-size:14px; font-weight:bold; color:#666666″>
Your content
</td>
</tr>
</table>
Buttons and CTAs in Outlook not displaying properly
Outlook loves to ignore padding on buttons and generally making buttons look terrible in size. The crucial part to the below is inline-block within the a element. Use the below as a template for a bullet proof button
<a href=”https://www.digitalpeanut.co.uk” target=”_blank” style=”font-size: 16px; font-family: Arial, sans-serif; text-decoration: none; color: #ffffff; text-decoration: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 12px 45px; border: 1px solid #c41e4d; display: inline-block”>Some button text
</a>
</td>
Padding in Microsoft Outlook not working
If you need padding on a cell or even any element and Outlook is ignoring it, don’t use padding.
No, really. Try padding your content with MSO conditional content and the simple use of <br/>.
Where ever you want the padding to be, stick a few of the below in (keeping in your existing padding styles) and that’s it.
or even
Outlook showing lines around small images
This could be a few things, but if you have a fairly thin image in your email (for example if you’re using it as a spacer) and some strange lines are showing around it in Outlook, try this:
<img src=”your-image.jpg” height=”8px” />
</td>
The obvious suggestion is border="0", but try the above too!