HTML email displaying mangled in outlook.com

Question

I'm sending a fairly simple multipart message containing both plain text and HTML versions. The HTML version is a table with some columns, all sized in percent. All styles are inline.

In outlook.com it renders terribly. Viewing source (in a browser - Firefox) I can see that it is mangling the HTML.

For instance the opening table tag is rendering like this:

(hmm - so mangled stackoverflow won't render it either).

Basically it is lopping off the first character of attributes, so width="100%" renders as width="00%", align="eft", links come up as "ttp://something.com", missing quotes, etc. Viewing source in outlook.com doesn't show the HTML at all - it must be rendered via javascript, as I can only see it using Firebug.

I've tried it both with and without the conditional comments (which are in place for Outlook the app), and with/without the doctype. Nothing makes it better. I don't have a clue what's going on, and not finding any other posts about attributes getting truncated.

Any thoughts?

Here's the HTML portion of the email:

<!DOCTYPE html>
<html>
<body style="font-family: Arial, Helvetica, sans-serif; font-size: 14px;line-height: 1.4; color: #333;">
    <!--[if (gte mso 9)|(IE)]>
    <table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td>
                <![endif]-->
                <table style="width: 100%; max-width: 600px;" align="left" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td colspan="3" width="100%" height="16"></td>
                    </tr>
                    <tr>
                        <td width="3%"></td>
                        <td><img src="https://www.domain.com/logo.png" width="203" height="38" alt="alt name" /></td>
                        <td width="3%"></td>
                    </tr>
                    <tr>
                        <td colspan="3" width="100%" height="30"></td>
                    </tr>
                    <tr>
                        <td width="3%"></td>
                        <td width="94%">
                            Hello,<br />
                            <br />
                            The Proof for Order Item #123 is ready for review. Please login to your account to review and approve the proof.<br />
                            <br />
                            Log in at <a href="https://www.domain.com/my-account/" style="color: #0c7ebd;">https://www.domain.com/my-account/</a> and choose "Proofs Waiting Approval" on the "My Account" page.<br />
                            <br />
                            Click the "Review" link for ID 123 - you will see your proof and you will be able to approve it for delivery. You will also have the opportunity to request changes.<br />
                            <br />
                            Please contact our office if you have any questions.<br />
                            Thank you.<br />
                            <br />
                            Sincerely,<span style="font-size: 4px;"><br />
                            <br />
                            </span>
                            <span style="font-size:13px; font-weight: bold;">COMPANY TEAM</span><br />
                            <span style="font-size: 9px;"><span style="color: #2b9f4c;">COMPANY</span> | CUSTOMER SERVICE</span><span style="font-size: 11px;"><br />
                            <span style="font-weight: bold;color: #0c7ebd;">T:</span> 888.555.2122</span><span style="font-size: 4px;"><br />
                            <br />
                            </span>
                            <span style="font-size: 10px;"><a href="https://www.domain.com" style="color: #0c7ebd;">www.domain.com</a><span style="font-size: 3px;"><br />
                            <br />
                            </span>
                            <img src="https://www.domain.com/images/email/ConsiderEnvironment.png" width="37" height="42" alt="" /> <span style="color: #2b9f4c;">Please consider the environment before printing this email</span></span>
                        </td>
                        <td width="3%"></td>
                    </tr>
                    <tr>
                        <td colspan="3" width="100%" height="30"></td>
                    </tr>
                </table>
                <!--[if (gte mso 9)|(IE)]>
            </td>
        </tr>
    </table>
    <![endif]-->
</body>
</html>

How are you sending the email? I performed a test on this email, modifying only the head and the email rendered well in Outlook.com (FF/IE/Chrome). — edu8rdo, Sep 01 '15 at 19:27

score 1 · Answer 1 · answered Sep 01 '15 at 22:56

your code looks pretty email friendly to me!

My only suggestion is check all your elements in accordance with Campaign Monitor's support guide (https://i3.campaignmonitor.com/assets/files/css/campaign-monitor-guide-to-css-in-email-may-2014.pdf?ver=5117&_ga=1.123317261.720201475.1441145331).

Another handy feature campaign monitor use is their testing system, this also gives a preview of what your email would look like in each browser/email client (outlook.com is supported). Unfortunately each test costs 5 Australian dollars but sometimes I find the fee is worth the headache as it's always accurate!

More info on this can be found here: https://www.campaignmonitor.com/testing/

score 0 · Answer 2 · answered Sep 02 '15 at 04:09

0

Ack - turns out I had the wrong Content-Transfer-Encoding. I had it set to quoted-printable but should have been 8bit or 7bit. quoted-printable assumes it's to be read as presented, and is not code to be interpreted. Or so I gather.

Oddly it worked just fine in every other client tested in. So - "thanks" outlook.com, for teaching me something...

answered Sep 02 '15 at 04:09

Bob Meador

155
4
8

Apparently I can't do that for 22 hours – Bob Meador Sep 02 '15 at 19:25

HTML email displaying mangled in outlook.com

2 Answers2