Hi Guys!

Both the html and css attribute " dir & direction " messes with some settings in emails previewed in Firefox.

Img1

Do anyone have a fix?

Preview
https://litmus.com/checklist/emails/public/e6efe06

Code here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
    <head>


        <title>Test</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="robots" content="noindex,nofollow" />
        <meta name="x-apple-disable-message-reformatting" />
        <link href="https://assets.prod.ibn.host/ALK/MAIL/Fonts.css" rel="stylesheet">
        <style type="text/css">






            body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } /* Prevent WebKit and Windows mobile changing default text sizes */



            @media screen and (max-device-width: 650px), screen and (max-width: 650px) {

                *[class="w-50"] { width: 50px !important; height: auto !important; }



                *[class="100"] { width: 100% !important; height: auto !important; }

                *[class="90"] { width: 90% !important; height: auto !important; }


                *[class="w-20"] { width: 20px !important; height: auto !important; }


                *[class="min-width"] { min-width: 320px !important; }

                *[class="show"] { visibility:visible !important; display:block !important; }

                *[class="hide"] {display:none !important;}    

                *[class="center"] {  text-align: center !important; padding-left: 40px; padding-right: 40px; } 

                *[class="centercenter"] {  margin: auto !important; }               



                *[class].break{ width: 100% !important; display: block; clear:both; }

                *[class].break-disclaimer{ width: 100% !important; display: block; clear:both; text-align: center !important;}

            }

        </style>


<!--[if gte mso 9]><xml>
 <o:OfficeDocumentSettings>
  <o:AllowPNG/>
  <o:PixelsPerInch>96</o:PixelsPerInch>
 </o:OfficeDocumentSettings>
</xml><![endif]-->  

    </head>

    <body style="margin: 0; padding: 0; min-width: 100%; width: 100% !important;" bgcolor="#F3F3F3">


        <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#F3F3F3">
            <tr>
                <td class="min-width" style="min-width: 640px;">







                    <table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #67C3B7;">
                        <tr>
                            <td align="center">
                                <table class="100" cellspacing="0" cellpadding="0" border="0" style="width: 600px;">
                                    <tr>
                                        <td height="40" colspan="3" style="background-color: #67C3B7;">&nbsp;</td>
                                    </tr>
                                    <tr>

                                        <td align="left" colspan="2" style="background-color: #67C3B7;">
                                            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                                                <tr>

                                                    <td align="right">
                                                        <img src="https://assets.prod.ibn.host/Loreal/NYX/Beetroot_top.png" alt="" height="48" style="display: block; border: 0; width:200px;" class="centercenter"/>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                        <td style="width: 40px;" class="hide">&nbsp;</td>
                                    </tr>
                                </table>     
                            </td>
                        </tr>
                    </table>

                    <!-- BEETROOT -->
                    <table width="100%" cellspacing="0" cellpadding="0" border="0">
                        <tr>
                            <td align="center">
                                <table class="100" cellspacing="0" cellpadding="0" border="0" style="width: 600px;">

                                    <tr>
                                        <td style="width: 40px;" class="w-20">&nbsp;</td>
                                        <td align="left">
                                            <table width="100%" cellspacing="0" cellpadding="0" border="0" style="direction: rtl;" >
                                                <tr>
                                                    <td class="break" align="right" style="vertical-align: top; direction: ltr;">
                                                        <img src="https://assets.prod.ibn.host/Loreal/NYX/Beetroot_bottom.png" alt="" height="179" style="display: block; border: 0; width:200px;" class="centercenter"/>
                                                    </td>
                                                    <td class="break" align="center" style="vertical-align: bottom; width:210px; direction: ltr;">
                                                        <table width="100%" cellspacing="0" cellpadding="0" border="0">
                                                            <tr>
                                                                <td height="40">&nbsp;</td>
                                                            </tr>
                                                            <tr>
                                                                <td class="center" align="right" style=" color: #67C3B7; font-family: 'Vertigo-light', Arial, sans-serif; font-size: 20px; line-height: 22px;">
                                                <span class="vertigo"><b>#1<br />
Add water to<br />
strong colors</b></span>
                                            </td>
                                                            </tr>
                                                            <tr>
                                            <td height="20">&nbsp;</td>
                                        </tr>

                                        <tr>

                                            <td class="center" align="right" style=" color: #4A4A4A; font-family: 'Vertigo-Demibold', Arial, sans-serif; font-size: 12px; line-height: 16px;">
                                                <span class="vertigo">If testing a really brightly colored food or drink, just add a drop of water to lighten it a bit</span>
                                            </td>

                                        </tr>
                                                        </table>
                                                    </td>

                                                </tr>
                                            </table>
                                        </td>
                                        <td style="width: 40px;" class="w-20">&nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td height="40" colspan="3">&nbsp;</td>
                                    </tr>
                                </table>     
                            </td>
                        </tr>
                    </table>
                    <!-- BEETROOT -->   








                </td>
            </tr>
        </table>

    </body>
</html>