Mjml: Missing background-color in Windows 10
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!!!
Honza-B
All 6 comments
I'm not sure this is your problem, but you have a typo in your code:
Reached
on 3 Mar 2017
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
ngarnier
on 3 Mar 2017
@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 & 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>
justincolangelo
on 30 May 2018
@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
on 1 Jun 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
on 20 Jun 2018
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>
Certary
on 11 Feb 2020
Related issues
theVannu
路
3Comments
hellfish2
路
4Comments
samatcd
路
4Comments
ghost
路
4Comments
rumbogs
路
3Comments
Most helpful comment
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: