Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Missing background-color in Windows 10 #572

Closed
Honza-B opened this issue Mar 1, 2017 · 6 comments
Closed

Missing background-color in Windows 10 #572

Honza-B opened this issue Mar 1, 2017 · 6 comments
Labels
Render issue

Comments

@Honza-B
Copy link

Honza-B commented Mar 1, 2017

Hello,

maybe this is duplicity, but I've just started test my emails on Windows 10 mail client and there is no backround color sets to mj-container.

Here is example of code:

<mjml>
   <mj-body>
      <mj-container` background-color="#f5f5f5" width="700px">
         // content
      </mj-container>
   </mj-body>
</mjml>

Am I missing something?

Thanks for help!!!
@Reached
Copy link

Reached commented Mar 3, 2017

I'm not sure this is your problem, but you have a typo in your code:

<mj-container` <--- Remove the backtick :)

@ngarnier
Copy link
Member

ngarnier commented Mar 3, 2017 •
edited
Loading

Hey @Honza-B, indeed Windows 10 is the only email client that ignores the background color style on the body or the div. The only way I know to achieve that is to wrap the very first table in the Outlook conditional comment in another 100%-width table, with a bgcolor set.

Original HTML:

<body style="background: green;">
  <div style="background-color:green;">
    <!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="700" align="center" style="width:700px;">
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
    <![endif]-->
...
      <!--[if mso | IE]>
        </td></tr></table>
      <![endif]-->
  </div>
</body>

Edited HTML to apply the background-color in Windows 10 Mail:

<body style="background: green;">
  <div style="background-color:green;">
    <!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="width:100%;" bgcolor="green">
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
     		<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="700" align="center" style="width:700px;">
      			<tr>
          			<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
    <![endif]-->
...
    <!--[if mso | IE]>
      		</td></tr></table>
		</td></tr></table>
   <![endif]-->
  </div>
</body>

Let me know if it works for you

@iRyusa iRyusa added MJML 4 and removed MJML 4 labels Oct 17, 2017
@TedGoas TedGoas mentioned this issue Jan 25, 2018
Closed
@ngarnier ngarnier added this to the 4.2.0 milestone Apr 25, 2018
kmcb777 added a commit that referenced this issue May 29, 2018
@kmcb777
fix #572 add outlook table for bgcolor
cc265a6
@justincolangelo
Copy link

@ngarnier I applied this fix to a simple test with mj-hero and found that in most Outlook versions it did not render the hero, but it did fix the background issue on Windows 10 Mail.

Here is my short example:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head>
    <title> </title>
    <!--[if !mso]><!-- -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<![endif]-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        #outlook a {
            padding: 0;
        }

        .ReadMsgBody {
            width: 100%;
        }

        .ExternalClass {
            width: 100%;
        }

            .ExternalClass * {
                line-height: 100%;
            }

        body {
            margin: 0;
            padding: 0;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }

        table,
        td {
            border-collapse: collapse;
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
        }

        img {
            border: 0;
            height: auto;
            line-height: 100%;
            outline: none;
            text-decoration: none;
            -ms-interpolation-mode: bicubic;
        }

        p {
            display: block;
            margin: 13px 0;
        }
    </style>
    <!--[if !mso]><!-->
    <style type="text/css">
        @media only screen and (max-width:480px) {
            @-ms-viewport {
                width: 320px;
            }

            @viewport {
                width: 320px;
            }
        }
    </style>
    <!--<![endif]-->
    <!--[if mso]>
          <xml>
          <o:OfficeDocumentSettings>
            <o:AllowPNG/>
            <o:PixelsPerInch>96</o:PixelsPerInch>
          </o:OfficeDocumentSettings>
          </xml>
          <![endif]-->
    <!--[if lte mso 11]>
          <style type="text/css">
            .outlook-group-fix { width:100% !important; }
          </style>
          <![endif]-->
    <style type="text/css">
        @media only screen and (min-width:480px) {
            .mj-column-per-100 {
                width: 100% !important;
                max-width: 100%;
            }

            .mj-column-per-50 {
                width: 50% !important;
                max-width: 50%;
            }
        }
    </style>
    <style type="text/css">
    </style>
    <style type="text/css">
        .nomargin p {
            margin: 0;
        }

        p.nomargin {
            margin: 0;
        }

        a {
            color: #060502;
        }

            a.secondary,
            .secondary a {
                color: #971b2f;
            }

            a.inverted,
            .inverted a {
                color: #ffffff;
            }

        .prevent-stacking.mj-column-per-50 {
            width: 49% !important;
        }

        .prevent-stacking-48.mj-column-per-50 {
            width: 48% !important;
        }

        .text-centered {
            text-align: center !important;
        }
    </style>
</head>

