Click to Sign Up for a 7 Day Free Trial!

Email Development

Prevent IE Edge Meta Tag from Breaking Images in Live Mail

Email On Acid

The IE=Edge meta tag is becoming very popular with HTML email developers for one reason: it enables CSS3 and media queries in Windows Phone 7.5 and higher. This is a huge win for developers. It turns out that this tag will also enable "edge" mode in Live Mail and the Windows 8 Mail app, giving developers access to rounded borders and media queries. Here is what this meta tag looks like:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

The Problem

It turns out that the IE=Edge meta tag will break the display of images in Live Mail. I'm not sure what causes this issue, as "edge" mode shouldn't break images for any reason, and wouldn't break them if the code were loaded in Internet Explorer. This tag also causes the email to be unprintable in Outlook 2003. Luckily for us, the fix is simple. In fact, the printing fix that James White covered in his blog (thanks James!) will also fix the image display issues.

The Fix

All you'll need to do is include a conditional statement in your code before the IE=edge meta tag. The presence of any conditional statement resolves the image issues, as well as the printing issue. In fact, the !mso conditional doesn't affect Outlook 2003. The !mso tag is only effective for Outlook 2007, 2010, 2013 and Outlook.com, but it still works. I tried this with a few conditional comments, and all of them fixed the image issue in Live Mail. It doesn't even matter if the tag is inside of the conditional statement or not.

<!--[if !mso]><!-- -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->

More Fun with Meta Tags

What meta tags do you find useful in your email coding? Let us know in the comments below!

About the Author

Geoff Phillips

Geoff Phillips

Half writer, half email builder/fixer and half customer support, Geoff is living his dream in a role that combines his many diverse interests. Code problem or tricky client got you down? Geoff's your man.

Join the Discussion

Thanks for writing this up Geoff. I was happy when we sort of solved the mystery of the missing images in Live Mail. Though it would still be nice to know why it does this. We may never know.
WundermanEOA
Great post Geoff. Always good to preempt these great solutions when designing my email content to clients!

Thanks for the tip!
Kirsty
Also as quick one is the extra <!-- --> there for a specific reason (as it appears to be empty. Thankyou!
Kirsty
Kirsty,
I left it in there because I took that snippet from James White (linked above). As far as I know, though, you don't need to have it. Any conditional comment around or before the meta tag should fix the problem.
Geoff Phillips
Thanks for featuring my article regarding the X-UA-Compatible header! I didn't actually know it broke Windows Live Mail as well. Good catch.

The reason why there is the extra comment mark is for Outlook.com and its conditional comments stripping, though it may not be applicable any longer.
James

Leave a Comment