What's wrong with this HTML, please

Hello - you may recall helping me a couple days ago on this problem.

I've still having problems; I'm posting them as two separate questions.

One problem is that Outlook is ignoring the different formatting I've specified in the "#sig" declarations.

My client insists that my results exactly match the sample they gave me, down to the font size, so I re-worked the suggested "Div"- oriented solution  as a Table.  

To recap: I'm sending these e-mail's from Microsoft Access via a 3rd party add-on called "Total Access E-Mailer"

It's built-in HTML editor has a Preview function; the HTML below renders it like I need (see 1st attached image)
(the elements in square brackets below are substitutional fields coming in from the e-mail data source)

But in the resulting e-mail's, viewed in Microsoft Outlook, it looks like the styles for the HTML table are being ignored (see 2nd attached image).

I'm an Access guy, and not really up on HTML, but I thought specific declarations "down below" took precedence over general declarations "up above".

Would you please tell me, from the Outlook HTML perspective, what's wrong in the HTML below?
(the actual html does not have the comments; they seemed to break the <style> section all together?)

Thanks (again)


<html>
<head>
<title></title>
<style type="text/css">
H1, H2, H3, H4 {font-family: "Arial"}
H1 {font-size: 16pt; font-weight: bold; text-decoration: underline;}
H2 {font-size: 12pt; font-weight: bold;}
H3 {font-size: 10pt; font-weight: normal; text-align: justify}
H4 {font-size: 8pt; font-weight: normal; font-style: italic;}
H5 {font-family: "Lucida Handwriting"}
H5 {font-size: 10pt; font-weight: bold;}
<!-- Start of new styles for new sign-off -->
#sig{width:40em;border:1px solid #ededed;font-size:.75em;font-family:Calibri;}
#sig ConsName{font-size:13pt;}
#sig ConsULine{font-size:13pt;color:#aaaaaa;}
#sig ConsTitle{font-size:10pt;font-style:italic;color:#aaaaaa;}
#sig LdsLine{font-size:10pt;}
#sig PhnLine{font-size:10pt;}
#sig UrlLine{font-size:10pt;color:#aaaaaa;}
<!-- End of new styles for new sign-off -->
</style>
</head>
<body>
<h3>
Dear [RecipName_SalLastName],
<p>
We appreciate your business and your attention to this notice.  An extension for your plan’s return has been filed extending the return deadline 2½ months.
<p>
Although the extension has been filed, we are not able to move forward with your plan’s return without receiving the information indicated on the attached PDF[PluralS].  Please provide this information as soon as possible.
<p>
It is important that you contact me, at [ConsultantDLine] or via email at <a href="mailto:[ConsultantEMail]">[ConsultantEMail]</a> if you cannot provide the pending information.  We understand your time is valuable and appreciate your attention to this request.
<p>
Cordially,
</H3>
<!-- Start of new table for new sign-off -->
<table id="sig" border="0" cellpadding="1" cellspacing="1">
      <tr><td rowspan=5 align="center"><a href="http://www.ldsco.com/"><img src="T:\RPA\Logos\NewLDSCOsm.png" alt="nf"></td></tr>
      <tr><td><ConsName>[ConsultantName] <ConsULine>|</ConsULine> </ConsName><ConsTitle>[ConsultantTitle]</ConsTitle></td></tr>
      <tr><td><LdsLine>Loren D. Stark Company</LdsLine></td></tr>
      <tr><td><PhnLine>D [ConsultantDLine] | T 281.498.5777 | F 281.879.1204</PhnLine></td></tr>
      <tr><td><UrlLine><a href="http://www.ldsco.com" STYLE="text-decoration: none">LDSCO.com</a></UrlLine></td></tr>
</table>
<!-- End of new table for new sign-off -->
<H3>
[CcNames]
<p>
[EntityNamesDisp]
</h3>
</body>
</html>

