Basic HTML help

Kenny F'ing Powers

posts 18% useful shit
SoSH Member
Nov 17, 2010
12,135
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;">&nbsp;</td></tr>
 <tr>
<td width="15" style="font-size:1px; border-collapse:collapse; margin:0; padding:0;">&nbsp;</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;">&nbsp;</td>
 </tr>
 <tr><td height="5" colspan="3" style="font-size:1px; border-collapse:collapse; margin:0; padding:0;">&nbsp;</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;">&nbsp;</td>
 </tr>
</table>
<!-- end: Footer -->  
 
</td>
 </tr>
</table>
<!-- End Inner Wrap --> 
    </td>
  </tr>
</table>
<!-- End Outer Wrap -->
 
</body>
</html>
 

rembrat

Member
SoSH Member
May 26, 2006
36,345
Looks fine in Chrome and Firefox and I'm not seeing any glaring problems in the HTML. How are you preveiwing this?
 

Hendu for Kutch

Member
SoSH Member
Apr 7, 2006
6,438
Nashua, NH
Looks good for me as well in Chrome, so I'd also be curious where you're viewing the output.
 
Side note: I use to build emails for some big companies about 8-10 years ago and was forced to live in that table hell.  Every time I get annoyed with oddly handled CSS situations, I think back to those emails and CSS just doesn't seem so bad any more.  Godspeed, table warrior.
 

Kenny F'ing Powers

posts 18% useful shit
SoSH Member
Nov 17, 2010
12,135
FWIW, it's sent from salesforce.com (its an email I built for sales reps to follow up on a phone call). It previews fine in SFDC, but the email breaks in google.
 

rembrat

Member
SoSH Member
May 26, 2006
36,345
Kenny F'ing Powers said:
It was a test email I sent to google. Thats the visual in my google inbox.
 
Instead of doing that, use this to send it to yourself.
 
edit: Oh, I thought you were pasting it into Google. Hmm. Don't know, Google usually handles emails well. It's Outlook that will fuck with you.
 

Kenny F'ing Powers

posts 18% useful shit
SoSH Member
Nov 17, 2010
12,135
It looks like it works fine in yahoo!, so its the way it is getting rendered in Google.
 
What the fuck, Google...
 

Hendu for Kutch

Member
SoSH Member
Apr 7, 2006
6,438
Nashua, NH
I did notice that this line of code is repeated unneccesarily. I wouldn't think it would cause your problem, but getting rid of it can't hurt.
 
Line 65: {!Contact.OwnerPhone}{!Lead.OwnerPhone}<br></span></div>
Line 66: <br></span></div>
 

rembrat

Member
SoSH Member
May 26, 2006
36,345
Try this for the footer table
 
<table width="590" border="0" cellspacing="0" cellpadding="0" align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#000000; text-align:center; width:590px">
 

Kenny F'ing Powers

posts 18% useful shit
SoSH Member
Nov 17, 2010
12,135
Hendu for Kutch said:
I did notice that this line of code is repeated unneccesarily. I wouldn't think it would cause your problem, but getting rid of it can't hurt.
 
Line 65: {!Contact.OwnerPhone}{!Lead.OwnerPhone}<br></span></div>
Line 66: <br></span></div>
 
Thanks. I removed the /span an d/div, but kept the br for spacing purposes.
 
It's bizarre to me how many issues I've had sending test emails form SFDC to google. Font color changes for no apparent reason, bizarre spacing issues, etc. When I use Marketo email, I don't have the same issues, so I'm assuming the SFDC platform is just some buggy shit (which is why people tend to stay away from it as their primary email delivering service, I suppose).
 

Kenny F'ing Powers

posts 18% useful shit
SoSH Member
Nov 17, 2010
12,135
rembrat said:
Try this for the footer table
 
<table width="590" border="0" cellspacing="0" cellpadding="0" align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#000000; text-align:center; width:590px">
 
This fixed it. You guys are the tits.
 

rembrat

Member
SoSH Member
May 26, 2006
36,345
Awesome. It's always best to be as explicit as possible when dealing with tables even going as far as doubling up on widths. I live this hell.
 

Kenny F'ing Powers

posts 18% useful shit
SoSH Member
Nov 17, 2010
12,135
I don't. That's why I never would have been able to figure it out, nor do I have any idea about what you just said. I'm assuming you're implying to remove the "100%" width parameter in place of the actual pixels, as well as putting the pixel width in multiple places within the string.
 
If that is an accurate description of what you're talking about, then I'm fucking awesome.