I’m currently trying to create a box with rounded corners using images and tables for an HTML email. It looks great across all clients and browsers except Microsoft Outlook on IE (tested 8 & 9). Here is the code snippet:
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=4" />
<title></title>
</head>
<body style="margin:0px; padding:0px;">
<style type="text/css">
.ReadMsgBody {width: 100%;}
.ExternalClass {width: 100%;}
</style>
<table width="174" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="174" align="left" valign="top" style="line-height:0px;">
<img src="lmir_tmpl_box_top.png" width="174" height="13" align="left" border="0" style="display:block;" alt="" />
</td>
</tr>
<tr>
<td width="174" align="left" valign="top">
<table width="174" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="8" height="100%" align="left" valign="top" bgcolor="#dcddde"></td>
<td width="158" align="left" valign="top" bgcolor="#dcddde">
<table width="158" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="158" align="left" valign="top" style="line-height:15px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#414042; font-size:11px; font-weight:bold;">
Now you can access on your mobile device!
</td>
</tr>
<tr>
<td width="158" height="8" align="left" valign="top"></td>
</tr>
<tr>
<td width="158" height="1" align="left" valign="top" bgcolor="#CCCCCC"></td>
</tr>
<tr>
<td width="158" height="8" align="left" valign="top"></td>
</tr>
<tr>
<td width="158" align="left" valign="top" style="line-height:15px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#414042; font-size:11px; font-weight:bold;">
<img src="arrow.png" width="10" height="12" align="left" alt="" border="0" style="display:block;" alt="" />
Visit <a href="#" style="color:#00aef0;" target="_blank"><span>Link</span></a>
</td>
</tr>
</table>
</td>
<td width="8" height="100%" align="left" valign="top" bgcolor="#dcddde"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="174" align="left" valign="top" style="line-height:0px;">
<img src="lmir_tmpl_box_bot.png" width="174" height="13" align="left" border="0" style="display:block;" alt="" />
</td>
</tr>
</table>
</body>
</html>
Here is a screenshot of what the box looks like in Outlook:
Does anyone know why the middle row gets pushed to the left? Thank you, and let me know if you have any questions or comments.
I’ve figured it out. Apparently I had to remove the align=”left” from the curved corner top and bottom images. Thank you.