Link to home
Start Free TrialLog in
Avatar of CipherIS
CipherISFlag for United States of America

asked on

HTML - Color not displaying correctly in EMAIL.

I am generating the below HTML dynamically.  It is being sent via email.  I tested it here

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default

Everything works as expected.  However, when emailing via SMTP "USA" is orange and NOT black.  Any ideas?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w=3.org/TR/REC-html40/loose.dtd">
<head>
<style type="text/css">.odd td { background-color:#aecbe8; border: thin solid #000; text-align: center; padding-left:5px; padding-right:5px} .even td { background-color:#ffffff; border: thin solid #000; text-align: center; padding-left:5px; padding-right:5px} .title th { color:#FFF; background-color:#f16b23; border: thin solid #000; padding-left:5px; padding-right:5px;width:300px} .titleRMA {color:#FFF;font-size:13px;background-color:#1F497D; border: thin solid #000; padding-left:5px; padding-right:5px} .info td { width:150px}
</style>
</head>

<html>
<body style="padding: 0;margin: 0;">
<table id="pdt-main" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td style="background:#e7ebf4; padding:30px 15px 0;">
<table cellspacing="0" align="center" cellpadding="0" width="710" style="font-family: Helvetica, Arial, sans-serif;font-size: 13px;color: #333;width: 800px;line-height:19px;">
<tbody>
<tr>
<td style="background:#e7ebf4; ">
<a href="www.acme.com">
<img alt="ACME" height="54" src="" style="border: 0; display:block; width:800px;"> </a>
</td>
</tr>
<tr>
<td style="background-color: white;font-size: 15px;padding: 25px 34px 15px;color: #333;">
<p style="font-family: Times, serif;">Dear Sir/Madam,<br/><br/>
We would like to thank you for your order. We acknowledge that we have received order # 0001 and the order has been processed in our system.
<br/><br/>List of items:<br/><table style="border-collapse: collapse;"><tr class="title"><th>Item #</th><th>Qty.</th><th>Part Number</th><th>Requested Date</th><th>Promised Ship Date</th></tr> 
<tr class="even"><td>#1</td><td>1</td><td>7802</td><td>ASAP</td><td>01/13/2017</td></tr></table><br/><br/>Sincerely,<br/><div style="font-family: Times, serif;">ACME<br/><br/><div id="tel">T: +1 800 5555 5555</div><a href=mailto:sales@acme.com>sales@acme.com</a> <br/>acme.com <br/><br/> 
<font color=#f16b23>1234 Main Street<br/>Anytown, TX 12345</font> <font color=black>USA</font></div></p><div style="font-size:10px;color:#666;width:100%;margin:auto;border-top:1px solid #ccc;margin-top:35px;padding:2px"><div style="text-align: center;margin-top:5px">Do not reply to this automatic message</div><div style="text-align: center;margin-top:-3px">Copyright 2017 Acme. All Rights Reserved.</div></div></td><tr><td style="padding: 0 0 10px 0;background-color: white;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;"></td></tr></tr><td style="text-align: center;padding: 25px 0px 30px 0px;color: #798b99;font-size: 11px;"></td></tbody></table></td></tr></tbody></table>

</body></html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of CipherIS

ASKER

Ok, I used  https://validator.w3.org/#validate_by_input to validate the HTML.  I fixed "ALL" the errors.

My email still shows USA as orange and NOT Black.  I even tried </br> USA.  Still orange even though I'm telling it it's black.  

Other note when I highlight over the address in the email it displays a link which you click on and it will map the address.  I'm sending the HTML via SMTP in VB.NET and receiving the email in office265 Outlook.
How you send and receive is not really relevant at this stage.

1. Did you try the other suggestion I had by specifying the colour in a style attribute and wrapping USA in a <span>

2. If you load the html into a browser - what colour is the text?

3. Can you post your updated code.
No, I didn't add the span.  I will try it again.  However, in Office365 "USA" is displaying as orange and when I send it to my gmail account "USA" is displaying as black.  I'll add the span to see what I get.
I added the below code including the SPAN.  When receiving the email in Office365 it is still orange.  Also, has hyperlink to map the address which I did not add.  In gmail it displays as black.
<font style="color: black"><span style="color: black">USA</span></font>

Open in new window

Can you post the HTML here.