NP0
Direction attribute gets killed by firefox
Hi Guys!
Both the html and css attribute " dir & direction " messes with some settings in emails previewed in Firefox.
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;"> </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"> </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"> </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"> </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"> </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"> </td>
</tr>
<tr>
<td height="40" colspan="3"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- BEETROOT -->
</td>
</tr>
</table>
</body>
</html>
Hello,
Upon inspection, I don't this it has to do with
directionordir. But it looks like thealign="right"declaration on the<td>containing the bottom image is ignored. Addingtext-align:right;seems to work.I'm not sure when Firefox dropped support for
alignon<td>, but it doesn't seem too new based on this thread and this compatibility table.Hey Rémi.
Thanks for taking tour time answering this.
The problem is with the text-align: right; is, that Chrome moves any image left when something is text-aligned right.
So, same problem, new browser though.
https://assets.prod.ibn.host/ALK/MAIL/Nima/Chrome.png