CODEWITHSUNDEEP
htmlcssoutlook
Alex
Alex

Reputation: 3998

HTML not displaying as expected in outlook

I have the following HTML:

<html>
    <table align="center" cellspacing="0" border="0" cellpadding="0" width="600"  style="text-align: center;">
        <tbody>
            <tr>
                <td valign="top" style="height:78px; width:528px">
                    <a href="Link" style="display:block; height:78px; width:528px; color: #2a3379; text-decoration: none !important; padding-top:32px; font-family:Arial; font-weight:bold; font-style:italic; border-radius:5px; font-size:40px; display:block; margin:0 auto; background-color:#B5E61D;">                                                     
                        Apply now
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
</html>

Which display like this in the browser:

enter image description here

The problem is, that when I add it as an HTML template to an email, it displays like this in outlook:

enter image description here

From what I have read, I know outlook does not render HTML very well. I also read not to use CSS and to inline all the styling - but this has not worked.

The email needs to be responsive, so I would prefer not to use an image.

I guess there is a particular rule that is causing this problem.

Has anyone come across this before and found a good solution?

Upvotes: 0

Views: 3525

Answers (3)

gaynorvader
gaynorvader

Reputation: 2657

Try adding this into your head:

<!--[if gte mso 9]>
  <style type="text/css" media="all">
     body {mso-line-height-rule: exactly;}
     tr {mso-line-height-rule: exactly;}
     td{mso-line-height-rule: exactly;}
  </style>
  <![endif]-->
  <!--[if gte mso 15]>
  <style type="text/css" media="all">
    body{font-size:0;line-height:0;mso-line-height-rule:exactly;}
    tr{font-size:0px;mso-line-height-alt:0px;mso-margin-top-alt:0px;mso-line-height-rule:exactly;}
    td{mso-line-height-rule:exactly;}
  </style>
  <![endif]-->

Coding in Outlook is weird as it uses the Word engine to render html from 2007 on (no idea why).

Quick tip, if you open your html file in Word, you can get a preview of what it will look like in the corresponding Outlook.

EDIT: Just noticed you only have your background color on your anchor link, be sure to include it in your td also.

Upvotes: 1

Bidstrup
Bidstrup

Reputation: 1617

You have placed the padding on the A and not td, thats your issue here. So I have changed a bit in the bit for getting it to work. Everything regarding background color and height/width needs to be on the TD and not the A. Only the text related styles should be there :)

<html>
    <table align="center" cellspacing="0" border="0" cellpadding="0" width="600"  style="text-align: center;">
        <tbody>
            <tr>
                <td align="center" valign="top" height="78" width="528" style="display:block; padding:32px 0px; display:block; background-color:#B5E61D; border-radius:5px;">
                    <a href="#" style="color: #2a3379; text-decoration: none !important;  font-family:Arial; font-weight:bold; font-style:italic; font-size:40px;">                                                     
                        Apply now
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
</html>

As a note, remember border-radius dosnt work in outlooks

Upvotes: 2

Lalji Tadhani
Lalji Tadhani

Reputation: 14169

remove padding & Add line-height

<table align="center" cellspacing="0" border="0" cellpadding="0" width="600"  style="text-align: center;">
        <tbody>
            <tr>
                <td valign="top" style="width:528px">
                    <a href="Link" style="display:block; height:100px; line-height:100px;  width:528px; color: #2a3379; text-decoration: none !important; font-family:Arial; font-weight:bold; font-style:italic; border-radius:5px; font-size:40px; display:block; margin:0 auto; background-color:#B5E61D;">                                                     
                        Apply now
                    </a>
                </td>
            </tr>
        </tbody>

Upvotes: 0

Related Questions