Mjml: Adding background image messes with padding in Outlook 2013

[janus-reith]

This is an example with two sections.

The first of them looks as it is supposed to including in Outlook, as it does not have a background.

The second one only has the difference that background-url is set.
In Outlook 2013 it is shifted to the left.

I also tried to remove the section padding left and right and gave every item a seperate padding, but this looked even more confusing in Outlook.

This is what it should look like:

I'd really appreciate help how to solve this,
splitting it into 6 images instead of image + text did not help, same issue in Outlook.
Using one big image instead would stop it from being responsive.

Another example:

Outlook without background-url set:

With background-url set:

I found no way to get rid of the white line that appears under the text...
I found a workaround for the second issue: By taking the <mj-text> out of its own section and putting it in the next section below the additional line was gone. Though this would not have worked if the next section had more than one column.

[iRyusa]

May be related to #116

I don't know if vml might cause some weird things on a section...

[janus-reith]

Just as an update, this is still an issue with 1.3.3.
The use of background-images still results in weird/unwanted paddings.

I tried comparing the code generated with and without the background-image,
but could not find anything odd.

But I wonder If there is some additional inline styling that could be applied to have a woirkaroudn for this paddings...

Also I did not find many people complaining about the same issues I have using the CM bulletproof backgrounds. - I guess this is the implementation you used for MJML?

cropped/stretched background in Outlook is also still a thing.

[br4nnigan]

can confirm:

<mj-section
    background-url="http://xyz.com/image.png"
    background-repeat="no-repeat"
    background-color="#ffffff"
    background-size="100%"
    padding="0px 10% 50px 10%"
>

this causes the padding to be ignored. Which is especially a problem since a bg image can only be used on a section, so i can't use a wrapper as workaround.

[Renjamin]

I'm also experiencing this the exact same issue as @br4nnigan.

[iRyusa]

Hi @br4nnigan & @Renjamin

I don't think padding in % are supported in Outlook

[Renjamin]

Hey iRyusa,

Thanks for getting back so quick. 👍

You're right, % paddings do not render properly in outlook. I should have been more specific with what I was saying.

<!-- Header Section -->
            <mj-section background-url="http://storage.pardot.com/131451/33585/cio_mailer_bg.png" background-size="cover" background-repeat="no-repeat" text-align="left" padding-top="25px" padding-right="22px" padding-bottom="35px" padding-left="45px">
                <mj-column border-left="4px solid #4a96ae">

                    <mj-text align="left" padding-top="0" padding-bottom="0" padding-left="15px" font-size="20px" font-weight="800" color="#ffffff" font-family="Montserrat, Arial Black, Arial, Helvetica, sans-serif">
                        Heading
                    </mj-text>

                    <mj-text align="left" padding-top="0" padding-bottom="0" padding-left="15px" font-size="20px" color="#ffffff" font-family="Montserrat, Arial, Arial Black, Helvetica, sans-serif">
                        Sub Heading
                    </mj-text>

                </mj-column>
            </mj-section>

That specific snippet renders without padding in outlook 2013 and 2016.

2007-2010 are fine, at least according to the pardot litmus test.

[Renjamin]

I just wanted to bump for suggestions or ideas on this. Has anyone found a good workaround for this padding issue in Outlook 2013 and 2016?

[iRyusa]

Not yet @Renjamin

We didn't find where does the ghost padding come from

[iRyusa]

Just found out that padding left is applied to the right so right padding = left + right within a VML section... dunno if it's something related to MJML's HTML structure or purely VML

[katart]

I also would like to know if there is a fix for this. I'm removing background image support for Outlook until there's a solution for this.

[iRyusa]

It's a bug on outlook side, when having more than one table nested inside a vml bloc.

For now we have no idea how to fix this and if it's fixable :/

[iRyusa]

I'm closing this issue because it's a bug inside the VML/Word engine so there's nothing we can do on our side to prevent this.