Sometime in late July 2010 changes to Hotmail resulted in heading tags being rendered in green. As I’ve not found reference to this problem anywhere online, it’s possible, though unlikely, that it’s unique to what I’m doing. This post examines the source of the colour change and how to address the issue.

Information and fix updated 27/08/10.

First up, I’m testing how emails look on a PC, with Windows XP, in Firefox. The same thing happens when using Chrome too, so it’s likely that it will also happen when using other browsers.

The source of the green is in an external style sheet which is overriding inline styles within the email. The style sheet in question, referenced as http://by152w.bay152.mail.live.com/mail/InboxLight.aspx?n=1505027153 and called id=”thenewcss”, is located at around line 25 of the code in my browser, well above the body of the email.

The offending style is “h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht{color:#006E12 !important}”. The fix is very easy, it was simply necessary to alter the inline styles within the body of the email so that the colour as marked as !important.

Update starts here.

Although at the time of writing, the fix above seemed to work just fine, next time I went to broadcast and email it was clear there were problems in Outlook and Yahoo. I also wanted to follow up on one comment which indicated the fix didn’t work in hotmail either. First up was a test of a number of variations of inline style applied to h2 and h3 tags. When viewed directly in a browser, all of these work, and all validate.

Next, these were tested via an email broadcast. After a lot of faffing about testing and retesting, 2 alternative solutions emerged which definitely work in Gmail, Hotmail, Outlook and Yahoomail. Retaining a heading tag (no !important required):

<h3 style="font-family: Arial, sans-serif; font-size:16px; font-weight: bold; margin-top: 0; margin-bottom: 0; text-align: left;" align="left">

	<span style="color: #3399cc;">Colour in span, no !important</span>

</h3>

Or, if you’re not fussed about heading tags, this works just fine too:

<span style="color: #3399cc; font-family: Arial, sans-serif; font-size:16px; font-weight: bold; margin-top: 0; margin-bottom: 0; text-align: left;">Just a span no !important</span>

End of update.

It would be great to know if anyone else has experienced the same thing. Thanks for all the comments, keep them coming. Read my guide to HTML email coding here.

Tags:

• Email design
• Front End Coding