1) Browser preview2) Outlook results
mlagrangeAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ste5anSenior DeveloperCommented:
Keep in mind, that only a small subset of HTML and CSS is supported by Outlook and all the other mailers.
0
Tom BeckCommented:
Use inline styles for email formatting. Something like this:
<html>
<head>
<title></title>
</head>
<body>
<h3 style="font-family: Arial;font-size: 10pt;font-weight: normal;text-align: justify;">
Dear [RecipName_SalLastName],
<p>
We appreciate your business and your attention to this notice.  An extension for your plan’s return has been filed extending the return deadline 2½ months.
</p><p>
Although the extension has been filed, we are not able to move forward with your plan’s return without receiving the information indicated on the attached PDF[PluralS].  Please provide this information as soon as possible.
</p><p>
It is important that you contact me, at [ConsultantDLine] or via email at <a href="mailto:[ConsultantEMail]">[ConsultantEMail]</a> if you cannot provide the pending information.  We understand your time is valuable and appreciate your attention to this request.
</p><p>
Cordially,
</p></h3>
<!-- Start of new table for new sign-off --> 
<table id="sig" border="0" cellpadding="1" cellspacing="1">
      <tr><td rowspan="5" align="center"><a href="http://www.ldsco.com/"><img src="T:\RPA\Logos\NewLDSCOsm.png" alt="nf"></a></td></tr>
      <tr><td><span style="font-size: 13pt;">[ConsultantName] </span>|<span style="font-size: 10pt;font-style: italic;color: #aaaaaa;">[ConsultantTitle]</span></td></tr>
      <tr><td><span style="font-size: 10pt;">Loren D. Stark Company</span></td></tr>
      <tr><td><span style="font-size: 10pt;">D [ConsultantDLine] | T 281.498.5777 | F 281.879.1204</span></td></tr>
      <tr><td><span style="font-size: 10pt;color: #aaaaaa;"><a href="http://www.ldsco.com" style="text-decoration: none">LDSCO.com</a></span></td></tr>
</table>
<!-- End of new table for new sign-off --> 
<h3 style="font-family: Arial;font-size: 10pt;font-weight: normal;text-align: justify;">
[CcNames]
<p>
[EntityNamesDisp]
</p></h3>
</body>
</html>

Open in new window

0
hieloCommented:
Instead of made up tags, use them as classes on a span:
<html>
<head>
<title></title>
<style type="text/css">
H1, H2, H3, H4 {font-family: "Arial"}
H1 {font-size: 16pt; font-weight: bold; text-decoration: underline;}
H2 {font-size: 12pt; font-weight: bold;}
H3 {font-size: 10pt; font-weight: normal; text-align: justify}
H4 {font-size: 8pt; font-weight: normal; font-style: italic;}
H5 {font-family: "Lucida Handwriting"}
H5 {font-size: 10pt; font-weight: bold;}
<!-- Start of new styles for new sign-off --> 
#sig{width:40em;border:1px solid #ededed;font-size:.75em;font-family:Calibri;}
#sig .ConsName{font-size:13pt;}
#sig .ConsULine{font-size:13pt;color:#aaaaaa;}
#sig .ConsTitle{font-size:10pt;font-style:italic;color:#aaaaaa;}
#sig .LdsLine{font-size:10pt;}
#sig .PhnLine{font-size:10pt;}
#sig .UrlLine a{font-size:10pt;color:#aaaaaa;}
<!-- End of new styles for new sign-off --> 
</style>
</head>
<body>
<h3>
Dear [RecipName_SalLastName],
<p>
We appreciate your business and your attention to this notice.  An extension for your plan’s return has been filed extending the return deadline 2½ months.
<p>
Although the extension has been filed, we are not able to move forward with your plan’s return without receiving the information indicated on the attached PDF[PluralS].  Please provide this information as soon as possible.
<p>
It is important that you contact me, at [ConsultantDLine] or via email at <a href="mailto:[ConsultantEMail]">[ConsultantEMail]</a> if you cannot provide the pending information.  We understand your time is valuable and appreciate your attention to this request.
<p>
Cordially,
</H3>
<!-- Start of new table for new sign-off --> 
<table id="sig" border="0" cellpadding="1" cellspacing="1">
      <tr><td rowspan="5" align="center"><a href="http://www.ldsco.com/"><img src="T:\RPA\Logos\NewLDSCOsm.png" alt="nf"></td></tr>
      <tr><td><span class="ConsName">[ConsultantName] <span class="ConsULine">|</span> </span><span class="ConsTitle">[ConsultantTitle]</span></td></tr>
      <tr><td><span class="LdsLine">Loren D. Stark Company</span></td></tr>
      <tr><td><span class="PhnLine">D [ConsultantDLine] | T 281.498.5777 | F 281.879.1204</span></td></tr>
      <tr><td><span class="UrlLine"><a href="http://www.ldsco.com" STYLE="text-decoration: none;">LDSCO.com</a></span></td></tr>
</table>
<!-- End of new table for new sign-off --> 
<H3>
[CcNames]
<p>
[EntityNamesDisp]
</h3>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Tom BeckCommented:
Have a look at this (and other similar guides). Particularly, suggestion #5, "Use inline styles". Classes will be stripped out by email clients.

http://code.tutsplus.com/tutorials/20-email-design-best-practices-and-resources-for-beginners--net-7309
0
mlagrangeAuthor Commented:
Hielo - thanks again - that works great in Outlook (and Yahoo); it gets wacked out in GMail and MyWay.
Tom - thank you. I've got to get this e-mail blast out like 2 days ago, but then I've got to try your suggestion.

Thank You both - I wish I could award more points!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.