CSS problem when integrating html into emails

anonanon

03-20-2005, 10:24 AM

CSS problem, I have created an email template to send out to clients, which uses built in css. It works fine when sending to outlook express users but when sent to hotmail it does not load the css. (And looks very flat)

I would be gratefull if somebody could help me fix this problem if it is something wrong with my code (which it must be as I've seen other emails sent to hotmail where the css works.)

Here is the code which I then paste into the source function when composing an email in Outlook Express

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>xxxxxxxxxxxxxxxxxxxx</title>

<style type="text/css">

a:link {color:#BDBDBE}
a:visited {color:#BDBDBE}
a:focus {color:#BDBDBE}
a:hover {color:#8FC6FC}
a:active {color:#BDBDBE}

body {background-color:#ebf5ff;}

hr {color:#FAD040;}

#title {
font: 16px "Verdana", "Arial", "Helvetica", "sans-serif";
color:#8FC6FC;
font-weight:bold;
}

div {
text-align:justify;
font: 10px "Verdana", "Arial", "Helvetica", "sans-serif";
color:#666666;
}

#email {
font: 9px "Verdana", "Arial", "Helvetica", "sans-serif";
color:#BDBDBE;
}
.savoir {
font: 18px "Arial Black", "Arial", "Helvetica", "sans-serif";
color:#999999;
text-align: center;
}
.follow {
font: 12px "Arial Black", "Arial", "Helvetica", "sans-serif";
color:#000000;
text-align: center;
}
</style>

</head>

<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>

<td NOWRAP>
<div id="email">
<p align="left">xxxxxxxxxxxxxx<br>
Website: <a href="xxxxxxxxxxxxxxxxxx" target="_blank">xxxxxxxxxxxxxxxxxxx
</a><br>
Email:     <a href="xxxxxxxxxxxxxxxxxx">xxxxxxxxxxxxxxx</a><br></p>
</div>
</td>

<td NOWRAP>
<div class="savoir">
xxxxxxxxxxx<br>
</div>
<div class="follow">
 xxxxxxxxxxxxxxxxx 
</div>
</td>

<td NOWRAP>
<div id="email">
<p align="right">Tel: xxxxxxxxxxxxxxxxxx<br>
Mobile: xxxxxxxxxxxxxxx<br>
Fax: xxxxxxxxxxxxxxx
</p></div>
</td>
</tr>

<tr>
<td colspan="3">
<hr noshade width="90%">
</td>
</tr>

<tr>
<td colspan="3">
<br>
<div id="title">
Title will go here if you have one
</div><p>
</p><div>
All your paragraphs of text will go here
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</div>

</td>
</tr>

</table>

</body>
</html>

chump2877

03-20-2005, 03:51 PM

In general, and in my experience, when creating HTML emails, you;re going to run into problems with your CSS because mail applications react differently to style sheets, much like browsers do...The only difference between mail apps and browsers is that there are a zillion different common mail applications (as opposed to only a few common browsers), that are all programmed differently, and subsequently all render CSS slightly differently....And in some applications, CSS is not recognized at all...

When I do HTML emails, I try to stick to really basic HTML transitional code with minimal CSS...this means formatting HTML emails with tables instead of CSS positioning, and using <font> tags to accomplish a large portion of your text formatting...it's not pretty, but I've found that by formatting my emails this way, they are more likely to work and appear similarly in a wider range of mail applications...

And you should also definitely, definitely, definitely have a text-only version of your email that will load if the HTML formatting fails to load or is incapable of loading in certain mail apps....this way, the reader will at least see something ledgible, as opposed to nothing at all....

I would recommend a robust PHP application like PHPMailer for your emailing...it works well for me....Check it out HERE (http://phpmailer.sourceforge.net/)

good luck and hope this helps a little! :thumbsup:

anonanon

03-20-2005, 05:08 PM

Yes thanks that is very helpfull. I will take that into account and am going to have to create a html versions.