Skip navigation
psurazz
Currently Being Moderated

Resolving table tag issues in HTML e-mail template

Apr 17, 2012 10:40 AM

Thanks for previous advice creating HTML e-mail. Everyone responded to avoid Photoshop because of the way each e-mail client handles the output. Thanks for the tip on Email On Acid. What a hoot.

 

So, I downloaded an HTML newsletter template and made it my own using Taco Edit HTML. Running it through the Email On Acid thing, the output on MS clients seems OK. One of the paragraphs shifted to Right Aligned, while every other client kept it at Center Aligned. The the output still looked bad on Gmail. Since this is B2B, my customers don't use Gmail and mostly are on some MS client, I'm more worried about those.

 

Two things I would still like to ask:

 

On the example below, Taco is giving me the syntax error: "Unmatched Tag - The <table> tag is closed implicity by the </td> tag." Lines 27, 97, 115, 116. This is HTML 101, but I just can't isolate it.

 

And. Is there a better suggestion for an HTML generator? Something more WYSIWYG than Taco. I would like something that can better identify my tables. Right now, I just change the Border to 1 px, to see where I am working. I used iWeb to create my website, so I would guess, I'm going to have the same issues as PS with HTML e-mail. And, I'm transitioning to RapidWeaver, which doesn't give you any access to the code either.

 

