[Now Fixed] Email Issue: © Copyright symbol breaking in Hotmail

Update – 26 April 2012

As mentioned by Brian Thies in the comments below, Hotmail have now released an update to their platform that fixes this bug, therefore designers don’t need to take any action to update their code. We’ve run a few tests through Hotmail and the symbols are now being displayed as normal.

We’ve noticed a peculiar rendering issue that’s just appeared in Hotmail – the © ASCII code used to insert a copyright symbol loses all formatting. We’ve run some tests in various live browsers, and the issue seems to appear in IE, Firefox and Chrome/Safari. It appears that the symbols are actually being replaced by Hotmail’s own emoji images, for example:  .

The bug affects other symbols, including ® (®), ™ (™) ♠ (♠), ♣ (♣), ♦ (♦) and ♥ (♥).

There are a few ways to stop this from happening:

  • Use images instead of symbols
  • Use the word “copyright” or (c) instead of the symbols

There is also a code fix that can be used, by adding the following style tag to theof your code:

<style>
/* Hotmail symbol fix */
.symbolfix img{width:10px !important;height:10px !important;}
</style>

And then wrapping the symbols with the following span tag:

<span class="symbolfix">&copy;</span>

This will resize Hotmail’s icons so they’re more in line with the font size, though unfortunately we still can’t change the colour or style of the symbols.

Hat tip to Matt Byrd and Josh Green on the fixes.

Spotted by Sharon Jennings

By Elliot Ross

