MJML : Outlook 1px horizontal when using direction rtl on mj-section

Question

When usign direction="rtl" on a section containing two columns, an horizontal line appears on ms-outlook desktop.

Steps to reproduce :

• Render this MJML code to HTML
• Send the HTML as an email and consult it on MSO Desktop

<mjml>

  <mj-body background-color="red">

    <mj-section direction="rtl" background-color="#ffffff" padding="16px">
      
      <mj-column vertical-align="middle">

        <mj-image src="https://picsum.photos/536/354"></mj-image>

      </mj-column>
      
      <mj-column vertical-align="middle">

        <mj-text font-size="20px" color="red" font-family="helvetica">text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  </mj-text>

      </mj-column>
      
    </mj-section>


    <mj-section background-color="#ffffff" padding="16px">
      
      <mj-column vertical-align="middle">

        <mj-image src="https://picsum.photos/536/354"></mj-image>

      </mj-column>
      
      <mj-column vertical-align="middle">

        <mj-text font-size="20px" color="red" font-family="helvetica">text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  </mj-text>

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

I tried different approches like playing with the padding's (section/ content), adding a white background on every single element contained in the section, different hacks with css .. adding a 'MSO conditionnal' *<br> * and all those kind of things.

No luck so far, I'm pretty desperate atm.

Any help is warmly welcome, thanks !

Answer 1

Found the answer to this issue here : https://litmus.com/community/discussions/5286-mysterious-white-line-in-outlook

Basically, with MSO, you wouldn't want to handle the direction and padding on the same table. Nesting is the key.

So using a mj-wrapper for the padding and then the section for the direction did the trick and the bug disappeared.

<mjml>

  <mj-body background-color="red">
  
    <mj-wrapper padding="16px">

      <mj-section direction="rtl" background-color="#ffffff" padding="0">
        
        <mj-column vertical-align="middle">

          <mj-image src="https://picsum.photos/536/354"></mj-image>

        </mj-column>
        
        <mj-column vertical-align="middle">

          <mj-text font-size="20px" color="red" font-family="helvetica">text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  text text  </mj-text>

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