Search code examples
htmlcssemailoutlookhtml-email

Setting the height of a control in an Outlook html email

I'm trying to set the height of an anchor tag that I'm styling as a button in an Outlook html email. I can do pretty much anything I want in a web browser, but when I open my html in Outlook 365 it doesn't work. I can change the width of the anchor tag by adding some   to the caption, but I haven't figured out a way to manipulate the height.

Here's some html that reproduces the problem:

<!doctype html>
<html>
    <head>
        <title>Test Table Styling</title>
    </head>
    <body>
        <div width=1920px
             height=1652px>
            <div width=512px
                 height=48px
                 style="flex-shrink:0;background:#00A7E1;">
                <div style="">Blah blah blah</div>
            </div>
            <div width=386px
                 height=16px
                 top=323px
                 left=767px
                 style="">
                                            Hello:</div>
            <br/>
            <table style="">
                <tr style="">
                    <th>Header</th>
                    <th>Header</th>
                    <th>Header</th>
                    <th>Header</th>
                </tr>
                <tr>
                    <td>8/12/2022</td>
                    <td>8/12/2022</td>
                    <td>8/12/2022</td>
                    <td>8/12/2022</td>
                </tr>
                <tr>
                    <td>7/27/2022</td>
                    <td>7/27/2022</td>
                    <td>7/27/2022</td>
                    <td>7/27/2022</td>
                </tr>
            </table>
            <br/>
            <div style='text-align:center'>
                <div style="text-align:center">
                    <a style="display:inline-block;width:150px;height:100px;background:#1572BA;padding:10px;text-align:center;border-radius:5px;color:#FFFFFF;font-weight:bold;line-height:32px;text-decoration:none;"
                   href='https://localhost'>Blah blah blah</a>
            </div>
            </div>
            <br/>
            <br/>
            <div style="text-align:center;">lorum lbljdlfkjalkjfdslaksjdflkj</div></div>
    </body>
</html>

caniemail.com makes it look like I would have been better off trying to do this 20 years ago:

I wish it were 2003 again!

Solution

  • What you need for height in an Outlook is a hack. That's because it doesn't listen to display changes. If it's an inline element by default, that's what it will always be. So the content needs to fill it, for it to be higher (or wider, as you've done).

    For height control, we can introduce this beast:

    <!--[if mso]>
<i style="mso-text-raise:100%" hidden>&emsp;</i>
<span style="mso-text-raise:50%;"><![endif]-->
  My link text
<!--[if mso]></span><![endif]-->

    The first text raise will be top padding, and the second, bottom. If you already had width, you may be able to use &nbsp; instead of &emsp; but I believe the text-raise is a scaling thing. So 100% is a neat 1em and 50% is 0.5em, as it stands.

    Courtesy of Mark Robbins' https://www.goodemailcode.com/email-code/link-button.html