mjml

mjml copied to clipboard

Hi there, I got a problem with the <mj-divider>-Tag here.

I use the following to edit my code:

MJML App v2.9.0
MJML v^4.0.3

And my problem is the following:

If I add a divider into my code like this:

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-divider></mj-divider>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

The MJML-App compiles and renders my mjml as expected.

Even if I use the Mailjet-API-Integration of the MJML-APP, my divider in MSO still works as expected.

So let's have a short look at the code that returns, when I click on "Copy HTML".

<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 style="font-size:0px;padding:10px 25px;word-break:break-word;">

                <p style="border-top:solid 4px #000000;font-size:1;margin:0px auto;width:100%;">
                </p>

                <!--[if mso | IE]>
        <table
           align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 4px #000000;font-size:1;margin:0px auto;width:550px;" role="presentation" width="550px"
        >
          <tr>
            <td style="height:0;line-height:0;">
              &nbsp;
            </td>
          </tr>
        </table>
      <![endif]-->


            </td>
        </tr>

    </table>

</div>

This is the code only of the column and its children to keep an overview on the focus.
As we can see here, the if mso-part sets another border inside a table next to the border of the <p>-tag.

This is the result of the missgenerated code (as you would expect after reading the code above):

I tested this behaviour over multiple clients. Here is the List, where I encountered that problem:

• MS Outlook 2007 (Win7)
• MS Outlook 2010 (Win7)
• MS Outlook 2013 120 DPI (Win7)
• MS Outlook 2016 (Win 7)

Hi @max-zinn Thanks for reporting this, we're aware of that, but it's not really consistent, most of the time word-based outlook aren't rendering the border on p tags and when it does, you'll see a double divider.

As you can see in this email on acid test https://www.emailonacid.com/app/acidtest/0kDO0CM60QMUX3DtEawe1xYfc1ohRM2IcwqMOaSEBrguU/list it only doubles on Outlook 2003 in this case

Hi @iRyusa Thanks for your reply. Wouldn't it be possible then to surround the <p>-Element with an <!-- [if !mso]>? Or can you provide a workaround to fix that behaviour? My solution until now is to delete the whole <!-- if[ mso | IE ]> block.

The issue is there's no consistency over this bug. Maybe the safest route would be to only use a table + border bottom on a td, that might remove the double divider but it would have way less control over the current solution.

If we could find what cause the p tag to render the border in some case, we might be able to find a better solution for this.

The issue exist in these mail clients tested with Litmus;

IBM Notes 9 (Windows 7) Lotus Notes 8 (Windows 7) Lotus Notes 8.5 (Windows 7) Outlook 2000 (Windows 7) Outlook 2002 (Windows 7) Outlook 2003 (Windows 7)

MJML App v2.9.0
MJML v^4.0.3

Thanks for MJML it's an amazing idea :)

Hi @iRyusa !

We've been consistently having this issue with <mj-divider> on Outlook 2000, 2002, and 2003 when testing in Litmus. Is the best solution for this so far to remove the block from the output to remove the duplicate divider?

Thanks!

Has anyone figured out a fix to this? Having the same issue.

For divider lines, I've found better consistency using the horizontal rule method that Mark Robbins describes over on Good Email Code. I've found this fixes ghost borders in Outlook when using border-top or bottom and might fix this issue to. Something to consider for mj-divider maybe?

If it works better than current implem let's go for it 😄

@nate-kelly thank you for sharing this fix. I've used it inside mj-raw.