http://doncamacho.com/dyk_assets/index.html

 
Replies
  • Currently Being Moderated
    Apr 17, 2012 12:14 PM   in reply to psurazz

    There was so much out of place with that code that it was easier/quicker to fix than it was to explain how to fix it. HTML emails need to be constructed from the "outside in" so you need a container to hold everything in place - something your code was missing. You can test the layout but I haven't spent a great deal of time on it. You will also need to move the styles inline - most webmail (gmail etc) strip out the head tags. Try: http://beaker.mailchimp.com/inline-css

     

    Your % widths were also changed to px widths. Outlook is not a fan of %. See here for more info: http://24ways.org/2009/rock-solid-html-emails

     

    As for the email editor, your in a Dreamweaver forum - try that? Hopefully with the below you will have a good enough foundation to start from. Enjoy.

     

     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DC&A New Line List</title>
    <style type="text/css">
    body {
              font-size: 12px;
              color: #666;
              margin: 0;
              padding: 0;
              font-family: Georgia, Times New Roman, Times, serif;
    }
    .content p {
              font-size: 14px;
              color: #333333;
              margin-top: 0px;
              margin-bottom: 12px;
              padding: 0;
              font-family: Arial, Helvetica, sans-serif;
    }
    .footer p {
              font-size: 12px;
              color: #666;
              margin: 0;
              padding: 0;
              font-family: Arial, Helvetica, sans-serif;
    }
    ul {
              margin: 0;
              padding-left: 14px;
              line-height: 18px;
              list-style: disc;
    }
    li {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 14px;
              color: #cc0000;
              font-weight: bold;
              margin: 0;
              padding: 0;
    }
    </style>
    </head>
    <body style="margin: 0; padding: 0; background-color: #d8e7ea;">
    
    
    <!--100% body table-->
    <table width="100%" cellpadding="0" cellspacing="0" align="center">
      <tr>
        <td><!-- container -->
          
          <table width="620" cellpadding="0" cellspacing="0" align="center">
            <tr>
              <td><!-- head -->
                
                <table width="620" border="0" align="center" cellpadding="0" cellspacing="0">
                  <tr>
                    <td valign="middle" align="center" height="30" bgcolor="#0d2d42"><p style="font-family: Arial, Helvetica, sans-serif; text-align:center; font-size: 14px; color: #FFF; text-transform: uppercase; margin: 0; padding: 0;">Email not looking beautiful? <a style="color: White; " href="http://doncamacho.com/dyk_assets/index.html" title="Open in your browser">Open in your browser</a> </p></td>
                  </tr>
                </table>
                
                <!--/header text--> 
                
                <!--intro-->
                
                <table width="620" border="0" align="center" cellpadding="0" cellspacing="0">
                  <tr>
                    <td width="620" height="10" colspan="3"></td>
                    <!-- space --> 
                  </tr>
                  <tr>
                    <td valign="middle" width="40" height="100"></td>
                    <td class="header" width="550" height="100"><img style="margin: 0; padding: 0; display: block; border: 0px solid #000000;" src="http://doncamacho.com/dyk_assets/images_dyk/zing_header.gif"width="550" height="137" alt="img1"label="Image" /></td>
                    <td width="30" height="100" valign="top"></td>
                  </tr>
                  <tr>
                    <td width="620" height="10" colspan="3"></td>
                    <!-- space --> 
                  </tr>
                </table>
                
                <!--/intro--> 
                
                <!--content section-->
                
                <table width="620" border="0" align="center" cellpadding="0" cellspacing="0">
                  <tr>
                    <td height="82" width="11" valign="middle"><img style="margin: 0; padding: 0; display: block;" src="http://doncamacho.com/dyk_assets/images/side-corner.png" width="11" height="83" /></td>
                    <td height="82" bgcolor="#FFFFFF" valign="middle"><table width="609" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                          <td height="23" colspan="3"></td>
                        </tr>
                        <tr>
                          <td height="37" bgcolor="#cc0000" width="542"><h1 style="margin:0;color: #fff;font-size: 21px; line-height:21px;font-family: Arial, Helvetica, sans-serif;text-shadow: 1px 1px 1px #000;"> We've updated our line list! </h1></td>
                          <td height="37" bgcolor="#cc0000" width="47"><img src="http://doncamacho.com/dyk_assets/images/bar-end.png" width="47" height="37" style="display:block; border:none;" /></td>
                          <td width="20"></td>
                        </tr>
                        <tr>
                          <td height="22" colspan="3"></td>
                        </tr>
                      </table></td>
                  </tr>
                </table>
                <table width="620" border="0" align="center" cellpadding="0" cellspacing="0">
                  <tr>
                    <td width="11"></td>
                    <td valign="top" bgcolor="#FFFFFF" width="20"></td>
                    <td valign="top" bgcolor="#FFFFFF" width="429" align="left"><p><B>We have updated our line list effective April 1st.</B></p>
                      <p>Please take a look at our latest Additions</p>
                      <ul style="list-style-type: circle;">
                        <li>Orved Vacuum Sealers</li>
                        <li>Viking Commercial Range</li>
                        <li>US Refrigeration - Stocked Locally</li>
                        <li>New Line List format includes factory weblinks!</li>
                      </ul>
                      <p><a href="http://www.orved.com" title="Welcome to Orved USA"><img style="border-width: 0px; display:block;" src="http://doncamacho.com/dyk_assets/logos/Orved%20logo.jpg" width="200" height="71" /></a></p>
                      <p> </p></td>
                    <td bgcolor="#FFFFFF" valign="top" width="150" align="left"><a href="http://doncamacho.com/About_Us_files/DCA%202012%20Line%20List.pdf" title="Click Here to Download"><img src="http://doncamacho.com/dyk_assets/images_dyk/ipad_linelist.jpg" alt="" width="150" height="194" style="border-width: 0px; display:block;" /></a></td>
                    <td width="10" bgcolor="#FFFFFF"></td>
                  </tr>
                </table>
                
                <!--/content section--> 
                
                <!--footer-->
                
                <table width="620" border="0" align="center" cellpadding="20" cellspacing="0">
                  <tr>
                    <td class="footer" valign="top"><p> You received this email because at some point in the past you either bought one of our products represented by Don Camacho & Associates. If you’d like, you can <a href="mailto:billr@doncamacho.com?subject=Unsubscribe from future mailings"title="unsubscribe">unsubscribe</a> </p></td>
                    <td valign="top"><!--button-->
                      
                      <table width="200" border="0" align="right" cellpadding="10" cellspacing="0">
                        <tr>
                          <td style="border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; color: #ffffff; text-align: center;" height="28" bgcolor="#0099ff"><a style="font-family: &quot;Comic Sans MS&quot;; font-weight: bold; color: White; text-decoration: none; " href="http://doncamacho.com/About_Us_files/DCA%202012%20Line%20List.pdf">Click to download</a></td>
                        </tr>
                      </table>
                      
                      <!--/button--></td>
                  </tr>
                </table>
                
                <!--footer--> 
                
                <!--break-->
                
                <table width="620" border="0" cellspacing="0" cellpadding="0" align="center">
                  <tr>
                    <td height="25"></td>
                  </tr>
                </table>
                
                <!--/break--></td>
            </tr>
          </table>
          
          <!-- container -->
      </tr>
        </td>
      
    </table>
    <!--/100% body table-->
    </body>
    </html>
    
    
     
    |
    Mark as:
  • Currently Being Moderated
    Apr 18, 2012 11:21 AM   in reply to psurazz
    I use a bulk mailer called Mailings (Mac). I insert Preamble text with a link to the browser version. This is now redundant, because this is also imbedded in your example. When I test mail it from there, the Preamble text/link is shown on top of the background color of the HTML email message. Previously, this would have a white background. The effect just looks more professional. Thanks, however you did that.

     

    Yes, you should only need to update the URL with each email campaign you send out and make sure the page is on your server. I am not sure how Mailers did it before but it was possibly adding a different style to the link when it added it itself. Best to do it in the code before hand.

     

     

    The text above the list portion is coded as black, but varies between grey and black depending on client. Again, I like it. You indented the list, so it looks professional.

     

    This is a result of the styles being in the <head> of the document. All text styles should be coded inline for them to remain consistent.

    Eg:

    <span style="font-size: 12px;color: #666;font-family: Georgia, Times New Roman, Times, serif;">

    <p><strong>We have updated our line list effective April 1st.</strong></p>

    <p>Please take a look at our latest Additions</p>

    </span>

     

    -OR-

     

    <p style="font-size: 12px;color: #666;font-family: Georgia, Times New Roman, Times, serif;"><strong>We have updated our line list effective April 1st.</strong></p>

    <p style="font-size: 12px;color: #666;font-family: Georgia, Times New Roman, Times, serif;">Please take a look at our latest Additions</p>

     

    If you have an entire table cell of text, you can add the style to the <td> element which will style everything inside.

     

     

    Unfortunately, I mainly use Dreamweaver or text edit for my HTML coding so I can't offer any advice on any open source alternatives. Your Taco version seemed interesting though.

    Glad I was able to help you out.

     

    Rik

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points