Html Question posted in
Some basic documentation can be found here.

Html – CSS in email working differently in new vs old Outlook

I have been trying to get a button to look a specific way in an email template but am struggling with the width of an a tag on old Outlook (version 2405)

What I want is the a element to fill the td element so that the whole red space is clickable

  • Red button = td element
  • Blue border = a element

In new Outlook

new Outlook

In old Outlook

  • My a element width does not fill the width of the td element.
  • For some reason the link is clickable on the left side outside of the border but not on the right
  • Text on span is not white but instead standard link color. This makes the color change when clicked

old Outlook

Here is my code:

<tr>
    <td align="center" style="
    background: red;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 3px;">
        <a href="https://google.com" target="_blank" style="
        border: 3px solid blue;
        text-decoration: none;
        display: block;
        color: white;
        text-transform: uppercase;
        padding: 30px 0;
        font-weight: 700;
        font-size: 14px;
        width: 100%;
        box-sizing: border-box;
        cursor: pointer;
        letter-spacing: 0.0625em;">
            <span>
                MY BUTTON
            </span>
        </a>
    </td>
</tr>

I am slowly but surely losing my mind at this point…

I’ve tried this solution but no luck

I’ve tried:

  • changing inline-block to block
  • changing width
  • using !important on text color
Tags:

2

Answers


  1. 0

    It works if it’s inside a table:

    table, tr {
    width: 300px;
}
    <table>
<tr>
    <td align="center" style="
    background: red;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 3px;">
        <a href="https://google.com" onclick="alert('clicked')" target="_blank" style="
        border: 3px solid blue;
        text-decoration: none;
        display: block;
        color: white;
        text-transform: uppercase;
        padding: 30px 0;
        font-weight: 700;
        font-size: 14px;
        width: 100%;
        box-sizing: border-box;
        cursor: pointer;
        letter-spacing: 0.0625em;">
            <span>
                MY BUTTON
            </span>
        </a>
    </td>
</tr>
</table>

    So it very much seems that your template contains some other elements that you did not share in your question, probably something with a similar background to your button, so your table/tr is not having the width you would expect. I have added a CSS rule to have consistent width between table and tr

    Login or Signup to reply.
  2. 0

    Outlook Desktop Windows doesn’t support changes to the display. You can visually change the size of the box by using the <td>, but the only way to increase the size of the clickable area is to add inline characters inside the <a>. Since inline characters cannot be set to a width, you have to use something &emsp; which an em space (won’t be visible). You can then make that 500% (max) wide, and/or use multiple of them.

    mso-text-raise can be used as padding-top and padding-bottom. The first reference should be double the size of the second for equal top and bottom padding.

    <table cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
    <td align="center" style="
    background: #ff0000;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 3px;">
        <a href="https://www.google.com.au" style="background-color:#ff0000; text-decoration: none; padding: 30px 0; color: #ffffff; display:block; border-radius:3px; mso-padding-alt:0;text-underline-color:#ff0000;width:100%;text-align: center;font-size:14px;font-weight:700;cursor: pointer;letter-spacing: 0.0625em;"><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:60px" hidden>&emsp;&emsp;&emsp;&emsp;</i><span style="mso-text-raise:30px;"><![endif]-->My button<!--[if mso]></span><i style="mso-font-width:500%;" hidden>&emsp;&emsp;&emsp;&emsp;&#8203;</i><![endif]-->
        </a>
    </td>
</tr>
</table>

    This is 600px wide. I managed to get the Outlook clickable area extending to about 580px. Outlook desktop windows is like a print (PDF) layout, so don’t bother trying to make it responsive, just figure out the exact pixels (well… inches and points, it will convert them to!)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search