SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation HTML Email Validation

    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!

    Code HTML4Strict:
    <!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. #2
    SitePoint Enthusiast phillip_davies's Avatar
    Join Date
    Dec 2009
    Location
    Cheltenham, UK
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Addict
    Join Date
    Mar 2001
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Member
    Join Date
    Dec 2007
    Location
    Columbus, OH
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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/...48&format=html
    http://www.sitepoint.com/forums/show...ight=css+email
    http://www.sitepoint.com/forums/show...=1#post2672822
    http://www.sitepoint.com/article/cod...il-newsletters
    http://www.xavierfrenette.com/articl...rt-in-webmail/

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

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

  6. #6
    SitePoint Enthusiast phillip_davies's Avatar
    Join Date
    Dec 2009
    Location
    Cheltenham, UK
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by darrensweb View Post
    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;"> ..
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •