Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2012
    Location
    Chester, Virginia
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Help with HTML Email Template!!

    I am coding my first email template and I am running into all sorts of formatting problems! I hand coded it from scratch using tables (I hate tables).

    Long story short:

    This is what the template is Supposed to look like: http://ghoops.org/email-template.png

    This is what I am getting...:
    http://ghoops.org/email.html

    Please view the source code and let me know what I am doing wrong with as much detail as possible. I AM COMPLETELY LOST!

    Thanks in advance!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,197
    Thanks
    23
    Thanked 605 Times in 604 Posts
    I haven't done an html email in a long time. Back in the day you always needed to change to code so that the email worked the same in all readers. Hope this has been fixed.

    FYI - You are using depreciated code and need to study css styling. Tags like center, font are no longer used.

    This is a stab at correcting your code to get something like the final image you posted. I use in-line styling. Not the best idea, but it does work and in a one time email i see no harm in using it.

    My workable html code:
    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" xml:lang="en" lang="en">
    <head>
    <title>Happy New Year From GHoops!</title>
    <style type="text/css">
    table { background: url("http://ghoops.org/background.png") no-repeat; }
    a{text-decoration: none;}
    a:link {color:#FFFFFF;}    /* unvisited link */
    a:visited {color:#FFFFFF;} /* visited link */
    a:hover {color:#f088c0;}   /* mouse over link */
    </style>
    </head>
    
    <body style="background-color: #444;">
    <table width="500" border="0" style="margin:auto">
    <tr>
    <td><img src="http://ghoops.org/email-header.png" alt="Happy 2013 From GHoops!" /></td>
    </tr>
    
    <tr>
    <td>
    <div style="text-align:center;font: 25px Arial;color:#f088c0">
    Happy New Year<br />
    From GHoops!
    </div>
    </td>
    </tr>
    
    <tr>
    <td>
    <img src="http://ghoops.org/bar.png" width="500" alt="Please enable images to see entire email" />
    </td>
    </tr>
    
    <tr>
    <td>
    <div style="width:45%;padding-left: 20px;float:left;">
    <span style="font: 25px Arial;color:#fff"><b>L</b></span>
    <span style="font: 16px Arial;color:#fff">
    orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
    enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
    nisl ut aliquip ex ea commodo consequate.
    </span>
    </div>
    
    <div style="width:35%;padding-top: 15px; padding-right: 15px; text-align:center; font: 17px Arial;color:#fff;float:right;" >
    Visit the website to view highlights of the
    <a href="http://ghoops.org/gallery.html" target="new">showcase</a>!
    </div>
    </td>
    </tr>
    
    <tr>
    <td style="text-align:center;padding-top: 15px;">
    <img src="http://ghoops.org/ghoops-bottom-logo.png" alt="Ghoops Basketball" />
    </td>
    </tr>
    
    <tr>
    <td>
    <a href="http://ghoops.org/" target="new"><b>GHoops.org</b></a>
    </td>
    </tr>
    </table>
    </body>
    </html>

  • #3
    New Coder
    Join Date
    Nov 2012
    Location
    India
    Posts
    53
    Thanks
    0
    Thanked 3 Times in 3 Posts
    The rules of email template coding is do not use bakground colour and external CSS.


  •  

    Posting Permissions

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