Hybrid Alignment Problem with Inner Content Tables in Outlook 2013 (Possibly Caused by VML Background)
Okay, so my template conversion from standard responsive to hybrid, here: http://codepen.io/Nivicious/pen/rORXgy
Issue I'm having is the grey box with the Snapchat content isn't centrally aligning along with the rest of the content above and below.
I have set padding of 30px on either side, following the padding values I have on everything else.
I tried decreasing the width of the table and ghost tables to incorporate the padding but no luck.
The table seems to left align no matter what.
It actually works perfectly without the padding added but then it doesn't work on smller screens because the grey background colour goes full width.
A few #emailgeeks on Twitter had a look and nailed it down to my VML background code on the base wrapping table. When removed everything aligns as expected.
I've run through the VML code over and over and can't seem to find any issues.
Usually when I've run into issues being caused by background image, I've wrapped my content with a ghost table and voilà, it's fixed. But it doesn't seem to work here, no matter where I add this.
Any one seen this before?
This is just a proof of concept to show our account directors (at my leisure), who will eventually show our clients, so no rush.
Take it away and have a play :)
*** UPDATE ***
Justin at FreshInbox wrote this test up to see what was going on: http://codepen.io/anon/pen/LpvWMe
"When sent to Outlook, the left and right padding of the table within a VML gets applied to the right."
"This ONLY happens for tables within a td with padding. Other content will respect the left/right horizontal padding."