email-bugs
email-bugs copied to clipboard
hteumeuleu
Outlook 2013-2021 will not render left padding when a table is nested more than once in a VML object
Outlook '13 and '16 have a bug where if more than one table is nested inside of a VML object (specifically for the purpose of a background-image), left padding will fail for the first, second and all remaining nested tables.
Case 1
<vml>
<table><tr><td style="padding: 40px;">
Padding works as intended with 40px on all 4 sides. For most cases, additional nesting is not necessary for layout.
</td></tr></table>
</vml>
Case 2
<vml>
<table><tr><td style="padding: 40px;">
<table><tr><td>
Initial td is used as a container, and a second nested table will be used for content. In this case, Outlook '13 and '16 fail to render the left padding on the containing td. The remaining 3 padding properties work as intended.
</td></tr></table>
</td></tr></table>
</vml>
Case 3
<vml>
<table><tr><td style="padding: 40px;">
<table><tr><td style="padding: 40px;">
To see how far the rabbit hole went, I decided to keep nesting tables and adding padding to all, or only the next closest table to the content. In the end, it seems that any additional table nested after the first will render any and all left-padding irrelevant.
</td></tr></table>
</td></tr></table>
</vml>
Inversely, both clients render margin-left as intended, without supporting the other 3 margin attributes under these circumstances.
Therefore, we can add a class/id and padding to a td (this would be a Case 2 scenario, acting as a container fix) <td class="padding" style="padding: 40px;"> and use conditional css to add a left margin for Outlook clients greater than or equal to 13.
<!doctype html>
<html>
<head>
<!--[if gte mso 13]>
<style type="text/css">
.padding { margin-left: 40px !important; padding-left: 0 !important; }
</style>
<![endif]-->
</head>
<body>
<vml>
<table><tr><td class="padding" style="padding: 40px;">
<table><tr><td>
Hello world! I'm nested and padded!
</td></tr></table>
</td></tr></table>
</vml>
</body>
</html>
Setting the padding-left attribue to 0 doesn't seem to have any effect in the conditional css.
A point was brought up to use the inset value on the <v:textbox> element, but that would have adverse affects in conjunction with the padding for all remaining MSO clients that do render it properly. This approach tries to tackle the problem directly, by fixing the CSS that should be valid in the first place.
EoA test for reference. https://www.emailonacid.com/app/acidtest/tM4rWkVK9Ptna79iMhKldDRiymezJ7L7Al2vKJ9KH9Vug/list
Test File - mso_13+16_pad_fix.zip
UPDATE
Second alternative option without declaring classes or css styles is to override the padding directly inline with
<!doctype html>
<html>
<body>
<vml>
<table><tr><td class="padding" style="padding-top: 40px; padding-right: 40px padding-bottom: 40px; padding-left: 40px; mso-padding-right-alt: 0; mso-padding-left-alt: 0;">
<table><tr><td>
Hello world! I'm nested and padded!
</td></tr></table>
</td></tr></table>
</vml>
</body>
</html>
This approach can't mix short/long format, so all padding properties must be explicitly expressed for this version to work correctly.
Hey @darienallen, I've struggled with the same issue when using bulletproof background images for a single table cell. I since found that the 'inset' values on the 'v:textbox' element work as margin in Outlook, the order being left,top,right,bottom.
I'm not sure what exactly do you mean by "bulletproof background images" but standard VML backgrounds generated by https://backgrounds.cm/ don't cause inner table cells inside them to lose padding-left. Here's a quick test:
Letter is offset from the left using a generous padding of 45px. If that padding was down, it would not appear in the centre of the table cell.
Here's the HTML code: https://gist.github.com/revelt/2412138ca045fe879d1851ce6b1b461c
Here's how it looks in Outlook:
Please challenge my code and prove me otherwise — but is it a VML background and it is a cell within a table with padding-left and it is working fine.
From my practice, I've implemented VML backgrounds on many brand email template headers and never had problems with that. There are issues with line-height and mso-line-height-rule:exactly; thing but not padding inside VML...
Apologies to all, it seems my initial EoA test was deleted accidentally. @gary-mason you are absolutely correct. This bug and solution was submitted on the premise I did not want to use a <v:textbox> to solve for an unreasonable padding issue with basic CSS.
@codsen I was unclear, which is more so now that my test has been deleted. Left-padding seems to disappear when a table element is nested more than one <td> deep, so if you nest another <table> (and friends) inside your current padded <td>, say if it's being used as a container, I expect it to be completely ignored and all 2nd-child content will be against the left edge.
I'll run a new test by the end of the week to follow up, always appreciate the feedback
@gary-mason @revelt Original post updated to reflect your comments and concerns,
Happy coding, Darien
@darienallen
How does the "Second alternative option" you mentioned in your update work? I was able to use your first solution, but I don't understand the second solution.
@jkupczak
I have found that the second alternative option is missing some important code in order to work. It is missing the Margin-left inline style property. The idea is I believe that the normal padding styles are for non MSO clients; and the combination of Margin and alternative mso padding set to 0 for MSO clients. This works in my experience:
<html>
<body>
<vml>
<table><tr><td class="padding" style="padding-top:40px;padding-right:40px;padding-bottom:40px;padding-left:40px;Margin-left:40px;Margin-right:40px;mso-padding-right-alt:0;mso-padding-left-alt:0;">
<table><tr><td>
Hello world! I'm nested and padded!
</td></tr></table>
</td></tr></table>
</vml>
</body>
</html>
Unless I'm missing it, I don't see it noted that this is still an issue in '19 and the newer O365 versions. Maybe worth updating the title of the bug?
I haven't been able to get any of the solutions to work. Does any one have any other suggestions to deal with a row of images I need to center on a vml background.
