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 ourtutorial 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.
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″> <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 toolwill help build the button for you.
Outlook vspace isn’t working
Yeah, Outlook doesn’t likevspace. Instead, you’ll want to use simplepadding-left/right. The same applies forhspace
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:
<table> <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 isinline-blockwithin theaelement. Use the below as a template for a bullet proof button
<td align=”center” style=”-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;” bgcolor=”#c41e4d”> <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.
<!–[if gte mso 9]><br /><![endif]–>or even
<!–[if gte mso 9]><br /><br /><br /><![endif]–>
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:
<td style=”font-size:8px; line-height:8px”> <img src=”your-image.jpg” height=”8px” /> </td>The obvious suggestion isborder="0", but try the above too!