When using direction="rtl" on a section containing two columns, an horizontal line appears on ms-outlook desktop.
Steps to reproduce :
<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 approaches 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 conditional' *<br> * and all those kind of things.
No luck so far, I'm pretty desperate atm.
Any help is warmly welcome, thanks !
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>