19

I am having a hard time formatting a table in an HTML email. There seems to always be one cell that doesn't have the background color or weird white spaces.

Here is the code (in php) - 

 $subject.="<br/><br/><table style=\"width:585px;\" ><tr><td style=\"padding:10px;background-color:#113797;color:white;\">New & Used Vehicles</td><td style=\"padding:10px;background-color:#113797;color:white;\">Term in Months</td><td style=\"padding:10px;background-color:#113797;color:white;\">APR* As Low As</td><td style=\"padding:10px;background-color:#113797;color:white;\">Monthly Payment Per $1000 Borrowed</td></tr>";       
    $result = mysql_query("SELECT * FROM rates WHERE ID>='32' AND ID <='39'");
        while($row = mysql_fetch_array($result))
    {
                  $subject.= "<tr><td BGCOLOR=\"#e5f1ff\" style=\"padding:10px;color:black;\">" . $row['name'] . "</td>";
                  $subject.= "<td BGCOLOR=\"#e5f1ff\" style=\"padding:10px;\">" . $row['term'] . "</td>";
                  $subject.= "<td BGCOLOR=\"#e5f1ff\" style=\"padding:10px;\">" . $row['apr'] . "</td>";
                  $subject.= "<td BGCOLOR=\"#e5f1ff\" style=\"padding:10px;\">" . $row['per_1000'] . "</td></tr>";
    }

 $subject.= "</table>";

So I've tried both css background and html and both create something that looks bad. I've also tried Doctypes.

This is what my mail code looks like.

    mail( "XXXXXX@yahoo.com", "$title2", "$subject" , "Content-type: text/html;\r\nFrom: auto-alerts@streatoronized.org" );

Here is what it renders out like. See the rogue space?

Table that is messed up!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head></head><body>Check out the low rates.<table style="width:585px;" ><tr><td style="padding:10px;background-color:#113797;color:white;">New &amp; Used Vehicles</td><td style="padding:10px;background-color:#113797;color:white;">Term in Months</td><td style="padding:10px;background-color:#113797;color:white;">APR* As Low As</td><td style="padding:10px;background-color:#113797;color:white;">Monthly Payment Per $1000 Borrowed</td></tr><tr><td bgcolor="#e5f1ff" style="padding:10px;color:black;height:100%;">2008 and NEWER Vehicle Purchases</td><td bgcolor="#e5f1ff" style="padding:10px;height:100%;">Up to 72 Months</td><td bgcolor="#e5f1ff" style="padding:10px;height:100%;">3.24%</td><td bgcolor="#e5f1ff" style="padding:10px;height:100%;">$17.28</td></tr><tr><td bgcolor="#e5f1ff" style="padding:10px;color:black;height:100%;">2008 and NEWER Vehicle!
  Purchases</td><td bgcolor="#e5f1ff" style="padding:10px;height:100%;">64 - 72 Months</td><td bgcolor="#e5f1ff" style="padding:10px;height:100%;">4.29%</td><td bgcolor="#e5f1ff" style="padding:10px;height:100%;">$15.69</td></tr><tr><td bgcolor="#e5f1ff" style="padding:10px;color:black;height:100%;">2007 and OLDER Vehicle Purchases</td><td bgcolor="#e5f1ff" style="padding:10px;height:100%;">Up to 72 Months</td><td bgcolor="#e5f1ff" style="padding:10px;height:100%;">5.49%</td><td bgcolor="#e5f1ff" style="padding:10px;height:100%;">$18.20</td></tr><tr><td bgcolor="#e5f1ff" style="padding:10px;color:black;height:100%;">2007 and OLDER Vehicle Purchases</td><td bgcolor="#e5f1ff" style="padding:10px;height:100%;">64 - 72 Months</td><td bgcolor="#e5f1ff" style="padding:10px;height:100%;">5.99%</td><td bgcolor="#e5f1ff" style="padding:10px;height:100%;">$16.46</td></tr><tr><td bgcolor="#e5f1ff" style="padding:10px;color:black;height:100%;">2011 &amp; 2010 REFINANCES</td><td bgcolor=!
 "#e5f1ff" style="padding:10px;height:100%;">Up to 63 Months</t!
 d><td bg
color="#e5f1ff" style="padding:10px;height:100%;">4.99%</td><td bgcolor="#e5f1ff" style="padding:10px;height:100%;">$18.08</td></tr><tr><td bgcolor="#e5f1ff" style="padding:10px;color:black;height:100%;">2011 &amp; 2010 REFINANCES</td><td bgcolor="#e5f1ff" style="padding:10px;height:100%;">64 - 72 Months</td><td bgcolor="#e5f1ff" style="padding:10px;height:100%;">5.49%</td><td bgcolor="#e5f1ff" style="padding:10px;height:100%;">$16.34</td></tr><tr><td bgcolor="#e5f1ff" style="padding:10px;color:black;height:100%;">2008 - 2009 REFINANCES</td><td bgcolor="#e5f1ff" style="padding:10px;height:100%;">Up to 60 Months</td><td bgcolor="#e5f1ff" style="padding:10px;height:100%;">5.99%</td><td bgcolor="#e5f1ff" style="padding:10px;height:100%;">$19.33</td></tr><tr><td bgcolor="#e5f1ff" style="padding:10px;color:black;height:100%;">2007 &amp; older Vehicle REFINANCE</td><td bgcolor="#e5f1ff" style="padding:10px;height:100%;">Up to 60 Months</td><td bgcolor="#e5f1ff" style="padding:10px!
 ;height:100%;">6.99%</td><td bgcolor="#e5f1ff" style="padding:10px;height:100%;">$19.80</td></tr></table></body></html>
