Fairly happy with a template code except for one rendering issue in Outlook the text is very close to the vertical divider and gray bar shows up above event details. Should I work to add some more padding for Outlook? More tabling in the HTML code. Appreciate any insight for designing for Outlook. Thank you.
<table width="100%" border="0" cellspacing="0" style="background-color:#fff;border:none;margin-bottom:40px">
<tbody>
<tr height="30">
</tr>
<tr>
<td style="padding:0"> <h2 style="color:#009CFB;font-family:calibri,'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:24px;font-weight:700;line-height:36px;margin:0 0 20px 0;padding:0;text-align:center">Lorem Ipsum Dolor Sit Amet</h2> <p class="text" style="font-family:calibri,'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;line-height:24px;margin:0 auto;width:85%; padding:0 20px;">Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Lorem Ipsum comes from sections "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.</p> </td>
<td width="200" style="border-left:#848484 solid 1px;padding:0;vertical-align:top"> <h3 style="font-family:calibri,'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16;font-weight:700;line-height:36px;margin:0 0 20px 0;padding:0 0 0 20px">Event Details</h3> <p style=" margin:0; padding:0 20px 0 20px; font-family:calibri,'Helvetica Neue',Helvetica,Arial,sans-serif;"> Time:00:00<br /> Date: DD/MM/YY<br /> Location: 1234<br /> Fake Street<br /> <br /><br /> <a href="#">madeupurldotcom.com</a> </p> </td>
</tr>
Padding worked! Any idea why this is happening only in Outlook? White border after image on the left hand side, very slight but wondering if any advice for this. Thanks!
</head>
<body style="background-color:#E8E8E8">
<style>
</style>
<table width="100%" border="0" cellspacing="0" style="border:none">
<tbody>
<tr>
<td style="padding:0"> </td>
<td width="540" style="padding:0">
<table width="100%" border="0" cellspacing="0" style="border:none;margin:10px">
<tbody>
<tr>
<td style="padding:0"> <img src="http://explore.digitalglobe.com/rs/782-PEE-248/images/g-logo_promise_e-mail.png" /> </td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0";border:none">
<tbody>
<tr>
<td width="540" style="padding:0"> <img class="pic" src="http://explore.digitalglobe.com/rs/782-PEE-248/images/pic6.jpg" style="max-width:540px;width:100%" /> </td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" style="background-color:#fff;border:none;margin-top:40px;margin-bottom:40px">
<tbody>
<tr height="30">
</tr>
<tr> <td bgcolor="#FFFFFF">
<td style="padding:5px"> <h2 style="color:#009CFB;font-family:calibri,'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:24px;font-weight:700;line-height:36px;margin:5px 5px 20px 5px;padding:5px;text-align:center"><div class="mktEditable" id="LeftSide" style=""> Lorem Ipsum Dolor Sit Amet</h2> <p class="text" style="font-family:calibri,'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;line-height:24px;margin:0 auto;width:85%; padding:5px 20px;">Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Lorem Ipsum comes from sections "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.</p> </td>
<td width="200" style="border-left:#848484 solid 1px;padding:5px;vertical-align:top"> <h3 style="font-family:calibri,'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16;font-weight:700;line-height:24px;margin:5px 5px 20px 3px;padding:5px 5px 5px 20px"><div class="mktEditable" id="RightSide" style="">Event Details</h3> <p style=" margin:0; padding:5px 20px 5px 20px; font-family:calibri,'Helvetica Neue',Helvetica,Arial,sans-serif;"> Time:00:00<br /> Date: DD/MM/YY<br /> Location: 1234<br /> Fake Street<br /> <br /><br /> <a href="#">madeupurldotcom.com</a> </p> </td>
</tr>
.png)