Menu
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
[CODE]<!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″>[img]images/logo.gif[/img]
<td id=”home”>[img]images/title-home.gif[/img]
</tr>
<tr>
<td id=”date”>Newsletter
June 2005
<td colspan=”2″>[img]images/toppic2.jpg[/img]
</tr>
</table>
<table cellspacing=”0″ cellpadding=”0″ class=”headlineboxtop”>
<tr>
<td>Headline 1
<td>Headline 1
<td>Headline 1
</tr>
<tr>
<td class=”headlineboxpic”>[img]images/pic1.jpg[/img]
<td class=”headlineboxpic”>[img]images/pic2.jpg[/img]
<td class=”headlineboxpicend”>[img]images/pic3.jpg[/img]
</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″>[img]images/icon-t.gif[/img]
<td>0871 6666 747
</tr>
<tr>
<td>[img]%22images/icon-e.gif%22[/img]
<td>[email protected]
</tr>
<tr>
<td>[img]%22images/icon-w.gif%22[/img]
<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”>[img]images/button-unsubscribe.gif[/img]
</tr>
</table>
</div>
</div>
</body>
</html>