HTML Format in Outlook Email Incorrect

user_5009293 0
Viewed 183

So outlook formats are fun, I've been trying all sorts of things trying to account for the issues I'm facing and nothing seems to work. I've tried making the widths super small. I've tried defining all 4 sides of the button. I've read about 15 different SO posts about outlook html formatting, and it seems to not shown me any insight.

Issues -

  • Padding of my button doesn't show correctly
  • My thick black lines are just plain not showing.

Original Code:

<div style="text-align:center">
    <div>
        <a href="https://mycanvasannuity.com?src=regEmaillnk">
        <img src="https://canvas.azureedge.net/canvas-annuity-logo.png" alt="Canvas welcomes you!">
        </a>
    </div>
    <div style="background-color:#000000; height:10px; width:100%; text-align:center;">
    </div>
    <br>
    <br>
    <div>
        <p>You have a new task assigned for application [AppID].  Please log into the Canvas Applicant Dashboard to complete this task at your earliest convenience. </p>
    </div>
    <br>
    <br>
    <a style="background-color: black; padding: 1.5em 1.5em; color: white; text-decoration: none;" href="https://applicant.canvasannuity.com/">Applicant Dashboard</a>
    <br>
    <br>
    <br>
    <br>
    <div style="background-color:#000000; height:10px; width:100%; text-align:center;">
    </div>
    <br>
    <br>
</div>
outlook html
1 Answers

If you need to support any version of Outlook, then you're going to have to use images and layout-tables, as painful as that is. Padding and margin properties won't work consistently on anything other than table cells.

You'll need to replace your buttons with images and add alt text. The other alternative is to try to make the button a table cell with a background color, but I think the image option is cleaner.

For your div elements (thick black lines), you're going to need to make those into tables. Once you do that, you can set an inline style with background-color.

Essentially, you have to write HTML/CSS like it's 2005. Personally, I find the Campaign Monitor CSS Reference invaluable when coding email designs.

user_42749330
Related