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 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 name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans:300" rel="stylesheet">
<title>New Event Template Test</title>
</head>
<body bgcolor="#f8f8f8" style="background:#f8f8f8;margin:0;padding:0;">
<a name="top" data-hs-link-id="0" target="_blank"></a>
<!-- framing wrapper -->
<table background="#f8f8f8" style="border-collapse:separate; padding-top:38px" width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="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]><!-- -->
<table width="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>
<td style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:10px solid #ffffff;">
<!-- hero -->
<table width="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>
<td class="hero__content" background="" style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif;border:30px solid #f5f7f6;">
<table class="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>
<td class="hero--subhead__column" style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0; padding-top:17px">
<div class="hero--subhead" style="font-weight:bold; font-size:14px; line-height:21px; text-transform:uppercase; letter-spacing:1.5px"><span class="block-mobile">Webinar: </span>03/08 at 10:00AM - 12:00PM PST</div>
</td>
</tr>
<tr>
<td class="heroHeaderColumn" style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0; padding-top:15px">
<h1 class="hero--header" style="font-size:36px; line-height:45px; margin:0"><div id="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>
<td class="hero--button__column" style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0; padding-top:47px; padding-bottom:37px">
<a class="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>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-family:'Montserrat', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; border:0">
<img class="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"