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

Broken layout in MS Outlook with v4.0.5 and minify turned on #1201

Closed
dakur opened this issue May 16, 2018 · 4 comments
Closed

Broken layout in MS Outlook with v4.0.5 and minify turned on #1201

dakur opened this issue May 16, 2018 · 4 comments
Milestone
4.1.0

Comments

@dakur
Copy link

dakur commented May 16, 2018 •
edited

When using v4.0.3, everything is OK. But in v4.0.5, closing tags for MSO conditions are missing when minifying is turned on, which causes nesting content recursively.

Reproduction Steps:

  1. Code:
<mjml>
	<mj-body>
		<mj-section>
			<mj-column>
				<mj-text>
					test
				</mj-text>
			</mj-column>
		</mj-section>
	</mj-body>
</mjml>
  1. Generate HTML using MJML v4.0.5 with minifying turned on.
  2. See generated code.
  3. Test in MS Outlook.

Expected behavior:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
	  xmlns:o="urn:schemas-microsoft-com:office:office">
<head>...</head>
<body>
<div><!--[if mso | IE]>
	<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600">
		<tr>
			<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
	<div style="Margin:0px auto;max-width:600px;">
		<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
			<tbody>
			<tr>
				<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;">
					<!--[if mso | IE]>
					<table role="presentation" border="0" cellpadding="0" cellspacing="0">
						<tr>
							<td style="vertical-align:top;width:600px;"><![endif]-->
					<div class="mj-column-per-100 outlook-group-fix"
						 style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
						<table border="0" cellpadding="0" cellspacing="0" role="presentation"
							   style="vertical-align:top;" width="100%">
							<tr>
								<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
									<div
										style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">
										test
									</div>
								</td>
							</tr>
						</table>
					</div><!--[if mso | IE]></td></tr>/<table><![endif]--></td>
			</tr>
			</tbody>
		</table>
	</div><!--[if mso | IE]></td></tr>/<table><![endif]--></div>
</body>
</html>

Observed behavior:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
	  xmlns:o="urn:schemas-microsoft-com:office:office">
<head>...</head>
<body>
<div><!--[if mso | IE]>
	<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600">
		<tr>
			<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
	<div style="Margin:0px auto;max-width:600px;">
		<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
			<tbody>
			<tr>
				<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;">
					<!--[if mso | IE]>
					<table role="presentation" border="0" cellpadding="0" cellspacing="0">
						<tr>
							<td style="vertical-align:top;width:600px;"><![endif]-->
					<div class="mj-column-per-100 outlook-group-fix"
						 style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
						<table border="0" cellpadding="0" cellspacing="0" role="presentation"
							   style="vertical-align:top;" width="100%">
							<tr>
								<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
									<div
										style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">
										test
									</div>
								</td>
							</tr>
						</table>
					</div><!--[if mso | IE]><![endif]--></td>
			</tr>
			</tbody>
		</table>
	</div><!--[if mso | IE]><![endif]--></div>
</body>
</html>

MJML version:

4.0.5

Email clients the bug is seen on:

any MS Outlook on Windows
@dakur dakur changed the title Broken layout in MS Outlook in v4.0.5 Broken layout in MS Outlook using v4.0.5 May 16, 2018
@kmcb777
Copy link
Collaborator

kmcb777 commented May 16, 2018

@dakur Hi, thanks for reporting this. I can't reproduce the issue, even on a fresh 4.0.5 install. How did you use mjml exactly ? With the cli or with node ?

@dakur
Copy link
Author

dakur commented May 17, 2018 •
edited

@kmcb777 Using Git Bash, I ran npm install mjml. Node v9.11.1.
Then I ran ~/node_modules/.bin/mjml index.mjml -o index.html --config.minify=true.

It came to my mind while writing this that maybe the minifier causes this issue. So I've tried to remove --config.minify=true and... it worked! So the bug is about minifying. (added to bug description)

@kmcb777 kmcb777 added this to the 4.1.0 milestone May 17, 2018
@attilabuti attilabuti mentioned this issue May 17, 2018
Closed
kmcb777 added a commit that referenced this issue May 17, 2018
@kmcb777
Merge pull request #1203 from mjmlio/fix-1201
d6e969a 
fix #1201 remove processConditionalComments
@trentclowater trentclowater mentioned this issue May 25, 2018
Closed
@kmcb777
Copy link
Collaborator

kmcb777 commented Jun 20, 2018

Hi @dakur we released a new beta for mjml 4.1, which you can install with npm install mjml@next, could you check if it resolves the problem you had ?

@attilabuti attilabuti mentioned this issue Jun 22, 2018
Closed
@ngarnier ngarnier changed the title Broken layout in MS Outlook using v4.0.5 Broken layout in MS Outlook with v4.0.5 and minify turned on Jun 25, 2018
@dakur
Copy link
Author

dakur commented Jun 25, 2018

@kmcb777 Yes, it looks like it works. Thank you!

gluxon added a commit to SquaredLabs/travelfunds.core.uconn.edu that referenced this issue Jun 26, 2018
@gluxon
Upgrade to mjml beta to fix Outlook layout issues
e4edc36 
Microsoft Outlook 2013 and 2016 on Windows extends the color of the top
header to the entire email, making everything blue. This was from an
if-ie statement not closing a table properly.

See mjmlio/mjml#1201 for more information.
@iRyusa iRyusa closed this as completed in 4f7cdf9 Jun 28, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
4.1.0
Development

No branches or pull requests
2 participants
@kmcb777 @dakur