2007/2010/2013/2016 Outlook button padding

[iampstew]

How can we reproduce this bug? SCSS:

$button-padding: (
  tiny: 4px 16px 4px 16px,
  small: 4px 32px 4px 32px,
  default: 4px 48px 4px 48px,
  large: 8px 60px 8px 60px,
);

HTML / INKY:

<center> 
    <button href="#" class="secondary">Book your free place today</button>
</center>

What did you expect to happen? The button renders like this correctly on all but the ones mentioned below.

What happened instead? The button renders like this...

What email clients does this happen in? Outlook 2007,2010,2013,2016 (On Windows, only)

[rafibomb]

Just to be sure - is it Outlook 2007,2010,2013,2016 on windows only - or is it just 2016 on windows only?

[bc-ian]

@rafibomb Outlook 2007,2010,2013 I am having this issue as well on 2.1

[iamsankalp]

@rafibomb @bc-ian Is there any working fix for this? I'm also seeing the same issue in my litmus tests.

[nitrokevin]

I wonder if it would be possible to use campaign monitor's bulletproof buttons, they use a conditional statement for outlook https://buttons.cm

[rafibomb]

@nitrokevin Bulletproof buttons is on our roadmap - adding them in can be done easily. Using them with Inky is a different challenge since we'd like to pull the height and width from the settings file rather than hard coding the values.

There is a discussion started here on it we'd love for your opinions on: https://github.com/zurb/inky/issues/35

@iamsankalp I tested removing the expander but that's not it. Not sure what other ideas anyone has on this one - leaving it open to more suggestions.

[tobyimaginepublishing]

Has anyone fixed this yet?

[cossssmin]

The problem with buttons is that padding does not work in Outlook for p, a, and div elements. A quick fix for this is using a border, instead of padding.

I have a custom _buttons.scss where I customize my buttons:

table.button {
    a {
        padding: 0 !important;
        border-style: solid;
    }

    &.tiny a {
        border-width: 4px 8px;
    }

    &.small a {
        border-width: 5px 10px;
    }

    &.default a {
        border-width: 8px 16px;
    }

    &.large a {
        border-width: 20px 30px;
    }
}

No need to override anything else like colors, radius - it will pick those up from your _settings.scss.

Maybe FEW's buttons could use the border technique instead of padding? I've seen consistent results in all major clients I've tested with.

[rafibomb]

@hellocosmin How does this affect the touch target. The reason we went to padding was to allow the whole button to be clickable.

[cossssmin]

@rafibomb it does affect the target, yes, so it's not the best way to go about it.

Lately, I've been using the anchor padding approach just like you have it, but I also declare a 0-width solid border that has the same colour as the button's background. This seems to limit the left/right collapsing of the button in Outlook, but it still collapses.

This is what I'm using currently:

<table bgcolor="#EEEEEE" style="border-spacing: 0; border-radius: 3px;">
  <tr>
    <td>
      <a href="http://example.com" target="_blank" style="border: 0 solid #EEEEEE; color: #666666; display: inline-block; font-family: Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; padding: 13px 25px 13px 25px; text-align: center; text-decoration: none;">Button</a>
    </td>
  </tr>
</table>

[benwakeford]

The 0-width border on the anchor didn't work for me, but giving it a 1px border did. Thanks for pointing me in the right direction @rafibomb; it was driving me crazy.

Like you say, it doesn't retain the desired horizontal padding, but at least it's passable now, and that's good enough for Outlook in my case.

[cossssmin]

@benwakeford interesting, what Outlook versions didn't work? I've seen it limiting the collapsing in all Outlook versions available for testing with Email on Acid (2003 - 2016).

[benwakeford]

@hellocosmin Sorry, just back on this project now after a hiatus.

I couldn't replicate what I experienced before with the 0-width border not working; I expect my results were muddied by other custom code I was trying at the time. Just tried again and it does indeed prevent full collapsing for me in all Outlooks (2003 - 2016, via EoA).

One point to note for others is that Outlook does render the 0-width border as having a 1px border with colour - hence why it should have either the page or button background colour.

[Luneya]

Alas, in 2017 the padding problem still persists in (at least) the outlook.com web client. My button is slightly different, it is the large button and not an expanded one.

Somehow the button has no padding. Adding either a 0 border or 1px border to the a href= made no visible improvements.

[edit: the button should look like the one in gmail]

[davehoran]

I have seen this behavior (in the browser, while in development) when I have missed a quote or some other small syntax error that hasn't caused the compiler to completely fail on the command line. However, I have never tried this same code in Litmus to see how it looks in something like Gmail or Outlook.

