Log in

View Full Version : Html newsletter and header styles


utopiacreative
01-23-2008, 03:11 AM
Hi,I have justed created a newsletter for our business and am having problems with the in page styles. When i apply styles to the individual elements, like the p, table tags etc the styles work fine and the newsletter appears fine in outlook express 06 but the styles aren't applying in outlook 07 (express? whatever exceeds 6 anyway), so I changed all of the styles to appear in the header and then from the p, table tags etc I am calling them thru a class, but know none of the styles are applying.It seems that if i put the styles in the header its not recognizing them?? A little help as to where i am going wrong would be great thanks. I have posted all of the pages code below. I have justed posted the head thru to the end body tag.
<code>
<head>
<style type="text/css">
<!--
/*.style2 {
font:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#333333;
padding: 5px 0px;
margin: 0px;
line-height: 18px;
background-color:#FFFFFF;
}*/

a:link {
color: #333333;
}
a:visited {
color: #000000;
}
a:hover {
color: #CCCCCC;
}

.style1 {

font: Verdana;
display: block;
padding: 0px;
margin: 0px;
color:#DD9F23;
font-size:17px;
letter-spacing: -1px;
border-bottom: dashed 1px #cccccc;
padding: 5px 0px 5px 0px;
}

.style3 {
font: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
line-height: 14px;
color:#666666;
padding: 5px 0px;
margin: 0px;
text-align:center;
}

.footer {
background: #A2B2A7;
padding: 10px;
font: Verdana;
font-size: 10px;
color:#333333;
}

.sideheaders {

font: Verdana;
padding: 0px;
margin: 0px;
color:#DD9F23;
font-size:15px;
letter-spacing: -1px;
border-bottom: solid 2px #A2B2A7;
text-align:center;
}

