HTML in an email Template...

**UglyDogDesigns** · Oct 20, 2008 14:47

I am trying to write an email template in HTML for someone to be able to send a HTML newsletter to their clients. I wrote a simple format and the BG colors dont seem to show on all web email clients even though some of the characteristics are showing. Such as I can see all the table formats and text formats, bit the BG colors of certain cells and body BG color are not there. I have been able to view this correctly in Hotmail fine, and on one account in Yahoo it works, but another account of Yahoo does not work, and Gmail does not show the colors either. Both machines accessing on Yahoo are using the same browser and OS. Please any help is appreciated...Thanks.

Here is the code I am pasting in the email message:

Code:

<html>
<head>
<title>If you can not view the HTML</title>
<style type="text/css">
body {
	font: normal 8pt Verdana; 
	background-color: tan; 
	text-align: center; 
	padding: 0px; 
	margin: 0px;
}
a {
	color: white;
	text-decoration: none;
}
a:hover {
	color:red;
}
p {
	margin: 5px;
}
h3 {
	margin: 5px;
	border-bottom: 8px #ffcc00 solid;
}
th {
	background-color: #669900;
	color: white;
	padding: 0px;
}
address {
	padding: 5px;
	font: normal 8pt Verdana;
}
.coupon {
	border: 2px black dashed; 
	width: 600px; 
	background-color: white;
}
</style>
</head>
<body bgcolor="tan">
If you can not view the HTML, <a href="">Click Here</a> to view web version...
<table align="center" width="600px" style="background-color: white; border: 1px black solid; padding: 0px;">
	<tr>
		<th colspan="2" style="border-bottom: 8px black solid; padding: 5px;">Header</th>
	</tr>
	<tr>
		<td width="25&#37;" style="vertical-align: top;">
					<img src="http://www.uglydogdesigns.com/webprojects/itguys/emailtemplates/spring.jpg" style="border: 1px black solid;" alt="">
					<address>
						<b>The IT Guys Inc.</b><br>
						555 Street Name<br>
						City, ST 90009<br>
						Phone Number: 111-111-1111<br>
						Email: name@domain.com<br>
					</address>
		</td>
		<td width="75%">
    	<div style="vertical-align: top;font: normal 8pt Verdana; ">
			<h3>Header 1</h3>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ligula turpis, dictum at, pellentesque ut, vehicula ut, enim. Suspendisse eleifend felis a tortor. Praesent euismod ante et elit. Cras pretium augue auctor ipsum. Ut velit. In hac habitasse platea dictumst. Curabitur sem arcu, bibendum a, bibendum id, hendrerit a, quam. Proin leo. Nam mattis. Proin aliquet. Sed nibh ante, semper sed, sodales vitae, ornare a, nisl. Sed dapibus. Nam elementum malesuada nisl. Praesent ipsum nisl, gravida eu, pretium et, suscipit pellentesque, enim. Morbi hendrerit leo.</p>
			<h3>Header 2</h3>
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris volutpat massa vel massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus pulvinar congue lorem. Ut id odio eget velit bibendum iaculis. Donec luctus, orci vitae tempus rhoncus, massa ante sollicitudin tellus, scelerisque faucibus neque nisi et ante. Fusce viverra viverra mi. Cras pulvinar lobortis lorem. Phasellus facilisis consequat velit. Ut pulvinar ligula sed quam blandit tempor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras accumsan convallis elit. Nulla facilisi. Maecenas feugiat tristique arcu. Suspendisse libero odio, tempor scelerisque, viverra et, interdum non, mauris. Fusce imperdiet. Nam nulla.</p>
			<h3>Header 3</h3>
			<p>Etiam pretium, tortor at malesuada scelerisque, turpis eros rutrum sapien, nec rhoncus urna magna ac nunc. Nullam mollis. Nam in lorem et sem blandit dapibus. Nam mauris. Nullam enim mi, porttitor quis, tincidunt sit amet, semper vel, justo. Nullam vitae metus nec ante tempor dictum. Maecenas nulla mi, iaculis in, feugiat sit amet, gravida ac, ligula. Donec nisl nulla, cursus et, egestas quis, mattis vel, magna. Donec sodales nisl. Phasellus quis massa. Sed vitae felis nec ipsum malesuada vestibulum. Curabitur facilisis augue a sem. Nam quis metus. Suspendisse eleifend, est ac volutpat rhoncus, sem felis varius lectus, et tristique dolor turpis eget diam. Etiam pharetra est quis velit. Aenean auctor, lorem et tristique ultrices, metus odio feugiat justo, non ullamcorper tellus quam eget nunc. Vestibulum eu risus.</p>
			<h3>Header 4</h3>
			<p>Curabitur at odio. Ut consectetuer enim ac leo feugiat venenatis. In suscipit tempor risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sagittis. Duis vitae eros. Cras rhoncus iaculis orci. Curabitur ultrices diam sed sapien. In mi pede, vestibulum non, suscipit ac, scelerisque vel, massa. In et mi. Donec venenatis tortor a erat. Vestibulum lacinia enim vel massa. Donec enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
		</div>
		</td>
	</tr>
	<tr>
		<th colspan="2" style="padding: 5px;">Footer</th>
	</tr>
</table>
<br>
<table align="center" class="coupon">
	<tr>
		<td>Coupon</td>
	</tr>
</table>
</body>
</html>

Here is the the incorrect version: Wrong Version
Here is the the correct version: Correct Version (This version does show a BG color for the page of Tan, just doesnt show in my screenshots)

**Phidev** · Oct 20, 2008 14:55

Are you sending this email as plain text or as html?

Also why are you using bgcolor instead of CSS?

**UglyDogDesigns** · Oct 20, 2008 15:02

I am sending using HTML and that is how I am viewing it as well. I am using both CSS and bgcolor because when I just had the CSS it did not work so I threw in there the bgcolor to see if that would work, but neither work...

**c.t.c.** · Oct 20, 2008 16:15

So many email clients... Poor standards support... HTML email is not easy.

Check out Email Standards Project, MailChimp, and Campaign Monitor. I believe the last two offer free HTML email templates that work in all the major clients. Either use them as is, or learn from them.