I've got an alignment issue with an email I've crafted via HTML. I think it may be a table issue, as I added a few into the coding to align some bulletpoints, text, etc.
Anyway, the footer letterhead image is offset from the rest of the image, and as someone with minimal HTML knowledge, I'm stuck. Any ideas?
HTML code:
<!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><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body bgcolor="#f2f2f2">
<!-- Outer Wrap -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" style="table-layout:fixed;">
<tr>
<td>
<!-- Inner Wrap -->
<table width="590" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<!-- top shadow -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="40" valign="bottom"><img src="http://marketinginfo.timepayment.com/rs/microfinancialincorporated/images/curv-top-sdw.png" style="display:block" width="589" height="18" border="0" /></td>
</tr>
</table>
<!-- header -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color:#7cbd41; border-bottom:3px solid #7cbd41">
<tr><td height="10" colspan="3" style="font-size:1px; border-collapse:collapse; margin:0; padding:0;"> </td></tr>
<tr>
<td width="15" style="font-size:1px; border-collapse:collapse; margin:0; padding:0;"> </td>
<td height="72">
<div class="mktEditable" id="header">
<img src="http://marketinginfo.timepayment.com/rs/microfinancialincorporated/images/TPC-white-transparent.gif" width="225" height="31" style="border-collapse:collapse;" />
</div>
</td>
<td width="15" style="font-size:1px; border-collapse:collapse; margin:0; padding:0;"> </td>
</tr>
<tr><td height="5" colspan="3" style="font-size:1px; border-collapse:collapse; margin:0; padding:0;"> </td></tr>
</table>
<!-- end: header -->
<br>
<div><span style="font-family: MuseoSans-300, Tahoma; font-size: 14px; color: #333333;">{!Contact.FirstName},
<br><br>
Text.
<br><br>
Text. </span><span style="font-family: MuseoSans-300, Tahoma; font-size: 14px; color: #7cbd41;"><b>Text.</b><span style="font-family: MuseoSans-300, Tahoma; font-size: 14px; color: #333333;"> Text.
<TABLE BORDER=0 CELLspacing=20><TR><td>•Text.<br>
• Text.<br>
• Text.<span style="font-family: MuseoSans-300, Tahoma; font-size: 10px; color: #333333;"> (Text.)
</span></td></tr></table>
<span style="font-family: MuseoSans-300, Tahoma; font-size: 14px; color: #333333;">
Text.
<TABLE BORDER=0 CELLspacing=20><TR><td>• <a href="Text.">Text.</a><br>
• <a href="Text.">Text.</a>
</td></tr></table>
Text.
<br><br>
Text.
<br>
<br>
Cordially,
<br>
<br>
<b>{!Contact.OwnerFullName}{!Lead.OwnerFullName}</b><br>
{!Contact.OwnerTitle}{!Lead.OwnerTitle}<br>
{!Contact.OwnerPhone}{!Lead.OwnerPhone}<br></span></div>
<br></span></div>
<!-- Footer -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#000000; text-align:center;">
<tr>
<td height="40" valign="top">
<img src="http://marketinginfo.timepayment.com/rs/microfinancialincorporated/images/curv-bottom-sdw.png" style="display:block" width="589" height="34" border="0" />
</td>
</tr>
<tr>
<td style="color:#5e5d5d;">
<div class="mktEditable" id="footer">
<span style="font-weight:bold;"><a href="http://www.timepayment.com">TimePayment</a></span><br />
<a style="color:#5e5d5d; text-decoration:none;" href="http://www.timepayment.com/contact">Contact Us</a>
</div>
</td>
</tr>
<tr>
<td height="30" style="font-size:1px; border-collapse:collapse; margin:0; padding:0;"> </td>
</tr>
</table>
<!-- end: Footer -->
</td>
</tr>
</table>
<!-- End Inner Wrap -->
</td>
</tr>
</table>
<!-- End Outer Wrap -->
</body>
</html>
Anyway, the footer letterhead image is offset from the rest of the image, and as someone with minimal HTML knowledge, I'm stuck. Any ideas?
HTML code:
<!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><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body bgcolor="#f2f2f2">
<!-- Outer Wrap -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" style="table-layout:fixed;">
<tr>
<td>
<!-- Inner Wrap -->
<table width="590" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<!-- top shadow -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="40" valign="bottom"><img src="http://marketinginfo.timepayment.com/rs/microfinancialincorporated/images/curv-top-sdw.png" style="display:block" width="589" height="18" border="0" /></td>
</tr>
</table>
<!-- header -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color:#7cbd41; border-bottom:3px solid #7cbd41">
<tr><td height="10" colspan="3" style="font-size:1px; border-collapse:collapse; margin:0; padding:0;"> </td></tr>
<tr>
<td width="15" style="font-size:1px; border-collapse:collapse; margin:0; padding:0;"> </td>
<td height="72">
<div class="mktEditable" id="header">
<img src="http://marketinginfo.timepayment.com/rs/microfinancialincorporated/images/TPC-white-transparent.gif" width="225" height="31" style="border-collapse:collapse;" />
</div>
</td>
<td width="15" style="font-size:1px; border-collapse:collapse; margin:0; padding:0;"> </td>
</tr>
<tr><td height="5" colspan="3" style="font-size:1px; border-collapse:collapse; margin:0; padding:0;"> </td></tr>
</table>
<!-- end: header -->
<br>
<div><span style="font-family: MuseoSans-300, Tahoma; font-size: 14px; color: #333333;">{!Contact.FirstName},
<br><br>
Text.
<br><br>
Text. </span><span style="font-family: MuseoSans-300, Tahoma; font-size: 14px; color: #7cbd41;"><b>Text.</b><span style="font-family: MuseoSans-300, Tahoma; font-size: 14px; color: #333333;"> Text.
<TABLE BORDER=0 CELLspacing=20><TR><td>•Text.<br>
• Text.<br>
• Text.<span style="font-family: MuseoSans-300, Tahoma; font-size: 10px; color: #333333;"> (Text.)
</span></td></tr></table>
<span style="font-family: MuseoSans-300, Tahoma; font-size: 14px; color: #333333;">
Text.
<TABLE BORDER=0 CELLspacing=20><TR><td>• <a href="Text.">Text.</a><br>
• <a href="Text.">Text.</a>
</td></tr></table>
Text.
<br><br>
Text.
<br>
<br>
Cordially,
<br>
<br>
<b>{!Contact.OwnerFullName}{!Lead.OwnerFullName}</b><br>
{!Contact.OwnerTitle}{!Lead.OwnerTitle}<br>
{!Contact.OwnerPhone}{!Lead.OwnerPhone}<br></span></div>
<br></span></div>
<!-- Footer -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#000000; text-align:center;">
<tr>
<td height="40" valign="top">
<img src="http://marketinginfo.timepayment.com/rs/microfinancialincorporated/images/curv-bottom-sdw.png" style="display:block" width="589" height="34" border="0" />
</td>
</tr>
<tr>
<td style="color:#5e5d5d;">
<div class="mktEditable" id="footer">
<span style="font-weight:bold;"><a href="http://www.timepayment.com">TimePayment</a></span><br />
<a style="color:#5e5d5d; text-decoration:none;" href="http://www.timepayment.com/contact">Contact Us</a>
</div>
</td>
</tr>
<tr>
<td height="30" style="font-size:1px; border-collapse:collapse; margin:0; padding:0;"> </td>
</tr>
</table>
<!-- end: Footer -->
</td>
</tr>
</table>
<!-- End Inner Wrap -->
</td>
</tr>
</table>
<!-- End Outer Wrap -->
</body>
</html>