Code Fixes

[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:  .

Continue reading

Making Superscript Tags Work In Email

Often in marketing emails we need to apply caveats to pieces of copy, linking to terms and conditions below or on a separate page1. However, just using the <sup> tag to superscript text can cause issues with line height in certain email clients and browsers.

The following style, when applied to <sup> tags, will fix these issues.

<sup style=”line-height:1; vertical-align:baseline;_vertical-align: bottom;position: relative;bottom: 1ex;font-size:11px !important;”>2</sup>

1 like that caveat there.

Updated: New HTML Email Full Page Background Fix (for Outlook & Webmail)

Note – this is an improved fix over our previous Outlook background fix 

This fix is something I’ve been looking at for a while – and allows html emails to display a full page background image in both outlook 2007 and webmail clients, and for the background image to degrade to a background colour when images are disabled.

Outlook 2007 supporting a full page background image

Whilst you can use the <body> tag to successfully specify a full page background image in Outlook, many webmail clients will ignore this. This has often meant that both background images and colour are also specified using a full width table, to ensure support in webmail clients.

One issue that occurs from this technique, however, is that Outlook will also render the background colour from that full width table, but not the background image, meaning that the solid background colour will display above any full page background image specified on the <body> tag in Outlook.

This fix allows you so specify a full width background image that displays in both Outlook and webmail clients, and will fall back to a solid background colour when viewed in any email client with images disabled.

Continue reading

HTML Email Full Page Background Fix (for Outlook & Webmail)

Note – we now have a better fix for this issue, which we recommend over the below fix. We’ve kept the content on this page for reference only.

Outlook 2007 supporting a full page background image

Since Outlook 2007 was released, support for background images in email has been problematic. Whilst you can use the <body> tag to successfully specify a full page background image in Outlook, many webmail clients will ignore this. This has often meant that both background images and colour are also specified using a full width table, to ensure support in webmail clients.

One issue that occurs from this technique, however, is that Outlook will also render the background colour from that full width table, but not the background image, meaning that the solid background colour will display above any full page background image specified on the <body> tag in Outlook.

This fix allows you so specify a full width background image that displays in both Outlook and webmail clients, and will fall back to a solid background colour when viewed in any email client with images disabled.

Continue reading

HTML Email Issue: loss of backgrounds in Hotmail (includes fix)

Various email clients have different quirks and html challenges – in our HTML email coding section we document these and detail any workarounds if available.

Email Client Affected:

This issue affects the new version of Hotmail.

Issue:

Hotmail have introduced a code in their rendering engine that effectively removes the background image or colour properties from ‘wrapper’ full width tables. Full width tables are commonly used in html emails to implement background formatting and to center the main email, and are specified as 100% wide.

Effectively the new Hotmail code forces the maximum width of the email to be widest part of the email defined in pixels, which may be either an image or a table.

Fix:

Whilst the width of the wrapping table could be forced out to a certain width (eg. 1000px), this would cause other rendering issues in other platforms (and it would be pretty impractical). Instead, a small CSS code snippet can be used to force the width back out to 100% – simply add this code at the top of the email HTML code:

<STYLE type=”text/css”>
.ReadMsgBody
{ width: 100%;}
.ExternalClass
{width: 100%;}
</STYLE>

Discovered:

July 2010