For the ymail and outlook clients, is the left alignment of the button the desired effect?

[Luneya]

I understand from many google-searches that Litmus does not (always) represent the actual look in Outlook. Where it has given screenshots that look acceptable, the reality is a broken layout or undesired effects. I myself have no experience with Litmus whatsoever, so I do not actually know anything on that front ;)

The gmail look is the desired look and alignment. I will double check all the quotes and such just to be certain. I have not found any syntax errors before, but might have missed something!

Edit: I fixed the alignment of the button with the suggested solution in this thread: https://github.com/zurb/foundation-emails/issues/269

Still no luck on the padding though.

About errors in code: Everything that goes into the compiler is both correct and valid (according to the w3c validation tool). After I input the compiled html with inlined css code in the W3C validator, it screams a bunch of syntax errors.. Most are about the depricated style="" attribute being used. (The doctype is xhtml 1.0). And the self-closing tags without the forward slash at the end is kicking up a storm.

It is going to take me a while, but I think it is safe to say that IF there's a syntax error, it is to do with the compiler.

[Luneya]

I have found no syntax errors.. The button behaves as expected in Outlook 2016. It is now just outlook webmail that is messing it up.

[Luneya]

My final comment: Outlook.com is a very annoying webmail to design for. On Windows in Chrome, the buttons are stripped of padding and font-color, UNTIL you double click to open the email in a new window. All of a sudden, the button appears as intended.

To fix the layout of the button (at least with padding) I have given them an additional border. The border won't be touchable, but it'll look more like a button. So all the other clients will have an even bigger looking button.

[stevesmename]

Code I provide below should resolve the appearance of the lost padding in buttons for various clients (Android too). Note, the entire button will not be a link however the clients which can support padding on tag will then have a button which will be linked in its entirety.

This was tested against v2.2.1; the develop branch seems to have various PRs pulled into the branch that don't properly fix the issue against all clients.

table.button {

  table {

    td {
      mso-cellspacing: map-get($button-padding, default);
      mso-padding-alt: map-get($button-padding, default);
    }
  }
}

table.button.tiny {
  table td {
      mso-cellspacing: map-get($button-padding, tiny);
      mso-padding-alt: map-get($button-padding, tiny);
  }
}

table.button.small {
  table td {
      mso-cellspacing: map-get($button-padding, small);
      mso-padding-alt: map-get($button-padding, small);
  }
}

table.button.large {
  table td {
      mso-cellspacing: map-get($button-padding, large);
      mso-padding-alt: map-get($button-padding, large);
  }
}

[rafibomb]

@Luneya do you have an href="#" and a valid url in the button? I've seen this if that's not set.

[rafibomb]

@stevesmename That's similar to how V1 did buttons. The new buttons feel like a progression because the touch target is the whole button.

[Luneya]

They all had valid URL's as href.

[jslyonnais]

Bump this bug. Having the same problem in Outlook Webmail (which is a big issue for us).

<row>
    <columns small="12" class="content__intro">
        <center>
            <button href="https://test.com" class="small-expanded radius">Test</button>
        </center>
    </columns>
</row>

[keithwyland]

Any progress on this? It's very noticeable when the button has a white background with a solid color border. The words of the link go right up against the border.

[stevesmename]

@keithwyland do you have a valid href="http://..." in your <a> tag? Your issue sounds more related <a> tags turning into <span> tags. This converted tag happens in Outlook if they don't see a valid URL (loses expected styles).

[keithwyland]

@stevesmename just checked. yep. There's a valid URL there when I receive the email in Outlook.

[lspoor]

Is it possible to wrap the text with a <span> within the <a>, surely we can apply padding to the span and still keep the target area for touch/click?

[janez-svetin]

Had the same problem. Was able to solve it with applying line-height on the a instead of borders or padding:

HTML:

<button href="http://something.com" class="radius">UPGRADE</button>

_settings.scss:

$button-padding: (
  tiny: 0 8px,
  small: 0 10px,
  default: 0 15px,
  large: 0 20px,
);

_template.scss:

table.button table td a {
   line-height: 2.5;

   @media only screen and (max-width: #{$global-breakpoint}) {
      line-height: 2;
   }
}

But looking for a less hacky way for buttons to work properly on Outlook.

[boguz]

Yes, i agree, this is a very annoying problem on Outlook! My hack was:

• instead of top and bottom-padding: line-height
• instead of right and left-padding: a couple of   before and after the button text

[mir3z]

The solution proposed by @stevesmename works for me.