mjml-button is not working in Outlook Mail (live.com)

[tislars]

Code used:

<mjml>
  <mj-body>
    <mj-container background-color="#ecf0f1">
      <mj-section padding-bottom="0" padding-top="30px">
        <mj-column background-color="#fff">
          <mj-image padding-top="60px" padding-left="30px" padding-right="30px" src="images/headline01.png" alt=""></mj-image>
          <mj-text padding-top="10px" padding-bottom="10px" font-family="Helvetica,Arial,sans-serif" font-size="30px" padding-left="30px" padding-right="30px" line-height="120%" align="center" color="#00285b">Foo bar
          </mj-text>
          <mj-text padding-top="10px" padding-bottom="10px" padding-left="30px" padding-right="30px" font-family="Helvetica,Arial,sans-serif" font-size="18px" line-height="120%" align="center" color="#333333">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </mj-text>
          <mj-text padding-bottom="15px" padding-top="10px" padding-left="30px" padding-right="30px" font-family="Helvetica,Arial,sans-serif" font-size="14px" line-height="120%" align="center" color="#7f8d8e">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </mj-text>
          <mj-button padding-bottom="50px" padding-top="0" padding-left="30px" padding-right="30px" background-color="#8aba14" href="#" border-radius="17px">READ MORE</mj-button>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

Issue in Outlook Mail:
Content inside the button has dissapeared and most of the following HTML is distorted.

Side-by-side view:

[ngarnier]

Hey @TisLars, please add a valid href to your button and it should work correctly. Outlook breaks on invalid hrefs.

[tislars]

Filling in a valid URL did the trick.

Another Outlook issue happens when two columns are placed side-by-side. The columns are placed below eachother. This happens at my own template, aswell as with an example template from MJML website (Real Estate template)

Sorry if this belongs to a seperate issue, but I did not want to add another in such short period of time.

[ngarnier]

Indeed, Outlook.com doesn't allow to distinguish between its mobile and desktop clients, so we're displaying the mobile version by default (you can find more info here: https://github.com/mjmlio/mjml/issues/717#issuecomment-308349095).

However, the section shouldn't overflow outside of the container like it is in your screenshot. Which version of Outlook.com are you using?

You can see a Litmus test here: https://litmus.com/checklist/emails/public/960726c#chromeoutlookcom

[tislars]

I am using the live web-version of Outlook Mail in Chrome. Most likely it has to do with the difference in service we used to sent the newsletter. You used Litmus (I guess) and I used Campaign Monitor.

However, thank you for answering both questions and referring me to the more detailed explanation. So far this framework is very solid and enjoyable!

[ngarnier]

Ha thanks, probably due to Campaign Monitor indeed then! I didn't know about CM altering the HTML, please share any info you might find about what changes they make, it's always useful to help other members that would have the same issue.

I'm closing as I think your question is answered!

[klepon]

is not working for outlook in windows 10
I need to manually update the code to

  <!--[if mso]>
    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.EXAMPLE.com/" style="height:48px;v-text-anchor:middle;width:138px;" arcsize="50%" stroke="f" fillcolor="#ffffff">
        <w:anchorlock/>
        <center style="color:#3DCD58;font-family:Nunito;font-size:16px;font-weight:normal;">
            View my account
        </center>
    </v:roundrect>
    <![endif]-->
    <!--[if !mso]> <!-->
    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;width:190px;line-height:100%;">
      <tr>
        <td align="center" bgcolor="#ffffff" role="presentation" style="border:1px solid #3DCD58;border-radius:28px;cursor:auto;height:48px;mso-padding-alt:10px 25px;background:#ffffff;" valign="middle"> <a href="https://google.com" style="display:inline-block;width:138px;background:#ffffff;color:#3DCD58;font-family:Nunito;font-size:16px;font-weight:normal;line-height:16px;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:28px;"
            target="_blank">Google link</a> </td>
      </tr>
    </table>
    <!-- <![endif]-->

to make it work

can this be fixed?

thanks

original code https://mjml.io/try-it-live/r18ndeHsL

[npracht]

@klepon can you highlight what has been changed in your code ?
@ngarnier maybe that could be included in the code generation of mj-button tag to extend responsiveness on Mail from Windows 10 ?

[iRyusa]

We won't use vml for button because then you can't use them in section with background as VML can't be nested. Current implementation of mj-button is the best trade off we could have between compatility and features