If not MSO randomly nest comments

ifnotmso

HTML content vanishing in some ISP inboxes

After fielding a few reports of email content vanishing in a few European ISP inboxes and some erroneous format warnings in HTML validators I decided to dig into it.

It turns out it was connected to an older issue which affected talk talk users a few years ago.

The main issue was the way the “if not” mso tags are being closed.

As proven using Email on Acid’s previews into a German ISP, where I’ve also had reports from Portugal and Slovakia. It seems they are all using the same Inbox software.

MSO conditionals

MSO conditionals are there to wrap around content that should either only be shown in Microsoft rendering tools, like Outlook OR specifically Not rendered by those engines.

These are special notations in the html which are wrapped in comments. The wrapping is different between the “If Is MSO” and “If Not MSO”…

If you only want something to be shown by Outlook, you wrap the conditionals and the content in comments, so that the other inboxes ignore them, eg:

<!--[if mso]>
outlook only html
<![endif]-->

Standard html opening comment at the start and standard closing at the end.

If you want all other inboxes to render it but do not want Outlook to render it you only wrap each conditional statement in comments and not the html in between – this way the other inboxes, who have no concept of MSO conditionals, render the html; then Outlook who sees the conditionals, will know not to, eg:

<!--[if !mso] -->
All inboxes apart from Outlook should render this.
<!--[endif]-->

So the html comments wrap around only the conditional statement for open and close but the content is not commented out.


Closing the if !mso opening comment

I put a little tweet out to see if there was any low hanging fruit and got back the explanation about closing the comment but nothing about why it’s not a standard close. It didn’t taste right so I dug into it alone and the replied with my results which I have explained below.

The problem itself lies in how many different ways there are to close the comments on each line for the If Not statement. Over the years a few other ways have emerged but it’s not clear as to why. eg:

<!--[if !mso]><!-- -->

<!--[if !mso]><!-->

<!--[if !mso]><!-->

<!--[if !mso]><!---->

As far as Outlook is concerned they have all been reported to work in someway or another. The problem that these specific . methods are not quite good (x)html in that they all result in nesting a comment in some way. This essentially results in an open comment, then another open comment, where there is never enough closing comments and the renderer at the other end, ends up treating all of the html after it as in a comment. Seeing as most of the time, the first one of these is in the header for a style tag, it blanks out the whole email.

The two that seems to be safe(r) are:

<!--[if !mso] -->
and
<!--[if !mso]> -->

I’ve no idea of the significance of the ‘>’ on the 2nd one.

I’ve had a look for some official tech docs about this but it’s probably so old now, it’s been lost.

I’ve had a few chats with Tim Robbins over the years and even he couldn’t remember why he and other experts at his level do more than just a standard closing comment there. I speculate that it’s just searched, copied and pasted; stackoverflow is flooded with different solutions as above.

Some research suggests each different one was a handle on a the varying crapness of IE over the years, possible then evolved into the crapness of MS Word inside Outlook once MS finally admitted IE in Outlook was the virus risk we’d all repeatedly lived.

Maybe someone else out there knows why?

Either way, advice here is not to blindly copy and paste the first advice you see. Validate the advice with some testing, especially with a proper preview engine like Litmus or Email on Acid, going through all of the available inboxes.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s