Overlay & Email Absolute Positioning Pt2

Hey email geeks! I’m glad to see that you’ve enjoyed the Overlay & Email Absolute Positioning article that I had the pleasure of collaborating with a couple of great fellow email geeks on. However, as code is constantly being improved it is time I revisited this article.

Since the release, I have been overjoyed to see many others having a go and incorporating it into their designs. I, myself, have used it in a few designs since releasing the article but I noticed something irregular.

Outlook Strikes Again…

When adding the overlay in outlook, it displays an inconsistent gap after the section where the overlay has been applied. While VML is not my strong point, I “bit the bullet” and dived in for a solution. I plowed through the VML documentation and came across something interesting. <v:textbox>has a style that you can add called mso-fit-shape-to-text.

In the code that I had originally used in the Overlay article, I define a height on the <v:rect>. However, with the new code, I can set this to auto and add the mso-fit-shape-to-text:true; to the <v:textbox> which will automatically adjust the height of the rectangle and with the textbox. This means no more batch testing and tweaking the height for a pixel-perfect design.

Here is a codepen example with the improvement on. As always test, test, test. Should you have any problems feel free to reach out to me on Twitter or join the Emailgeeks Slack Community.