Tuesday, 15 February 2011

html - Outlook changing border css on table -



html - Outlook changing border css on table -

i'm having problems creating html emails display correctly in outlook desktop 2013, i've managed solved problems until border issue can't understand.

basically in outlook web app table looks this: http://imgur.com/eqblukf

but on outlook 2013 somehow looks this: http://imgur.com/s1zqrqw

here's table code before outlook eats , makes mess:

<table cellspacing="0" cellpadding="1" border="0" align="center" width="100%" style="margin:auto;"> <thead> <tr height="40" style="background-color: #cfe1d3; "> <th align="center" width="17%" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px 0 0 1px;"><strong><?php echo $this->__('item') ?></strong></th> <th align="center" width="17%" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px 0 0 1px;"><strong><?php echo $this->__('product code') ?></strong></th> <th align="center" width="30%" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px 0 0 1px;"><strong><?php echo $this->__('product description') ?></strong></th> <th align="center" width="10%" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px 1px 0 1px;"><strong><?php echo $this->__('quantity') ?></strong></th> </tr> </thead> <tbody> <tr> <td align="center" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px; border-right-width: 0; border-top-width: 0;"><img src="images/product" alt="test" width="100%" height="auto" align="left" /></td> <td align="center" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px; border-right-width: 0; border-top-width: 0;">test</td> <td align="center" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px; border-right-width: 0; border-top-width: 0;">this test</td> <td align="center" style="line-height: 1.6em; border-style: solid; border-color: #777; border-width: 1px; border-top-width: 0;">1</td> </tr> </tbody>

have yout tried adding border-collapse: collapse table's style attribute? outlook supposes borders of table cells should not overlap, unless beingness told to.

html css email outlook outlook-2013

No comments:

Post a Comment