...

View Full Version : HTML Email Newsletter



mumford
05-31-2005, 01:54 PM
Hi

I am not sure if I am doing this right I have designed a HTML newsletter with in-line styles, for some reason when i view the html newsletter from my hotmail account none of the css is showing.

Does anyone know why this is, and could someone give me help on how to properley code for email newsletters, and where I might be going wrong.!?

Below is the code for my newsletter


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Teleticket Newsletter
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
*{
padding:0;
margin:0;
}
body{
margin:10px 0px 0px 0px;
padding:0;
font:11px Verdana,Arial,Geneva,Helvetica,sans-serif;
background:#455D7B;
text-align:center;
}
img{
border:0;
}
/* STRUCTURE
----------------------------------------------------------------- */
#wrapper{
width:600px;
margin-left:auto;
margin-right:auto;
background:#fff;
text-align:left;
}
#inner{
padding:2px;
}
#header{
margin-left:auto;
margin-right:auto;
background:#19005F;
border-bottom:5px solid #fff;
}
#footer{
margin-left:auto;
margin-right:auto;
background:#19005F;
border-top:1px solid #fff;
}
/* TABLES
----------------------------------------------------------------- */

table#icons{
padding:0;
border:0;
}
table#footer{
background:#19005F;
color:#fff;
padding:0;
border:0;
text-align:left;
}
table#footer td.text{
font-size:10px;
width:395px;
border-top:1px solid #fff;
padding:8px;
}
table#footer td.unsubscribe{
border-top:1px solid #fff;
padding:8px;
text-align:right;
}
table#icons td{
padding-bottom:10px;
font-size:11px;
}
td#date{
font-size:14px;
font-weight:bold;
background:#EDB301;
color:#fff;
border:0;
text-align:center;
}
td#home{
padding:0 30px 0 0;
text-align:right;
background:url(images/toppic1.jpg) #19005F no-repeat;
background-position:0 100%;
}
table.headlineboxtop{
font-size:12px;
font-weight:bold;
background:#154270;
color:#fff;
}
table.headlineboxtop h1{
font-size:12px;
font-weight:bold;
color:#fff;
padding:5px;
}
td.headlineboxpic{
border-top:1px solid #fff;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
}
td.headlineboxpicend{
border-top:1px solid #fff;
border-bottom:1px solid #fff;
}
td.headlineboxtext{
font-size:11px;
color:#fff;
font-weight:normal;
background:#4E8CB5;
border-right:1px solid #fff;
border-bottom:8px solid #75B5D8;
padding:8px;
}
td.headlineboxtextend{
font-size:11px;
font-weight:normal;
color:#fff;
background:#4E8CB5;
border-bottom:8px solid #75B5D8;
padding:8px;
}
td#leftcontent{
font-size:11px;
font-weight:normal;
color:#19005F;
background:#E6E6E6;
border-top:1px solid #fff;
padding:8px;
width:183px;
}

/* TEXT
----------------------------------------------------------------- */
h1,h2{
font-size:12px;
font-weight:bold;
}
h1{
color:#EDB301;
padding:0 0 0px 8px;
}
p{
font-size:11px;
padding:0 5px 0px 8px;
line-height:19px;
}
/* LINKS
----------------------------------------------------------------- */
a{
font-size:11px;
color:#19005F;
}
a:hover{
color:#EDB301;
}

/* MISC
----------------------------------------------------------------- */
.greyline{
border-bottom:1px solid #E6E6E6;
margin-bottom:10px;
margin-left:8px;
}
br.smallbr{
line-height:10px;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="inner">
<table cellspacing="0" cellpadding="0" id="header">
<tr>
<td width="198">images/logo.gif
<td id="home">images/title-home.gif
</tr>
<tr>
<td id="date">Newsletter
June 2005
<td colspan="2">images/toppic2.jpg
</tr>
</table>
<table cellspacing="0" cellpadding="0" class="headlineboxtop">
<tr>
<td>Headline 1


<td>Headline 1


<td>Headline 1


</tr>
<tr>
<td class="headlineboxpic">images/pic1.jpg
<td class="headlineboxpic">images/pic2.jpg
<td class="headlineboxpicend">images/pic3.jpg
</tr>
<tr>
<td class="headlineboxtext">Text
<td class="headlineboxtext">Text
<td class="headlineboxtextend">Text
</tr>
</table>
<table cellspacing="0" cellpadding="0">
<tr>
<td rowspan="4" id="leftcontent" valign="top">
<table cellspacing="0" cellpadding="0" id="icons">
<tr>Contact Us


<tr>
<td width="27">images/icon-t.gif
<td>0871 6666 747
</tr>
<tr>
<td>%22images/icon-e.gif%22
<td>sales@teletickettravel.com
</tr>
<tr>
<td>%22images/icon-w.gif%22
<td>www.teletickettravel.com
</tr>
</table>
</td>
<td>
<br class="smallbr" />
<h1>Headline
<p>Text


<div class="greyline">
</td>
</tr>
<tr>
<td>
<h1>Headline
<p>Text


<div class="greyline">
</td>
</tr>
<tr>
<td>
<h1>Headline
<p>Text


</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" id="footer">
<tr>
<td class="text">Teleticket will never pass your email address to any other company. All prices are subject to availability, and Teleticket terms and conditions
<td class="unsubscribe">images/button-unsubscribe.gif
</tr>
</table>
</div>
</div>
</body>
</html>

NeilKelty
06-29-2005, 04:34 PM
Well start by fixing errors in the code... its <img> not [img]

channy
06-29-2005, 06:16 PM
Also closing your tags would help.

:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum