Sending HTML email with Outlook
Here's the problem: one of my co-workers needs to send some HTML emails using outlook. I have them all coded up nicely with proper CSS and HTML. I can get them into Outlook but it horribly garbles everything. We're talking typical MS code - converting CSS to font tags, dropping some of my CSS even though there is CSS in the header of page (which defines text in Times New Roman that is then changed to Verdana with font tags!), converts font sizes to pts etc.
Is there any way to get outlook to write HTMl properly. Wait... Microsoft and proper HTML? Can't be possible
Any ideas?? I've tried to create it using the styles and formatting panel within Outlook but that does basically the same thing.
foottuns posted this at 16:56 — 7th June 2006.
They have: 78 posts
Joined: May 2006
send me the code and i might help you. i need to see exacly what is the problem.
Megan posted this at 18:19 — 7th June 2006.
She has: 11,421 posts
Joined: Jun 1999
Basically, Outlook is changing this:
<html xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252" />
<title>Welcome</title>
<style type="text/css">
<!--
#content hr {color:#ccc; background-color: #ccc; height: 1px; border: 0; width: 90%; margin: 10px auto;}
#content a {color: #BD4A18;}
-->
</style>
</head>
<body>
<div id="content" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 85%;">
<p><strong>Dear Amy,</strong></p>
<p><strong>Congratulations</strong> on your acceptance to graduate studies at the University of Waterloo (UW). UW is a great place to live and learn and we look forward to having you join our community. </p>
<div style="background-color: #BD4A18; color: #fff; font-size: 110%; padding: 5px; font-weight: bold;">Come live with us!</div>
<p>The Department of Housing and Residences offers on-campus accommodation to over 5000 students annually and also provides assistance to those looking to live off campus in the local community. Columbia Lake Village – a townhouse community of over 600, is home to our graduate students and students with dependents. </p>
<h2 style="background-color: #BD4A18; color: #fff; font-size: 110%; padding: 5px;">Call Columbia Lake Village home!</h2>
<p>Columbia Lake Village is made up of two communities – the South Community (for single students) and the North Community (for students with dependents). </p>
<h3 style="color: #BD4A18; font-size: 110%;">North Community highlights: </h3>
<ul>
<li>2-bedroom unfurnished townhouses (includes refrigerator, stove, washer and dryer)</li>
<li>utilities included (water, electricity, heat, cable tv hook-up)</li>
<li>weekly grocery shuttle </li>
<li>family friendly environment</li>
<li>regular community activities and events</li>
<li>applications online </li>
</ul>
<p>Take a virtual tour, learn more and apply online by visiting <a href="http://www.housing.uwaterloo.ca/">www.housing.uwaterloo.ca</a> and choosing residence communities from the left menu. </p>
<h2 style="background-color: #BD4A18; color: #fff; font-size: 110%; padding: 5px;">Looking off campus?</h2>
<p>If you’re interested in living off campus, visit <a href="http://www.och.uwaterloo.ca/">www.och.uwaterloo.ca</a> to view our online listings and resources. </p>
<hr />
<p>Once again, congratulations on your acceptance to UW! We hope to see you living with us next year!</p>
<p style="font-size: 90%;">Roni Oestreich<br />
Graduate Residence Admissions and Marketing Specialist <br />
Housing and Residences
<a href="mailto:[email protected]">[email protected]</a><br />
<a href="http://www.housing.uwaterloo.ca/">www.housing.uwaterloo.ca</a><br />
(519) 888-4567, ext. 2679</p>
</div>
</body>
</html>
into this
<html>
<head>
<meta name=Generator content="Microsoft Word 10 (filtered)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:Wingdings;
panose-1:5 0 0 0 0 0 0 0 0 0;}
@font-face
{font-family:Verdana;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";}
h2
{margin-right:0in;
margin-left:0in;
font-size:18.0pt;
font-family:"Times New Roman";
font-weight:bold;}
h3
{margin-right:0in;
margin-left:0in;
font-size:13.5pt;
font-family:"Times New Roman";
font-weight:bold;}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{color:purple;
text-decoration:underline;}
p
{margin-right:0in;
margin-left:0in;
font-size:12.0pt;
font-family:"Times New Roman";}
span.EmailStyle17
{font-family:Arial;
color:windowtext;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.25in 1.0in 1.25in;}
div.Section1
{page:Section1;}
/* List Definitions */
ol
{margin-bottom:0in;}
ul
{margin-bottom:0in;}
-->
</style>
</head>
<body lang=EN-CA link=blue vlink=purple>
<div class=Section1>
<div id=content>
<p><strong><b><font size=2 face=Verdana><span style='font-size:10.0pt;
font-family:Verdana'>Dear Amy,</span></font></b></strong></p>
<p><strong><b><font size=2 face=Verdana><span style='font-size:10.0pt;
font-family:Verdana'>Congratulations</span></font></b></strong><font size=2
face=Verdana><span style='font-size:10.0pt;font-family:Verdana'> on your
acceptance to graduate studies at the University of Waterloo (UW). UW is a
great place to live and learn and we look forward to having you join our
community. </span></font></p>
<h2 style='background:#BD4A18'><b><font size=2 color=white face=Verdana><span
style='font-size:11.0pt;font-family:Verdana;color:white'>Come live with us!</span></font></b></h2>
<p><font size=2 face=Verdana><span style='font-size:10.0pt;font-family:Verdana'>The
Department of Housing and Residences offers on-campus accommodation to over
5000 students annually and also provides assistance to those looking to live
off campus in the local community. </span></font><font size=2 face=Verdana><span
style='font-size:10.0pt;font-family:Verdana'>Columbia</span></font><font
size=2 face=Verdana><span style='font-size:10.0pt;font-family:Verdana'> </span></font><font
size=2 face=Verdana><span style='font-size:10.0pt;font-family:Verdana'>Lake</span></font><font
size=2 face=Verdana><span style='font-size:10.0pt;font-family:Verdana'> </span></font><font
size=2 face=Verdana><span style='font-size:10.0pt;font-family:Verdana'>Village</span></font><font
size=2 face=Verdana><span style='font-size:10.0pt;font-family:Verdana'> –
a townhouse community of over 600, is home to our graduate students and
students with dependents. </span></font></p>
<h2 style='background:#BD4A18'><b><font size=2 color=white face=Verdana><span
style='font-size:11.0pt;font-family:Verdana;color:white'>Call</span></font></b><font
size=2 color=white face=Verdana><span style='font-size:11.0pt;font-family:
Verdana;color:white'> </span></font><font size=2 color=white face=Verdana><span
style='font-size:11.0pt;font-family:Verdana;color:white'>Columbia</span></font><font
size=2 color=white face=Verdana><span style='font-size:11.0pt;font-family:
Verdana;color:white'> </span></font><font size=2 color=white face=Verdana><span
style='font-size:11.0pt;font-family:Verdana;color:white'>Lake</span></font><font
size=2 color=white face=Verdana><span style='font-size:11.0pt;font-family:
Verdana;color:white'> </span></font><font size=2 color=white face=Verdana><span
style='font-size:11.0pt;font-family:Verdana;color:white'>Village</span></font><font
size=2 color=white face=Verdana><span style='font-size:11.0pt;font-family:Verdana;
color:white'> home!</span></font></h2>
<p><font size=2 face=Verdana><span style='font-size:10.0pt;font-family:Verdana'>Columbia</span></font><font
size=2 face=Verdana><span style='font-size:10.0pt;font-family:Verdana'> </span></font><font
size=2 face=Verdana><span style='font-size:10.0pt;font-family:Verdana'>Lake</span></font><font
size=2 face=Verdana><span style='font-size:10.0pt;font-family:Verdana'> </span></font><font
size=2 face=Verdana><span style='font-size:10.0pt;font-family:Verdana'>Village</span></font><font
size=2 face=Verdana><span style='font-size:10.0pt;font-family:Verdana'> is made
up of two communities – the South Community (for single students) and the
North Community (for students with dependents). </span></font></p>
<h3><b><font size=2 color="#bd4a18" face=Verdana><span style='font-size:11.0pt;
font-family:Verdana;color:#BD4A18'>North Community highlights: </span></font></b></h3>
<ul type=disc>
<li class=MsoNormal><font size=2 face=Verdana><span style='font-size:10.0pt;
font-family:Verdana'>2-bedroom unfurnished townhouses (includes
refrigerator, stove, washer and dryer)</span></font></li>
<li class=MsoNormal><font size=2 face=Verdana><span style='font-size:10.0pt;
font-family:Verdana'>utilities included (water, electricity, heat, cable tv
hook-up)</span></font></li>
<li class=MsoNormal><font size=2 face=Verdana><span style='font-size:10.0pt;
font-family:Verdana'>weekly grocery shuttle </span></font></li>
<li class=MsoNormal><font size=2 face=Verdana><span style='font-size:10.0pt;
font-family:Verdana'>family friendly environment</span></font></li>
<li class=MsoNormal><font size=2 face=Verdana><span style='font-size:10.0pt;
font-family:Verdana'>regular community activities and events</span></font></li>
<li class=MsoNormal><font size=2 face=Verdana><span style='font-size:10.0pt;
font-family:Verdana'>applications online </span></font></li>
</ul>
<p><font size=2 face=Verdana><span style='font-size:10.0pt;font-family:Verdana'>Take
a virtual tour, learn more and apply online by visiting <a
href="http://www.housing.uwaterloo.ca/"><font color="#bd4a18"><span
style='color:#BD4A18'>www.housing.uwaterloo.ca</span></font></a> and choosing
residence communities from the left menu. </span></font></p>
<h2 style='background:#BD4A18'><b><font size=2 color=white face=Verdana><span
style='font-size:11.0pt;font-family:Verdana;color:white'>Looking off campus?</span></font></b></h2>
<p><font size=2 face=Verdana><span style='font-size:10.0pt;font-family:Verdana'>If
you’re interested in living off campus, visit <a
href="http://www.och.uwaterloo.ca/"><font color="#bd4a18"><span
style='color:#BD4A18'>www.och.uwaterloo.ca</span></font></a> to view our online
listings and resources. </span></font></p>
<div class=MsoNormal align=center style='margin-right:0in;margin-bottom:7.5pt;
margin-left:0in;text-align:center'><font size=2 face=Verdana><span
style='font-size:10.0pt;font-family:Verdana'>
<hr size=1 width="90%" noshade color="#cccccc" align=center>
</span></font></div>
<p><font size=2 face=Verdana><span style='font-size:10.0pt;font-family:Verdana'>Once
again, congratulations on your acceptance to UW! We hope to see you
living with us next year!</span></font></p>
<p><font size=1 face=Verdana><span style='font-size:9.0pt;font-family:Verdana'>Roni
Oestreich<br>
Graduate Residence Admissions and Marketing Specialist <br>
Housing and Residences <a href="mailto:[email protected]"><font
color="#bd4a18"><span style='color:#BD4A18'>[email protected]</span></font></a><br>
<a href="http://www.housing.uwaterloo.ca/"><font color="#bd4a18"><span
style='color:#BD4A18'>www.housing.uwaterloo.ca</span></font></a><br>
(519) 888-4567, ext. 2679</span></font></p>
</div>
<p class=MsoNormal><font size=2 face=Arial><span style='font-size:10.0pt;
font-family:Arial'> </span></font></p>
</div>
</body>
</html>
I really want it to keep my code the way it was! The main aesthetic difference is that it drops the padding around the headers that I had originally. I really want at least somewhat proper coding too but it doesn't seem that outlook can do that.
Megan
Connect with us on Facebook!
foottuns posted this at 08:42 — 8th June 2006.
They have: 78 posts
Joined: May 2006
well i try it with outlook express, i dont have outlook at the moment on my laptop and the code is exacly the same, is not changing nothing to the code. try to look on outlook option and than, html settings, look for that.
Megan posted this at 14:42 — 13th June 2006.
She has: 11,421 posts
Joined: Jun 1999
I fixed it! There is a checkbox in the HTML format dialog box asking if you want to use Word to edit e-mail messages (rediculous, why would you want to use word to edit email ?!??!). This has corrected the problem. It did convert all my HTML to upper case and separated out all my padding in a weird way
but I *guess* I can live with that.
Eeeewww! EEeeewww! No, it still put in a font tag at the start of the document ?!??!? Blasted Microsoft
Megan
Connect with us on Facebook!
Neutron2k posted this at 10:19 — 14th June 2006.
He has: 113 posts
Joined: Jul 2005
at the end of the day, does the email still look like it should do when it is rendered? If so I REALLY wouldn't worry about it, seeing as a number of people don't actually allow HTML emails anyway because of the old lazy html coding practice and the fact it opens possibilities to viral attacks, (esp in outlook).
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.