HTML email, table rowspan wrong in Safari -
im trying create email template, tables. td elements in safari has incorrect height when give rowspan.
gave td's red border , div inside green border. see td's height big
plunker: http://plnkr.co/j1yph9
<!doctype html> <html> <head> </head> <body> <div class="wrapper" style="width: 100%; height: 100%; color: rgb(51, 51, 51); font-family: arial,& quot; helvetica neue&quot; , helvetica ,sans-serif; font-size: 14px; font-weight: normal; letter-spacing: normal; text-align: left; background-color: rgb(255, 255, 255);"> <table style="padding: 0px; border: medium none; border-collapse: separate; background-color: rgb(232, 232, 232); height: 510px; width: 610px; margin: 0px auto; color: rgb(51, 51, 51); font-family: arial,& quot; helvetica neue&quot; , helvetica ,sans-serif; font-size: 14px; font-weight: normal; letter-spacing: normal; text-align: left;" bgcolor="rgb(232, 232, 232)" border="0" cellpadding="0" cellspacing="10" width="610px"> <tbody> <tr style="height: 40px; max-height: 40px; vertical-align: top; overflow: hidden; border: medium none;" valign="top"> <td style="vertical-align: top; overflow: hidden; border: medium none; background-color: rgb(255, 0, 0); height: 90px; max-height: 90px; width: 290px; max-width: 290px;" rowspan="2" colspan="2" height="90px" bgcolor="rgb(255, 0, 0)" valign="top" width="290px"><div class=" item" style="padding: 0px; overflow: hidden; background-color: rgb(255, 0, 0); color: rgb(51, 51, 51); margin: 0px; top: 0px; left: 0px; width: 290px; height: 90px; position: initial;"> <div class="drop-block-content " style="box-sizing: border-box; background-color: rgb(255, 0, 0);"> <div class="textcontent ng-binding " style="box-sizing: border-box; padding: 18px; color: rgb(51, 51, 51); font-family: arial,& quot; helvetica neue&quot; , helvetica ,sans-serif; font-size: 14px; font-weight: normal; text-align: left;"> <p>widget1</p> </div> </div> </div></td> <td style="vertical-align: top; overflow: hidden; border: medium none; background-color: rgb(255, 255, 255); height: 140px; max-height: 140px; width: 140px; max-width: 140px;" rowspan="3" colspan="1" height="140px" bgcolor="rgb(255, 255, 255)" valign="top" width="140px"><div class=" item" style="padding: 0px; overflow: hidden; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); margin: 0px; top: 0px; left: 0px; width: 140px; height: 140px; position: initial;"> <div class="drop-block-content " style="box-sizing: border-box;"> <div class="textcontent ng-binding " style="box-sizing: border-box; padding: 18px; color: rgb(51, 51, 51); font-family: arial,& quot; helvetica neue&quot; , helvetica ,sans-serif; font-size: 14px; font-weight: normal; text-align: left;"> <p>widget2</p> </div> </div> </div></td> <td style="vertical-align: top; overflow: hidden; border: medium none; background-color: rgb(255, 255, 255); height: 240px; max-height: 240px; width: 140px; max-width: 140px;" rowspan="5" colspan="1" height="240px" bgcolor="rgb(255, 255, 255)" valign="top" width="140px"><div class=" item" style="padding: 0px; overflow: hidden; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); margin: 0px; top: 0px; left: 0px; width: 140px; height: 240px; position: initial;"> <div class="drop-block-content " style="box-sizing: border-box;"> <div class="textcontent ng-binding " style="box-sizing: border-box; padding: 18px; color: rgb(51, 51, 51); font-family: arial,& quot; helvetica neue&quot; , helvetica ,sans-serif; font-size: 14px; font-weight: normal; text-align: left;"> <p>widget3</p> </div> </div> </div></td> </tr> <tr style="height: 40px; max-height: 40px; vertical-align: top; overflow: hidden; border: medium none;" valign="top"></tr> <tr style="height: 40px; max-height: 40px; vertical-align: top; overflow: hidden; border: medium none;" valign="top"> <td style="vertical-align: top; overflow: hidden; border: medium none; background-color: rgb(255, 255, 255); height: 90px; max-height: 90px; width: 290px; max-width: 290px;" rowspan="2" colspan="2" height="90px" bgcolor="rgb(255, 255, 255)" valign="top" width="290px"><div class=" item" style="padding: 0px; overflow: hidden; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); margin: 0px; top: 0px; left: 0px; width: 290px; height: 90px; position: initial;"> <div class="drop-block-content " style=" box-sizing: border-box;"> <div class="textcontent ng-binding " style="box-sizing: border-box; padding: 18px; color: rgb(51, 51, 51); font-family: arial,& quot; helvetica neue&quot; , helvetica ,sans-serif; font-size: 14px; font-weight: normal; text-align: left;"> <p>widget4</p> </div> </div> </div></td> </tr> <tr style="height: 40px; max-height: 40px; vertical-align: top; overflow: hidden; border: medium none;" valign="top"> <td style="vertical-align: top; overflow: hidden; border: medium none; background-color: rgb(0, 76, 255); height: 190px; max-height: 190px; width: 140px; max-width: 140px;" rowspan="4" colspan="1" height="190px" bgcolor="rgb(0, 76, 255)" valign="top" width="140px"><div class=" item" style="padding: 0px; overflow: hidden; background-color: rgb(0, 76, 255); color: rgb(51, 51, 51); margin: 0px; top: 0px; left: 0px; width: 140px; height: 190px; position: initial;"> <div class="drop-block-content " style=" box-sizing: border-box; background-color: rgb(0, 76, 255);"> <div class="textcontent ng-binding " style="box-sizing: border-box; padding: 18px; color: rgb(51, 51, 51); font-family: arial,& quot; helvetica neue&quot; , helvetica ,sans-serif; font-size: 14px; font-weight: normal; text-align: left;"> <p>widget5</p> </div> </div> </div></td> </tr> <tr style="height: 40px; max-height: 40px; vertical-align: top; overflow: hidden; border: medium none;" valign="top"> <td style="vertical-align: top; overflow: hidden; border: medium none; background-color: rgb(0, 255, 178); height: 290px; max-height: 290px; width: 140px; max-width: 140px;" rowspan="6" colspan="1" height="290px" bgcolor="rgb(0, 255, 178)" valign="top" width="140px"><div class=" item" style="padding: 0px; overflow: hidden; background-color: rgb(0, 255, 178); color: rgb(51, 51, 51); margin: 0px; top: 0px; left: 0px; width: 140px; height: 290px; position: initial;"> <div class="drop-block-content " style=" box-sizing: border-box; background-color: rgb(0, 255, 178);"> <div class="textcontent ng-binding " style="box-sizing: border-box; padding: 18px; color: rgb(51, 51, 51); font-family: arial,& quot; helvetica neue&quot; , helvetica ,sans-serif; font-size: 14px; font-weight: normal; text-align: left;"> <p>widget6</p> </div> </div> </div></td> <td style="vertical-align: top; overflow: hidden; border: medium none; background-color: rgb(255, 255, 255); height: 140px; max-height: 140px; width: 140px; max-width: 140px;" rowspan="3" colspan="1" height="140px" bgcolor="rgb(255, 255, 255)" valign="top" width="140px"><div class=" item" style="padding: 0px; overflow: hidden; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); margin: 0px; top: 0px; left: 0px; width: 140px; height: 140px; position: initial;"> <div class="drop-block-content " style=" box-sizing: border-box;"> <div class="textcontent ng-binding " style="box-sizing: border-box; padding: 18px; color: rgb(51, 51, 51); font-family: arial,& quot; helvetica neue&quot; , helvetica ,sans-serif; font-size: 14px; font-weight: normal; text-align: left;"> <p>widget7</p> </div> </div> </div></td> </tr> <tr style="height: 40px; max-height: 40px; vertical-align: top; overflow: hidden; border: medium none;" valign="top"> <td style="vertical-align: top; overflow: hidden; border: medium none; background-color: rgb(255, 255, 255); height: 240px; max-height: 240px; width: 140px; max-width: 140px;" rowspan="5" colspan="1" height="240px" bgcolor="rgb(255, 255, 255)" valign="top" width="140px"><div class=" item" style="padding: 0px; overflow: hidden; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); margin: 0px; top: 0px; left: 0px; width: 140px; height: 240px; position: initial;"> <div class="drop-block-content " style=" box-sizing: border-box;"> <div class="textcontent ng-binding " style="box-sizing: border-box; padding: 18px; color: rgb(51, 51, 51); font-family: arial,& quot; helvetica neue&quot; , helvetica ,sans-serif; font-size: 14px; font-weight: normal; text-align: left;"> <p>widget8</p> </div> </div> </div></td> </tr> <tr style="height: 40px; max-height: 40px; vertical-align: top; overflow: hidden; border: medium none;" valign="top"></tr> <tr style="height: 40px; max-height: 40px; vertical-align: top; overflow: hidden; border: medium none;" valign="top"> <td style="vertical-align: top; overflow: hidden; border: medium none; background-color: rgb(255, 255, 255); height: 140px; max-height: 140px; width: 290px; max-width: 290px;" rowspan="3" colspan="2" height="140px" bgcolor="rgb(255, 255, 255)" valign="top" width="290px"><div class=" item" style="padding: 0px; overflow: hidden; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51); margin: 0px; top: 0px; left: 0px; width: 290px; height: 140px; position: initial;"> <div class="drop-block-content " style=" box-sizing: border-box;"> <div class="textcontent ng-binding " style="box-sizing: border-box; padding: 18px; color: rgb(51, 51, 51); font-family: arial,& quot; helvetica neue&quot; , helvetica ,sans-serif; font-size: 14px; font-weight: normal; text-align: left;"> <p>widget9</p> </div> </div> </div></td> </tr> <tr style="height: 40px; max-height: 40px; vertical-align: top; overflow: hidden; border: medium none;" valign="top"></tr> <tr style="height: 40px; max-height: 40px; vertical-align: top; overflow: hidden; border: medium none;" valign="top"></tr> </tbody> </table> </div> </body> </html> i know before creating table height of each td must be. (calculation of amount rows + cellspacing). goes prefectly in each browser expect (safari , email client of ipad).
this not work in majority of email clients. lot of css , html web based not recognized or processed. there lot of stylings not necessary , structure built in prone potential issues.
i definitely:
- declare xhtml doctype
- use tables structure , layout
- use html attributes instead of css wherever possible
- div styles inconsistent across clients, better style parent table or td tag
- rowspan , colspan tend inconsistent, better use nested tables or similar method instead.
go here see css applicable email client: https://www.campaignmonitor.com/css/.
i go here general tips in building html emails: http://webdesign.tutsplus.com/articles/build-an-html-email-template-from-scratch--webdesign-12770
using browser rendering poor substitute live email testing browsers have different preprocessor email clients. best bet use service email on acid or litmus test emails on of major email clients.
Comments
Post a Comment