0

I try to create a e-mail template. I created custom header and footer, they are loaded and look good in magento 2. However in outlook it looks complelty destroyed and weird

So I figured out that outlook has extremly bad support for CSS and you need to work alot with tables like back in 1999.

What I try

I have this table which has two rows. I need to add change the height of the td with id top_space to 45px if the email is viewed in Microsoft Office Outlook, otherwise to 55px.

<table id="header_link_container" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td id="top_space" colspan="3"></td>
    </tr>
    <tr id="header_link_block">
        <td>
          <a href="{{config path="web/secure/base_url"}}customer/account">Mein Konto</a>
        </td>
        <td>
          <a href="{{config path="web/secure/base_url"}}sales/order/history">Meine Bestellungen</a>
        </td>
        <td>
          <a href="{{config path="web/secure/base_url"}}" id="home_link">company.de</a>
        </td>
    </tr>
</table>

I have this css:

#top_space { height: 55px; }

Set another height if it is viewed in MS Outlook (MSO):

To set another height if it is viewed in MS Outlook, I used this code and put it in the head section of the head template:

<!--[if mso]>
    
<style type="text/css">

    /* CSS styles for Microsoft Office Outlook and Windows 10 Mail App */
    #top_space { height: 45px !important; }

</style>
<![endif]-->

Full example:

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<!--@subject {{trans "Header"}} @-->
<!--@vars {
"var logo_url":"Email Logo Image URL",
"var logo_alt":"Email Logo Alt Text",
"var logo_height":"Email Logo Image Height",
"var logo_width":"Email Logo Image Width",
"var template_styles|raw":"Template CSS"
} @-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style type="text/css">
        {{var template_styles|raw}}

        {{css file="css/email.css"}}
    </style>

<!--[if mso]>
    
<style type="text/css">

    /* CSS styles for Microsoft Office Outlook and Windows 10 Mail App */
    #top_space { height: 45px !important; }

</style>
<![endif]-->

</head>
<body class="mso">

{{inlinecss file="css/email-inline.css"}}

<!-- Begin wrapper table -->
<table class="wrapper" width="100%">
    <tr>
        <td class="wrapper-inner" align="center">
            <table class="main" align="center">
                <tr id="header_row">
                    <td class="content">
                        <table id="logo_container" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                                <td class="col_a">
                                    <a class="logo" href="{{config path="web/secure/base_url"}}">
                                        <img
                                            {{if logo_width}}
                                                width="{{var logo_width}}"
                                            {{else}}
                                                width="180"
                                            {{/if}}

                                            {{if logo_height}}
                                                height="{{var logo_height}}"
                                            {{/if}}

                                            src="https://media.company.de/logo/company-logo.png"
                                            alt="{{var logo_alt}}"
                                            border="0"
                                        />
                                    </a>
                                </td>
                                <td class="col_b">
                                    <table id="header_link_container" border="0" cellpadding="0" cellspacing="0">
                                        <tr>
                                            <td id="top_space" colspan="3"></td>
                                        </tr>
                                        <tr id="header_link_block">
                                            <td>
                                              <a href="{{config path="web/secure/base_url"}}customer/account">Mein Konto</a>
                                            </td>
                                            <td>
                                              <a href="{{config path="web/secure/base_url"}}sales/order/history">Meine Bestellungen</a>
                                            </td>
                                            <td>
                                              <a href="{{config path="web/secure/base_url"}}" id="home_link">hausfux.de</a>
                                            </td>
                                        </tr>
                                    </table>

Problem

It does still apply a height of 55px instead of 45px if I watch this in outlook.

1
  • Is there anyone who can help me to figure this out? – Black Apr 8 at 9:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.