<body style="background-color:#010101;">
    <div style="background-color:#010101;">
        <!--[if mso | IE]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="width:100%;" bgcolor="#010101">
        <tr>
          <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">

      <table
         align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;" width="600"
      >
        <tr>
          <td  style="mso-line-height-rule:exactly;">
            <v:image
               style="border:0;height:490px;mso-position-horizontal:center;position:absolute;width:600px;z-index:-3;" src="http://demo.purchus.io/content/uploaded/images/the%20little%20nell%20-%20template%20images/header-600x940.jpg" xmlns:v="urn:schemas-microsoft-com:vml"
            />
    <![endif]-->
        <div style="margin:0 auto;max-width:600px;">
            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
                <tbody><tr style="vertical-align:top;">
                    <td background="http://demo.purchus.io/content/uploaded/images/the%20little%20nell%20-%20template%20images/header-600x940.jpg" style="background:#101010 url(http://demo.purchus.io/content/uploaded/images/the%20little%20nell%20-%20template%20images/header-600x940.jpg) no-repeat center center / cover;background-position:center center;background-repeat:no-repeat;padding:0px;padding-left:60px;vertical-align:bottom;" height="490">
                        <!--[if mso | IE]>
                      <table
                         border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600"
                      >
                        <tr>
                          <td  style="padding:0 0 0 0;">
                    <![endif]-->
                        <div class="mj-hero-content" style="margin:0px auto;">
                            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;">
                                <tbody><tr>
                                    <td>
                                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;">
                                            <tbody><tr>
                                                <td align="left" class="nomargin" style="font-size:0px;padding:10px 25px;padding-top:10px;padding-right:25px;padding-bottom:10px;padding-left:25px;word-break:break-word;">
                                                    <div style="font-family:Arial, Helvetica, sans-serif;font-size:14px;font-style:normal;line-height:1;text-align:left;text-decoration:none;color:white;">
                                                        <p><span style="font-size: 80px;">food &amp; wine</span></p>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="right" class="nomargin" style="font-size:0px;padding:10px 25px;padding-top:10px;padding-right:120px;padding-bottom:10px;padding-left:25px;word-break:break-word;">
                                                    <div style="font-family:Arial, Helvetica, sans-serif;font-size:14px;font-style:normal;line-height:1;text-align:right;text-decoration:none;color:white;">
                                                        <table align="center" border="0" cellspacing="0" cellpadding="0">
                                                            <tbody>
                                                                <tr>
                                                                    <td align="left" valign="top" style="width: 73px; height: 2px; background: #6e0502;">
                                                                        <table align="center" border="0" cellspacing="0" cellpadding="0">
                                                                            <tbody>
                                                                                <tr>
                                                                                    <td align="left" valign="top" style="width: 73px; height: 2px; background: #6e0502;"></td>
                                                                                </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </td>
                                                                    <td align="right" valign="top" style="font-family: Arial, sans-serif; font-size: 14px; mso-line-height-rule: exactly; line-height: 12px; font-weight: 400; text-transform: uppercase; color: #ffffff;">AT THE LITTLE NELL</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody></table>
                                    </td>
                                </tr>
                            </tbody></table>
                        </div>
                        <!--[if mso | IE]>
                          </td>
                        </tr>
                      </table>
                    <![endif]-->
                    </td>
                </tr>
            </tbody></table>
        </div>
        <!--[if mso | IE]>
        </td>
      </tr>
    </table>

             </td></tr></table>
         </td></tr></table>
    <![endif]-->
    </div>


</body></html>

@kmcb777
Copy link
Collaborator

kmcb777 commented Jun 1, 2018 •
edited
Loading

@justincolangelo thanks for noticing this, there is indeed a problem with the way Outlook handles z-index, so the vml for mj-hero's image will either be under the background, or over it's own content.

Edit: the workaround i was giving is actually broken, i'll try other ways. The above workaround works if you don't use mj-hero.

@kmcb777 kmcb777 mentioned this issue Jun 1, 2018
Closed
@kmcb777 kmcb777 removed this from the 4.2.0 milestone Jun 20, 2018
@kmcb777
Copy link
Collaborator

kmcb777 commented Jun 20, 2018

I'll close this issue since there doesn't seem to be a solution that works consistently.
If you don't use mj-hero, the workaround explained above works fine.
Another workaround can be to use a full-width mj-wrapper. It uses a table, whose background-color will work in win10 mail.
Feel free to re-open if you have an other fix to suggest.

@kmcb777 kmcb777 closed this as completed Jun 20, 2018
@Certary
Copy link

Certary commented Feb 11, 2020

Wouldn't the proper solution be to change the code so that the very first table in the Outlook conditional comment gets wrapped in another 100%-width table with a bgcolor set (as suggested by @ngarnier) by default? Or atleast if a background-color is set on mj-body.

This won't solve the problem if a mj-hero is involved but at least solves the background-color problem in general.

Btw: I'm still facing this issue with MJML4 and Outlook 2016:

<mjml>
   <mj-body background-color="#eeeeee">
       // content
   </mj-body>
</mjml>

@iRyusa iRyusa mentioned this issue Jul 13, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Render issue
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@iRyusa @justincolangelo @ngarnier @Reached @Honza-B @kmcb777 @Certary