Question

I'm struggling to disable the automatic text/font formatting that Outlook.com applies to HTML e-mails.

I have tried using:

-webkit-text-size-adjust:none;-ms-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;

and then, just:

-webkit-text-size-adjust:none;

as an inline style on all paragraph blocks but unfortunately it is not being recognised by outlook.

This particular newsletter is fairly tight in terms of layout with little solid colour or spacing to accommodate the formatting Outlook is insisting on.

The full text block is:

<p style="font-family:arial, sans-serif; color:#FFFFFF; font-size:14px; padding-left: 10px;padding-right:10px; -webkit-text-size-adjust:none;-ms-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;">Hi $$first_name$$</p>
       <p style="font-family:arial, sans-serif; color:#FFFFFF; font-size:14px; padding-left: 10px;padding-right:10px; -webkit-text-size-adjust:none;-ms-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;">
       To get your weekend off to the best possible start, we'd like to invite you to read all your incoming messages for free this evening.</p>
       <p style="font-family:arial, sans-serif; color:#FFFFFF; font-size:14px; padding-left: 10px;padding-right:10px; -webkit-text-size-adjust:none;-ms-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;">Just log in as normal between 6pm and 8pm and you'll automatically be able to open all your mail.</p>

       <table width="381" align="center"><tbody><tr>
        <td align="left"><a style="text-decoration:underline; color:#FFFFFF;" target="_blank" title="Upgrade Now" href=""><img style="display:block;" src="http://s.wldcdn.net/newsletters/uploads/assets/000/028/131/8c6cbc24743881ebc812970367245b16_original.png?1376643494" alt="" /></a></td>
        </tr></tbody></table>

       <p style="font-family:arial, sans-serif; color:#FFFFFF; font-size:14px; padding-left: 10px;padding-right:10px; -webkit-text-size-adjust:none;-ms-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;">See you later,</p>
       <p style="font-family:arial, sans-serif; color:#FFFFFF; font-size:14px; padding-left: 10px;padding-right:10px; -webkit-text-size-adjust:none;-ms-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;">The $$site_name$$ Team.</p>

Any help would be appreciated.

Was it helpful?

Solution

I had a similar problem, with Outlook itself, not the online service. I ended up not using <p>-tags at all. All content went into table cells (<td>s) instead.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top