Home Resources Blog

This week, a rather obvious Hotmail quirk cropped up. By obvious, I mean that a garden-variety set of symbols like © ® and ™ are being replaced by 19x19px ’emoji’, or .gif images. Apparently Hotmail thought this would be a fun way to spice up your email newsletters, but in fact, it’s an annoyance to email designers, who don’t want to have their tiny footer text broken up by a © character that’s the size of a fist. Yes, the images are here to stay – there’s a new bit of JavaScript code in Hotmail which ensures that no symbol goes by unmolested.

Emoji in email

To make matters worse, if you have img { display: block; } in your email design’s CSS code to prevent gaps in Gmail, each emoji will be followed by a line break (pictured).

Bringing emoji down to size

Thankfully, there’s a fix – resizing the images so they’re more in line with the surrounding text. After viewing a couple of the solutions being spun around, we took a crack at our own and found that adding the following snippet of CSS code to your stylesheet works a charm:

.codeblock {
width:92%;
display:block;
padding:20px;
overflow:none;
word-wrap:break-word;
margin-top:20px;
margin-bottom:20px;
background: #ededed;
font-size: 0.8em;
}

.ExternalClass img[class^=Emoji] { width: 10px !important; height: 10px !important; display: inline !important; }

In the above fix, we’re using an attribute selector to say, ‘if an image is assigned a class that starts with ‘Emoji’, make it 10px x 10px’. You can change the size to whatever suits the surrounding text. The display: inline !important; has been added to prevent the Gmail gap fix from forcing line breaks. Also, .ExternalClass has been added to prevent Hotmail from renaming the img[ ], as it does to ‘unique’ classes.

Alternately, if you were meaning to superscript symbols like ™, you can try:

.ExternalClass img[class^=Emoji] { width: 8px !important; height: 8px !important; vertical-align: super; display: inline !important; }

While we’re talking Hotmail quirks…

Stephen

here recently brought to our attention that mailto: links have been disabled in Hotmail. As we’ve mentioned here before, using a contact form is preferable to using a mailto: when collecting responses – now Hotmail has made this more so.

Many thanks to Email Design Review for diligently reporting the issue and inspiring the above fix.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free