Help with HTML Email Template!!

desmintaylor · 01-04-2013, 03:18 AM

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!

sunfighter · 01-04-2013, 07:42 PM

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>

webdevs · 01-05-2013, 12:45 PM

The rules of email template coding is do not use bakground colour and external CSS.