Haru
  • 1,361
  • 2
  • 15
  • 40
  • 1
    Which email client are you viewing it in? Unlike browsers email clients don't seem to have the rendering engines updated regularly and they can throw up all kinds of weird quirks - you're doing pretty much the right stuff though but I've found the most reliable formatting for HTML in emails is HTML 4 with either no, or at most inline CSS. – CD001 Oct 27 '11 at 19:31
  • I just noticed for some odd reason there is a bang in my table. Wonder why the heck that is there. – Haru Oct 27 '11 at 19:32
  • Just as an experiment try lower-casing you BGCOLOR attributes - the fact that the `
    ` tags are closed hints that you're using XHTML and, if that's the case, it should be XML formatted and therefore attributes should be lower-case. Probably won't make any difference but email clients ARE quirky :)     – CD001 Oct 27 '11 at 19:33
  • Can you post the actual html from your mail program? – Sam Oct 27 '11 at 19:37
  • 1
    ... and remember to encode any `&` characters - there's an obvious one in `New & Used Vehicles` but they're also coming in from the database so you might want to add some `htmlspecialchars()` in there. – CD001 Oct 27 '11 at 19:38
  • You should use HTML not XHTML in emails. That might not solve your issue, but prevents many other issues you might run over. – hakre Oct 27 '11 at 19:50
  • I'm viewing it in Outlook and also Yahoo...same issues there. I applied htmlspecialchars() but that didn't seem to resolve it. Where would I declare my doctype when I send the email? – Haru Oct 27 '11 at 20:08

4 Answers4

30

I hate to answer my own question but I did find a resolution to the issue, and hopefully someone can use this solution to get rid of the headaches this causes.

The issue is being caused by use of the mail() function. When I try to send the email, I have a long string of html code. IN FACT, TOO LONG! When I go past 78 characters a BANG! shows up and then jacks with my html or css. RFC 2822

The resolution is to change it to base-64 encode the data or add \r\n on my long lines of html code. Either way resolves the issue.

Thanks for the help everyone!

Community
  • 1
  • 1
Haru
  • 1,361
  • 2
  • 15
  • 40
  • 1
    I had the same issue and was able to resolve it with just \n on the end of the long lines. I read here http://drupal.org/node/31524 that emails need a line break after 998 characters to avoid the issue. Thanks for posting back with your answer! – Dan Jan 26 '12 at 12:57
  • @Andrew Threadgill - am running into same issue, how did you change the HTML code to base-64 encode?any function? – user2341103 Sep 02 '13 at 02:02
  • You don't have to if you want to use \n. – Haru Sep 04 '13 at 21:58
  • Can you paste some example code. I am not able to understand where to add \n. My $messages is too long and I am running into same issue. – harishannam May 28 '14 at 10:12
  • Inside your $messages variable anywhere there are 78 or more characters in a single line. – Haru May 28 '14 at 21:53
  • 3
    If you're wanting to do the base-64 encode, set the "Content-Transfer-Encoding" to be "base64" and encode the message content: `chunk_split(base64_encode($message_content))` – Woody Dec 17 '14 at 16:31
3

Seems there is not a return on the offending cells So try adding height:100% to them so they are fully filled. You could fix this by adjusting this code

<td style=\"padding:10px;background-color:#113797;color:white;\">

To

<td style=\"padding:10px;background-color:#113797;color:white;height:100%;\">

This should solve your problem.

oOo--STAR--oOo
  • 438
  • 2
  • 7
  • 19
  • 1
    Table cells are always the full-height of the row they're, and the full width of their parent column. – Marc B Oct 27 '11 at 19:25
2

Here is a example of how to create a Base64 Encoded Email in:

    <?php 

$html = "<p>The <b>quick</b> <em>brown</em> <u>fox</u> jumped right over the lazy dog.</p><hr />";

$to   = "amit@labnol.org";
$cc   = "cc@labnol.org";
$bcc  = "bcc@labnol.org";
$from = "from@labnol.org";

$subject  = "This is a MIME encoded email";
$boundary = str_replace(" ", "", date('l jS \of F Y h i s A'));
$newline  = "\r\n";

$headers = "From: $from$newline".
           "Cc: $cc$newline".
           "Bcc: $bcc$newline".
           "MIME-Version: 1.0$newline".
           "Content-Type: multipart/alternative;".
           "boundary = \"$boundary\"$newline$newline".
           "--$boundary$newline".
           "Content-Type: text/html; charset=ISO-8859-1$newline".
           "Content-Transfer-Encoding: base64$newline$newline";

$headers .= rtrim(chunk_split(base64_encode($html)));

mail($to,$subject,"",$headers);

?>

I found this code in the following site :

https://ctrlq.org/code/19840-base64-encoded-email

Setting up your emails to be Based64 Encoded will remove the random '!' being added to emails.

colinam1992
  • 23
  • 7
2

Remove all CSS styling, lots of email rendering engines fail with it. Use plain old table design.

Use <font color="black">blah</font> instead of style color, use <table cellpadding="10"> instead of style padding, use bgcolor instead of style background-color.

Set bgcolor to whole TABLE, not TDs.

Petr
  • 3,214
  • 18
  • 21
  • Yes this does work. I didn't know it was such a hassle to have CSS in an HTML email. Most places I have referenced said inline is usually ok. – Haru Oct 27 '11 at 20:52