html - Outlook 2016 ignoring width of cells -
i having issue outlook 2016 on email building. works on older outlooks (as main other email browsers), on particular version main text cell becomes wider banner image above , ignoring 600px restriction (i using [if (gte mso 9)|(ie)] ).
i @ loss causing it. fallback tried applying piece of css make top banner 100% width @ least looks same width cell below it, seems ignore well.
any appreciated.
css
<style type="text/css"> /* client-specific styles */ body, table, td, { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; } img { -ms-interpolation-mode: bicubic; } /* reset styles */ img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; } table { border-collapse: collapse !important; } body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } /* ios blue links */ a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } /* mobile styles */ @media screen , (max-width: 600px) { .img-max { width: 100% !important; max-width: 100% !important; height: auto !important; } .max-width { max-width: 100% !important; } .mobile-wrapper { width: 85% !important; max-width: 85% !important; } .mobile-padding { padding-left: 5% !important; padding-right: 5% !important; } } /* android center fix */ div[style*="margin: 16px 0;"] { margin: 0 !important; } </style> the top banner cell
<tr class="img-max"> <td align="center" bgcolor="#ffffff" class="img-max" style="border-radius: 3px 3px 0 0;"> <a href="~probe(202)~"><img alt="subscribe today!" class="img-max" height="158" src="header2.jpg" style="display: block; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; font-family: sans-serif; font-size: 16px; color: #999999; width: 600px; height: 158px;" width="600"></a> </td> </tr> the problem cell
<tr> <td align="center" bgcolor="#ffffff" class="section-padding" style="padding: 0 0 0 0;"> <!--[if (gte mso 9)|(ie)]> <table align="center" border="0" cellspacing="0" cellpadding="0" width="500"> <tr> <td align="center" valign="top" width="500"> <![endif]--> <table align="center" border="0" cellpadding="0" cellspacing="0" style="max-width:600px;" width="100%"> <tbody> <tr> <td align="center" height="100%" valign="top" width="100%"> <!--[if (gte mso 9)|(ie)]> <table align="center" border="0" cellspacing="0" cellpadding="0" width="600"> <tr> <td align="center" valign="top" width="600"> <![endif]--> <table align="center" border="0" cellpadding="0" cellspacing="0" style="max-width:600px;" width="100%"> <tbody> <tr> <td align="center" class="padding" style="font-size:0; padding: 0 15px 0 15px;" valign="top"> <!--[if (gte mso 9)|(ie)]> <table align="center" border="0" cellspacing="0" cellpadding="0" width="500"> <tr> <td align="left" valign="top" width="240"> <![endif]--> <div class="wrapper" style="display:inline-block; margin: 0 -2px; max-width:50%; min-width:240px; vertical-align:top; width:100%;"> <table align="left" border="0" cellpadding="0" cellspacing="0" class="wrapper" style="max-width:240px;" width="100%"> <tbody> <tr> <td align="center" valign="top"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody> <tr> <td style="padding: 0 0 30px 0;"> <table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" style="max-width:600px" width="100%"> <tbody> <tr> <td align="center" bgcolor="#ffffff" style="text-align:left; font-family: arial, sans-serif; color: #000000; font-size: 15px; padding-left: 5px; padding-right:5px" valign="middle"> lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td> </tr> <tr> <td></td> </tr> </tbody> </table> <p style="text-align: center;"></p> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div><!--[if (gte mso 9)|(ie)]> </td> <td width="20" style="font-size: 1px;"> </td> <td align="right" valign="top" width="240"> <![endif]--> <div class="wrapper" style="display:inline-block; margin: 0 -2px; max-width:50%; min-width:240px; vertical-align:top; width:100%;"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody> <tr> <td> <table align="left" border="0" cellpadding="0" cellspacing="0" class="wrapper" style="max-width:240px; float: right;" width="100%"> <tbody> <tr> <td align="center" valign="top"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody> <tr> <td style="padding: 0 0 30px 0;"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody> <tr> <td align="center" bgcolor="#ffffff" valign="middle"> <a href="~probe(204)~" target="_blank"><img alt="" class="img-max" height="auto" src="side.jpg" style="display: block; color: #666666; font-family: helvetica, arial, sans-serif; font-size: 13px; width: 240px; height: 443px;" width="240"></a> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div><!--[if (gte mso 9)|(ie)]> </td> </tr> </table> <![endif]--> </td> </tr> </tbody> </table><!--[if (gte mso 9)|(ie)]> </td> </tr> </table> <![endif]--> </td> </tr> <tr> <td align="center" height="100%" valign="top" width="100%"><!--[if (gte mso 9)|(ie)]> <table align="center" border="0" cellspacing="0" cellpadding="0" width="500"> <tr> <td align="center" valign="top" width="500"> <![endif]--><!--[if (gte mso 9)|(ie)]> </td> </tr> </table> <![endif]--></td> </tr> </tbody> </table><!--[if (gte mso 9)|(ie)]> </td> </tr> </table> <![endif]--> </td> </tr>
Comments
Post a Comment