PHP Versions Question posted in
You can find a list of all versions here.

Php versions – why is the email template different in Outlook than in Thunderbird

I have some php code which send an email with PHPmailer. The email looks goods, except for the buttons. I have tested it in Thunderbird 115.7.0 which looks good.

Thunderbird

In the desktop version of Outlook 365 it looks like this:

Outlook 365 Desktop

The code what I use is this one:

      <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >
        <tr>
          <td bgcolor="#ffffff" align="left">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td bgcolor="#ffffff" align="left" style="padding: 10px 40px 30px 40px;">
                  <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td width="120px" align="center" style="border-radius: 5px;" bgcolor="#1FD67D"><a href="https://test.com/index.php?accept_id=%accept_unique_url%" target="_blank" style="font-size: 20px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; padding: 15px 25px; display: inline-block; width:120px;">Accepteren</a></td>
                        <td width="20px">&nbsp;</td>
                        <td width="120px" align="center" style="border-radius: 5px;" bgcolor="#F2828D"><a href="https://test.com/index.php?decline_id=%decline_unique_url%" target="_blank" style="font-size: 20px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; padding: 15px 25px; display: inline-block; width:120px;">Afwijzen</a></td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>                 
      </table>

I use inline CSS so that’s not the problem but something is not ok in Outlook 365.

Tags:

2

Answers


  1. 0

    Outlook does not support border-radius, so your rounded corners will be straight. That is because Outlook uses Word as email editor. You may find the supported and unsupported HTML elements, attributes, and cascading style sheets properties described in the Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 article (yes, most rules from 2007 didn’t go away yet).

    Login or Signup to reply.
  2. 0

    Outlook doesn’t support display changes of any type, or border-radius.

    Your options are:

    1. For just the padding around the button, to make the button in a table, or to use a very hacky and technical way as explained by Mark Robbins using mso-text-raise in conditional comments https://www.goodemailcode.com/email-code/link-button
    2. For the padding and border-radius, to use Outlook-specific code VML, which is explained elsewhere such as Rounded corners in outlook without images
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search