html - Outlook web app systematically removes align="center" attributes -
i integrating e-mail , tearing hair out! e-mail has centered layout (i using ink's hero template). problem layout not centered in outlook web app because client not support margin (so cannot center layout margin: 0 auto;
).
here sample of code:
<!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"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width"/> </head> <body> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="header" valign="top" align="center"> <table class="container" width="580" border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td class="wrapper last" valign="top" style="padding-top:10px;"> <img src="http://www.numeezy.com/img/numeezy-header.png" alt="numeezy, l'hébergement professionel haute performance"/> </td> </tr> </table> </td> </tr> <tr> <td valign="top" align="center"> <table class="container" width="580" align="center"> </table> </td> </tr> </table> </body> </html>
so, outlook not rendering e-mail because align="center"
attributes removed outlook.
<div style="width:100%;margin:0;padding:0;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-spacing:0;width:100%;text-align:justify;padding:0;"> <tbody> <tr style="padding:0;"> <td valign="top" style="background-color:#17303e;padding:0;"> <span style="background-color:#17303e;"> <table width="580" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-spacing:0;width:580px;text-align:justify;margin-top:0;margin-bottom:0;padding:0;"> <tbody> <tr style="padding:0;"> <td valign="top" style="padding:10px 0 0 0;"> <img blockedimagesrc="http://www.numeezy.com/img/numeezy-header.png" alt="numeezy, l'hébergement professionel haute performance"> </td> </tr> </tbody> </table> </span> </td> </tr> <tr style="padding:0;"> <td valign="top" style="padding:0;"> <table width="580" style="border-collapse:collapse;border-spacing:0;width:580px;text-align:justify;margin-top:0;margin-bottom:0;padding:0;"> </table> </td> </tr> </tbody> </table> </div>
my table have width of 580px should centered vertically. can "emulate" in developer tool removing margin: 0;
style , adding align="center"
attribute. may lead!
thank in advance help!
edit: edited code last version
try putting align="center"
on child element (the table trying align). outlook can work differently align other clients. treats float
on element itself, while others treat text:align;
on parent.
update:
you have lot of unnecessary stuff in there. here clean example:
<style> table td {border-collapse: collapse;} </style> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top" align="center" bgcolor="#17303e"> <table width="580" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#330000"><!-- colored can see it--> <tr> <td valign="top" style="padding-top:10px;"><!-- left aligned within centered panel --> <img blockedimagesrc="..." alt="..."> </td> </tr> <tr> <td valign="top" align="center" style="padding-top:10px;"><!-- center aligned within centered panel --> <img blockedimagesrc="..." alt="..."> </td> </tr> </table> </td> </tr> </table>
here example basic setup start email with. includes must have email normalization , centered panel + independent forwarding background color.
Comments
Post a Comment