HTML Email Validation

HTML & CSS
1

I have a form that generates an HTML email, however the email does not render in outlook. It’s just a complete mess. I’d really appreciate it if someone could take a look at the code below and let me know what is causing the problem. Thank you!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE></TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE>BODY,TD{font-family:Arial;font-size :12px;}</STYLE>

<META content="MSHTML 6.00.2900.5880" name=GENERATOR></HEAD>
<BODY>
<STYLE>BODY {
    font-family : Arial, Helvetica, sans-serif;
    font-size : 10pt;
}

td{
    font-size : 10pt;
    text-align: left;
    border-bottom:1px solid #DEDEDE;
    padding:5px;
}

td.FieldName{
    font-weight:bold;
    vertical-align: top;
}

td.FieldValue {
    font-family : Arial, Helvetica, sans-serif;
    font-size : 10pt;
}

td.ExtraInfoName {
    font-family : Verdana, Helvetica, sans-serif;
    font-size : 8pt;
    border-bottom:0px;
    font-weight:bold;
}

td.ExtraInfoValue {
    font-family : Verdana, Helvetica, sans-serif;
    font-size : 8pt;
    border-bottom:0px;
}

fieldset {
    display:block; 
    border-color: #ddddFF;
        border-width: 1px 0 0 0;
        border-style: solid none none none;
    padding:5px; 
    font-family:verdana, sans-serif; 
    margin-bottom:0.5em; 
}</STYLE>
The following data was submitted in the form named SeagateContactForm by a 
visitor 
<P>
<TABLE cellSpacing=0 cellPadding=5>
  <TBODY>
  <TR>
    <TD class=FieldName>FirstName </TD>
    <TD class=FieldValue>%FirstName% </TD></TR>
  <TR>
    <TD class=FieldName>LastName </TD>
    <TD class=FieldValue>%LastName% </TD></TR>
  <TR>
    <TD class=FieldName>CompanyName </TD>
    <TD class=FieldValue>%CompanyName% </TD></TR>
  <TR>
    <TD class=FieldName>Phone </TD>
    <TD class=FieldValue>%Phone% </TD></TR>
  <TR>
    <TD class=FieldName>Email </TD>
    <TD class=FieldValue>%Email% </TD></TR>
  <TR>
    <TD class=FieldName>State </TD>
    <TD class=FieldValue>%State% </TD></TR>
  <TR>
    <TD class=FieldName>Products </TD>
    <TD class=FieldValue>%Products% </TD></TR>
  <TR>
    <TD class=FieldName>Comments </TD>
    <TD class=FieldValue>%Comments% </TD></TR></TBODY></TABLE><BR><BR></P>
<FIELDSET style="WIDTH: 450px"><LEGEND>More Info</LEGEND>
<TABLE cellSpacing=0 cellPadding=5>
  <TBODY>
  <TR>
    <TD class=ExtraInfoName>FormSubmissionTime </TD>
    <TD class=ExtraInfoValue>%_sfm_form_submision_time_% </TD></TR>
  <TR>
    <TD class=ExtraInfoName>VisitorsIP </TD>
    <TD class=ExtraInfoValue>%_sfm_visitor_ip_% <BR><A 
      href="http://www.ip2location.com/free.asp?ipaddresses=%_sfm_visitor_ip_%">Locate 
      it!</A> </TD></TR></TBODY></TABLE></FIELDSET>
<P></P></BODY></HTML>
2

outlook will add defang_ to all your class names.

I find duplicating the class style decleration with inline css fixes that problem. Also a lot of the time tables / table elements need to have set heights, alignments, borders etc.

There are loads of little things that you need to watch out for as outlook 2003 renders completely differently to the newer versions (due to microsoft being awesome).

I would try the duplicating of the css styles to inline styles first and see where that gets you? Id be happy offer some more suggestions once the thing is looking even vaugly right in outlook!

3

Thanks Phillip. Can you clarify or show an example of duplicating the inline styles?

This doesn’t need to be perfect or even pretty, just render so it’s legible. Right now all I have is a bunch ugly code.

4

Yes, philip_davies is right. However there is no need in duplicating with inline CSS. You should use inline CSS ONLY. Inline meaning that styles applies to tags inside of “style” attribute of tag, i.e. <span style=“color: #FFCC00; font-size: 12em;”> …

Of course it’s a pain to do it manually and you won’t be able to update the code fast after your styles are inline (especially if your markup is looong), try this tool: http://www.soldesignco.com/dev-csstoinline.php (or google for “tool to convert stylesheet to inline css” if you find this one not good enough for you). good luck!

Darren Stevenson - Programmer
www.htmlBlender.com
Hand coding services for XHTML, CSS, AJAX, and more!

5

Email support is a pain and as mentioned above you should keep styles inline in the html tags for the best results and only use tables for positioning. Avoid any css positioning or floating (or even margins if possible) and use the table structure to place content as required. Most of all keep it simple.

There have been a number of threads about emails and here are a few links of interest.

http://www.sitepoint.com/newsletter/viewissue.php?id=5&issue=48&format=html

http://www.sitepoint.com/forums/showthread.php?p=2672822&posted=1#post2672822
http://www.sitepoint.com/article/code-html-email-newsletters
http://www.xavierfrenette.com/articles/css-support-in-webmail/

You may be better off using a tried and tested template:

http://www.campaignmonitor.com/templates/
http://www.campaignmonitor.com/resources/

6

I usally duplicate the inline styles as im pretty sure one of the online email clients (cant remember which one off my head) doesnt render well with just inline styling. I could be wrong though as I usually just work from a template I made a good year or so, more habit than anything!