Elliot Ross is Managing Director of Action Rocket, an email marketing creative agency based in London. You can find him on Twitter at @iamelliot

  • Justin

    It looks like Hotmail is replacing the elements with its own image:

    Could you target the class name in order to reduce the size from the default 19px at least? Not tested it yet.

    • http://www.elliot-ross.co.uk/ Elliot Ross

      that could work – testing it now!

  • http://twitter.com/mparkerbyrd Matt Byrd

    There has to be a more elegant solution than this, but, I wrapped the © in a span with the class “copy” and then put this into the CSS:
    .ExternalClass span.ecxcopy img {width:10px !important;height:10px !important;}

    • http://www.elliot-ross.co.uk/ Elliot Ross

      that’s the solution I got too. 

      I tried targeting the specific classes, but this didn’t work:

      eg.

      /* Hotmail Copyright Icon */.Emoji$000A9$154D{width:10px !important;height:10px !important;}/* Hotmail Heart Icon */.Emoji$02665$1546{width:10px !important;height:10px !important;}/* Hotmail Trademark Icon */.Emoji$02122$153A{width:10px !important;height:10px !important;}/* Hotmail Registered Mark*/.Emoji$000AE$1559{width:10px !important;height:10px !important;}

      • http://twitter.com/mparkerbyrd Matt Byrd

        Yep. I tried the specific classes too and couldn’t get anywhere.

        • http://www.elliot-ross.co.uk/ Elliot Ross

          aaah clever! I’ll update the blog post then :)

          • http://twitter.com/mparkerbyrd Matt Byrd

            Yeah, I’ve tried a couple of things since then. The only way seems to be the one I originally posted. So bizarre that it won’t let us target the classes. I’ll keep trying something on that end…but for now…looks like the span is the best way.

          • http://twitter.com/mparkerbyrd Matt Byrd

            Hey Elliot, I was totally wrong that second way I commented about (that you ended up posting) didn’t work. Only the span works for me.

          • http://www.elliot-ross.co.uk/ Elliot Ross

            haha cool – just updated with the span, seems like the best way for now!

  • http://twitter.com/SVJennings Sharon Jennings

    Is there a way to do it inline? We don’t tend to use the styles…

    • http://www.elliot-ross.co.uk/ Elliot Ross

      seems not at the moment, though adding the style shouldn’t affect any other email client (if they drop out elsewhere it doesn’t matter as we only need them in Hotmail).. we’ll see if Hotmail sort it out or not

  • http://twitter.com/briangraves Brian Graves

    This fix does

  • Cutch

    Hi guys,

    Not sure why, but the workaround is not happening for me. I did this:
    /* Hotmail symbol fix */.symbolfix img{width:10px !important;height:10px !important;}.ecxsymbolfix img{width:10px !important;height:10px !important;}and then within the copy:
    ®™
    ©Still no luck in IE or Firefox…

    • Cutch

      Hmm, those entities in my post above (
      ®™© ) are surrounded by a span with class of “symbolfix” but didn’t show up in my post as code.

      • http://www.elliot-ross.co.uk/ Elliot Ross

        hmm that’s odd!

        might be worth checking if your email tool is stripping out the tagsjust ran this snippet through Hotmail and it worked, if that helps – http://www.emaildesignreview.com/wp-content/uploads/2012/04/hotmailfix.html

  • http://twitter.com/SVJennings Sharon Jennings

    Woohoo! It works – just a note, if you copy + paste the above straight in, remember to change the quote marks from 
    ” 
    to 
    ” or it won’t work… as I discovered…

    • http://www.elliot-ross.co.uk/ Elliot Ross

      good call, that’s a wordpress thing. I’ll fix that now!

  • http://pulse.yahoo.com/_RICHM5ACXQ6ER4ENP2OC4GH4OI hav0k

    Jeez – Microsoft can eff up anything ehh?

  • Ming

    Yet another MS problem. Thank you for the fix. For people using the .symbolfix please be aware that the default color for these entities is a dark gray and you do not have any option to change it for Hotmail.

  • http://twitter.com/SVJennings Sharon Jennings

    I look forward to tomorrow and finding out if bullet point symbols • are affected too…. 

    • http://www.facebook.com/jenashley04 Jennifer Cudmore

       Jeez I hope not… :-/

  • http://www.facebook.com/jenashley04 Jennifer Cudmore

    What about making them superscript? It appears that adding in the style variables that I normally use don’t work. Anyone find anything that works?

  • Dave

    This breaks images too if you have one of those marks in the ALT tag!

  • http://www.facebook.com/roshodgekiss Rosanne de Vries

    Hey guys, we’ve recently come up with our own solution, as documented in a recent blog post, ‘Hats off to Hotmail, for replacing symbols with oversized emoji‘.

    In essence, you can resize the emoji safely by adding the following code to your CSS stylesheet:Code:.ExternalClass img[class^=Emoji] { width: 10px !important; height: 10px !important; display: inline !important; }The attribute selector above removes the need to surround each symbol instance with a span – which is desirably what you want to avoid in email templates. A huge thanks to everyone here for the code snippets and inspiration – the crowd mind is an amazing thing!

    • http://www.elliot-ross.co.uk/ Elliot Ross

      thanks Rosanne, this looks great, mind if I add it above?

      also do you have a link for your blog article?

      • Ros Hodgekiss

        Sorry about that, it looks like the link didn’t come through on the post. It’s on our blog now: http://www.campaignmonitor.com/blog/post/3716/hats-off-to-hotmail-for-replacing-symbols-with-oversized-emoji/

        Thanks, Elliot!

    • C. Pannenbecker

      Thanks! Had to send out an emailing today which was already tested and was fine. With your help we were able to fix it quickly and still send it out today!

  • http://twitter.com/SolitaryCynic Mason

    Just worked with my team and, after
    review, noted that the default external class element that Hotmail
    inserts is set to block. If your symbol should be inline, use the
    following (bolded) attribute in your style:

    /* Hotmail symbol fix */

    .symbolfix img, .ecxsymbolfix img {

        width:10px !important;

        height:10px !important;

        display: inline !important;

    }

    NOTE: You could also use inline-block as well. If you intend for your NCR to be block level, this can be disregarded

  • Bthies

    After a high level escalation, a fix was rolled out last night that corrected this issue.  Cheers!

    • admin

      great news! I’ll update the post now

  • guest847

    This is only fixed for Standard browsers – Hotmail when viewed on a mobile broswer (i.e. droid browser) it is still an image

  • wilson daniel rufus

    i tried &COPY; & COPY; in caps and it does not seem to work