.bodystyle {
font: Verdana;
font-size: 12px;
color:#333333;
background:#BBCABF;
background-image:url(http://www.utopiacreative.com/newsletter/images/bkg_body.jpg) repeat-x;
margin: 0px;
padding: 0px;
}

p {

font:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#333333;

}

.style4 {

padding: 0px 20px 0px 20px;
background-color:ffffff;
font:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#333333;

}

.welcome {
font:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
padding: 0px 0px 0px 11px;
color:666666;
border-bottom: solid 3px #A2B2A7;
background-color:ffffff;
}

.tablestyle1 {
background-color:ffffff;
font:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#333333;

}

-->
</style>
</head>
<body class="bodystyle">
<table class="bodystyle" width="100%" border="0" cellspacing="0" cellpadding="0" >

<tr>
<td><table width="200" border="0" align="center" cellpadding="0" cellspacing="0" class="tablestyle1">
<tr>
<td><a href="http://www.utopiacreative.com" target="_blank"><img src="http://www.utopiacreative.com/newsletter/images/newsletterbannerjan.jpg" alt="Utopia Creative" width="600" height="150" border="0" /></a></td>
</tr>
<tr>
<td height="30" align="left" valign="middle" class="welcome"><p>%%Name%% - Utopia Creative welcomes you to 2008</p></td>
</tr>
</table>
<table width="600" align="center" cellpadding="0" cellspacing="0" class="tablestyle">

<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0" class="tablestyle">
<tr>
<td width="65%" valign="top" class="style4"><p><span class="style1">Welcome to our January issue - <br />
Whatever business you are in, we hope it is prosperous and successful in all ways. </span></p>
<div class="style2">
<p> Whether you&rsquo;ve got a clear idea of what you want, or even if you have no idea but just know you have to do <strong>something</strong>, we&rsquo;re here to help. </p>
<p> For some readers, the idea of marketing may seem like an annoying distraction &ndash; <em>&ldquo;I don&rsquo;t have the time or money for it at the moment&hellip;&rdquo;</em> </p>
<p><span class="style1" >What's the fuss about SEO? </span></p>
<p>One area you might like to put some attention to is <strong>Search Engine Optimisation</strong> (SEO) for your website. You may or may not have heard of it already but here&rsquo;s a few points that you might like to know:</p>
<ul>
<li>
<p>SEO can be a low cost, high reward marketing activity.</p>
</li>
<li>
<p>SEO is simply the craft of optimising your website to ensure maximum visibility in Search Engines (Google, Yahoo, etc). </p>
</li>
<li>
<p>The approach taken depends very much on the type of business you are in, your target market, and the level of competition in your field.</p>
</li>
<li>
<p>If website traffic is critical for your business, SEO should be a key tool in your marketing arsenal. Even if website traffic is not critical, SEO can still help make your customers find you more easily &ndash; that&rsquo;s always a good thing!</p>
</li>
<li>
<p>SEO is a changeable arena. While you might find yourself on page one today, that could easily change next week. We recommend a regular cycle of SEO analysis to keep you on top of things.</p>
</li>
</ul>
<p>We won&rsquo;t go into the technicalities of SEO here but have a great offer to kick start your year. This is normally $149 (incl GST) but until Feb 15th, we&rsquo;re offering SEO reports <strong>for only $99</strong> (incl GST). Just contact our office at <strong>02 6685 6678</strong> or email <a href="mailto:adrian@utopiacreative.com.au?subject=SEO%20offer">Adrian Nelson</a> to get your report underway. All it takes is a few minutes of your time to answer a few simple questions and then we&rsquo;ll have the report back to you within days.</p>
<p> Next month, we&rsquo;ll share some tips and ideas on <strong>television advertising</strong>. It&rsquo;s not as expensive as you might think and can make a huge improvement to your bottom line!</p>
<p>Until then, all the best from the team at Utopia Creative.</p>
<p><img src="http://www.utopiacreative.com/newsletter/images/utopia_signature.JPG" alt="Utopia Creative" width="190" height="57" longdesc="http://www.utopiacreative.com" /></p>
</div></td>
<td width="35%" valign="top" ><table width="209" height="1429" border="0" cellpadding="0" cellspacing="10" bgcolor="#e9eee9">
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td valign="top"><div align="center"><span class="sideheaders">Utopia's Creative Results... </span>

</div>
<p class="style3"><br />
<img src="http://www.utopiacreative.com/newsletter/images/emporio.jpg" alt="Emporio" width="150" height="97" /><br />
<br />
Complete branding solution <br />
for Emporio Byron Bay<br />
<br />
</p>
<p align="center"><img src="http://www.utopiacreative.com/newsletter/images/nc.jpg" alt="Natures Child" width="150" height="93" /> </p>
<p class="style3">Extensive new packaging<br />
for
Nature's Child range <br />
<br />
</p>
<p class="style3"><a href="http://www.emucreek.com" target="_blank"><img src="http://www.utopiacreative.com/newsletter/images/emucreek.jpg" alt="Emu Creek Website" width="150" height="100" border="0" /><br />
<br />
</a>Comprehensive CMS &amp; Flash website for
Emu Creek Extreme Retreat <br />
<br />
<br />
</p></td>
</tr>
<tr>
<td valign="top"><p align="center"><span class="sideheaders">Contact Us...</span></p>
<div align="center"><span class="style3">+61 2 6685 6678<br />
<a href="mailto:info@utopiacreative.com" target="_blank">info@utopiacreative.com</a></span></div></td>
</tr>

</table></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2"><p class="footer"> <a href="%%unsubscribelink%%">To unsubscribe, please click here.</a><br />
<br />
&copy; Utopia Creative <a href="http://www.utopiacreative.com" target="_blank">www.utopiacreative.com</a> <br />
a:
18 Acacia Street Byron Bay Industrial Estate NSW 2481 <br />
e: <a href="mailto:info@utopiacreative.com" target="_blank">info@utopiacreative.com</a> t: +61 2 6685 6678 </p></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>

</body>
</code>