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
Pingback: HTML Tricks Update – Hotmail background colours « Get In The Inbox()
Pingback: Email issue « Toddfraserdesign's Blog()
Pingback: Hello Inbox, An Email Marketing Blog by Email Marketing Service Provider, EmailDirect.» Blog Archive » Email Coding Guidelines โ Part 2: Picking Inline CSS Apart()
Pingback: Hello Inbox, An Email Marketing Blog by Email Marketing Service Provider, EmailDirect.» Blog Archive » Hold The Phone – A Look at Designing for Smartphones()