Outlook Client Not Properly Rendering Table Borders
I've been trying to put together an HTML email template for work, and it looks great! ...in everything except for the Outlook desktop client. I've tried to be as careful as possibl
Solution 1:
There is one method that you could use to ensure your emails are structured to display properly in Outlook. It's a little cumbersome but the results are worth the small effort it takes. What I did was generate the HTML as I wanted it to look, then saved it to a file. I opened the file in MS Word (and no surprise it was skewed and the table rows were completely mis-sized). Then I modified the look in Word like any other document so that it displayed the way I originally wanted it to, then saved the file. I opened that file in a text editor and copied the HTML structure that Word generated into my app - the emails that were generated from that were displayed exactly the way I intended them to be.
Solution 2:
I changed your code a little and tested it in Litmus, it now seems to be working fine regarding your border issues in outlook.
You should avoid adding the border styling to the table tag. Instead, apply it to the surrounding td.
Also, avoid using border="30", only the values 0 & 1 should be used here.
thanks,
<!DOCTYPE HTMLPUBLIC"-//W3C//DTD XHTML 1.0 Transitional //EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metaname="viewport"content="width=device-width, initial-scale=1.0"><metaname="x-apple-disable-message-reformatting"><metahttp-equiv="Content-Type"content="text/html charset=UTF-8"><linkhref="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans:300"rel="stylesheet"><title>New Event Template Test</title></head><bodybgcolor="#f8f8f8"style="background:#f8f8f8;margin:0;padding:0;"><aname="top"data-hs-link-id="0"target="_blank"></a><!-- framing wrapper --><tablebackground="#f8f8f8"style="border-collapse:separate; padding-top:38px"width="100%"align="center"border="0"cellpadding="0"cellspacing="0"><tbody><tr><tdwidth="100%"align="center"class="body__table"style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0"><!--[if mso]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0" class="wrapper__table" background="#f8f8f8">
<![endif]--><!--[if !mso]><!-- --><tablewidth="100%"align="center"cellpadding="0"cellspacing="0"border="0"style="border-collapse:separate; background:#f8f8f8; max-width:600px"class="wrapper__table"background="#f8f8f8"><!--<![endif]--><tbody><tr><tdstyle="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:10px solid #ffffff;"><!-- hero --><tablewidth="100%"align="left"cellpadding="0"cellspacing="0"border="0"bordercolor="#ffffff"bordercolorlight="#ffffff"bordercolordark="#ffffff"class="hero__table"style="border-collapse:separate; background:#f5f7f6; border-color:#ffffff"><tbody><tr><tdclass="hero__content"background=""style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif;border:30px solid #f5f7f6;"><tableclass="hero__content--table"width="100%"align="left"cellpadding="0"cellspacing="0"border="0"bordercolor="#F5F7F6"bordercolorlight="#F5F7F6"bordercolordark="#F5F7F6"background="#F5F7F6"style="border-collapse:separate; background:#f5f7f6;"><tbody><tr><tdclass="hero--subhead__column"style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0; padding-top:17px"><divclass="hero--subhead"style="font-weight:bold; font-size:14px; line-height:21px; text-transform:uppercase; letter-spacing:1.5px"><spanclass="block-mobile">Webinar: </span>03/08 at 10:00AM - 12:00PM PST</div></td></tr><tr><tdclass="heroHeaderColumn"style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0; padding-top:15px"><h1class="hero--header"style="font-size:36px; line-height:45px; margin:0"><divid="hs_cos_wrapper_hero_header"class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_text"style="color: inherit; font-size: inherit; line-height: inherit;"data-hs-cos-general-type="widget"data-hs-cos-type="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></h1></td></tr><tr><tdclass="hero--button__column"style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0; padding-top:47px; padding-bottom:37px"><aclass="email-button"style="text-transform:uppercase; letter-spacing:1.8px; font-size:14px; font-weight:bold; text-decoration:none; background-color:#252525; border-left:38px solid #252525; border-right:38px solid #252525; border-top:12px solid #252525; border-bottom:12px solid #252525; background:#252525; color:#FFFFFF"href="http://google.com"bgcolor="#252525"data-hs-link-id="0"target="_blank">This is a button</a></td></tr></tbody></table></td></tr></tbody></table><tablewidth="100%"border="0"cellpadding="0"cellspacing="0"><tr><tdstyle="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0"><imgclass="hero__image"src="https://dummyimage.com/1160x676/cccbcb/252525.jpg&text=image"width="580"style="vertical-align:text-top; max-width:580px"></td></tr></table><!-- /framing wrapper --></td></tr></tbody></table></td></tr></tbody></table></body></html>
Post a Comment for "Outlook Client Not Properly Rendering Table Borders"