Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Microsoft Outlook ‘16 for PC ignoring line height in the <a> tag for buttons

pnaonline

Newbie
Total Posts:  28
Posted: 25 October 2016 02:49 PM

It looks like Outlook 16 for PC is ignoring the line height property in the <a> tag for buttons. Is there a workaround for this?

Button code:

a href=”” target=“_blank” style=“color: #ffffff; text-decoration: none; font-size: 19px; width: 100%; display: block; font-weight: 600; line-height: 60px;”>Button text</a>

Here is the share link:
https://www.emailonacid.com/app/acidtest/display/summary/tTO8c9DI0L4wkVe7PLWQmRzzNGxEfcAWma5MoxhRomkMd/shared


 

pnaonline

Newbie
Total Posts:  28
Posted: 26 October 2016 11:55 AM
[ # 1 ]

To clarify I added .ExternalClass * {line-height: 100%} into the style but it’s still ignoring the line height on the <a> tag to create a button. Is this just a PC word rendering issue? It looks fine on Outlook.com and for Mac.


 

Geoff Phillips

Avatar
Sr. Member
Total Posts:  386
Posted: 26 October 2016 11:58 AM
[ # 2 ]

pnaonline,
Outlook for windows desktop (2003, 2007, 2010, 2013 and 2016) uses the Word rendering engine to display emails. For this reason, they have a LOT of display problems. Have you tried using ‘mso-line-height-rule:exactly’ ?

Alternatively, you could try out bulletproof button code: https://www.emailonacid.com/blog/article/email-development/simple-code-based-bulletproof-button


 

pnaonline

Newbie
Total Posts:  28
Posted: 26 October 2016 01:24 PM
[ # 3 ]

I don’t think I’ve tried the mso-line-height-rule:exactly’ before. Does that go in a mso conditional statement as a class selector?


 

Geoff Phillips

Avatar
Sr. Member
Total Posts:  386
Posted: 26 October 2016 01:46 PM
[ # 4 ]

pnaonline,
It’s a style. It goes directly after the line-height style, inline.


 

pnaonline

Newbie
Total Posts:  28
Posted: 27 October 2016 10:04 AM
[ # 5 ]

Unfortunately the mso line spacing style didn’t work in Outlook PC ‘16. I’m going to stick with the way I have the buttons set up since the rest of the clients show it correctly. I’m going to play around with the mso in other areas and see if it registers. Thanks!