In an html email I used a "faux absolute" to create a background image with rounded corners for content modules. The html uses a max-height="0" for the contents container with the contents being styled as normal. The td below the contents is given a background-color, height, & width so that it acts as a "background image" to the above contents. This works in Outlook vml by using a position absolute for the contents container & assigning a height to the colored roundrect object below the contents.
The problem: Outlook for Mac is jacking up the CTA Button in this setup by ignoring the height & width of the table & td of the CTA, only displaying the background-color of the nested a tag. The CTA styles render properly everywhere else including all Windows versions of Outlook. I'm guessing it has to do with the 0 height of a parent container.
I've tried various ways of restoring the dimensions of the CTA by styling the width & length &/or padding, including different webkit properties & trying to specifically target Office 365 for Mac using
#converted-body .cta-outlook {
/* style */
}
To no avail.
An image of the CTA in MacOs via Email on Acid
An image of the busted Office 365 for Mac CTA via Email on Acid
A link to the entire html Email file on GitHub: https://github.com/iwcolyer/Email-Troubleshooting/blob/376a693cd4d57e957e2223b5df25aa45afbf8ad2/Broken-CTA-Faux-Absolute-BGorund-Office365-Mac
It's there (also on Outlook android and iOS apps), but it's behind the green background.
Move the green background div before the content, swap over the max-height to this one, and it will show. You'll also need to update the background colours a bit.
