Thread

Hi

I’m having some trouble with Hotmail seeming to strip out some CSS attributes on my P and H tags.

I’ve sent a test email to a Gmail and Hotmail inbox. It renders fine on Gmail but not Hotmail. On inspection with Firebug, I can see that in Hotmail the inline styles are empty.

So in Gmail I have

Screenshot of Firebug
http://i45.tinypic.com/vdmouc.jpg

The Code
http://f3d.co/previews/factor3/email/example-code.html

Exactly the same code was sent to both mailboxes.

Is this a known issue? It’s not one I’ve heard about before and can’t find any reference to it.

Dave

WOW Dave,

We are seeing the same thing over here.  Outlook.com appears to have discontinued support for:

margin
margin-top
margin-right
margin-bottom
margin-left

They never did support margin and margin-top but this is crazy!

We will do some more testing and follow up with a blog article about this but for now, you might be limited to padding.  Hope this doesn’t have any adverse effects in Outlook 2007+.

Miki

Another thing to note is that Hotmail enforces it’s own embedded styles on headings and paragraphs.  Then it proceeds to strip yours out.

Time to pull up my sleeves and hut for a work-around. So far I’ve only tested in Outlook.com using inline styles.

It seems they are stripping the margin properties server side so this is likely happening in Outlook.com for all browsers.

Thanks so much for confirming it’s not just me with this issue. This has been bothering me. I was about to set about trying to fix it. I see jmarnie has also reported the same thing by the looks of it.

I ran a EOA test previously for Hotmail and Outlook.com and all of the previews looked the same so it seems it’s across the board. I’ve only checked code for Hotmail though.

If I find a workaround I’ll post but it looks like it might be a challenging one. May have to just live with default margins or resort to not using P or H tags or some sort of extreme table layout! Great.

What have we done to Microsoft to deserve this?

Dave,

Yeah, I won’t lie, I am calculating the hours in my head already of all the auto responders that we are going to have to fix on our end just to accommodate this change.  Needless to say, our readers expect perfection.

After further testing we concluded:

1.) Yes, margin properties are stripped all browsers
2.) Yes, it occurs in Outlook.com and Hotmail
3.) It effects inline and embedded css
4.) There’s no known workaround as of yet.  The only thing I can think of is to try some random type of CSS selector that maybe Hotmail’s parsing engine get’s stumped on, much like the Yahoo/Media query fixed.  Either that or a linked style sheet which I am 99% sure they don’t support either.

If you come up with anything, be sure to let us know.

In the meantime, here’s our follow-up blog article on the subject: Emailology: Outlook.com Margin-alizes CSS Properties.

;/

Miki

Thanks for the update.

It’s no fix, but the only way I can think of at the moment to achieve the effect of paragraph spacing other than Hotmail/Outlook.com’s default, is to put every paragraph and heading into a table cell with cellpadding set on the table. Then, add additional padding to some to the table cells if you need to vary the effective margin.

I think it works for all clients but is obviously ugly and painful code. Might help someone who’s desperate for those tight paragraph spaces though.

Think personally we will design with default margins in mind for now in case they change it again.

Here’s a test, not a great example but shows it works.

<table width=“300” border=“0” cellspacing=“0” cellpadding=“3” bgcolor=”#DDDDDD”>
  <tr>
      <td style=“padding-top:10px;”>This is a heading 1</td>
  </tr>
  <tr>
      <td>This is a paragraph this is a paragraph this is a paragraph
this is a paragraph this is a paragraph this is a paragraph.</td>
  </tr>
</table>

In addition to margin no longer working, you will also see that if you have more than one of the same image, only the first image will appear and the others are blocked.

Also, I don’t think padding works in Outlook 2007 & 2010. I’ve been doing the following:

<div style=“font-size:18px; line-height:24px; color:#75cfe6;”>Indication</div>

      <table cellpadding=“0” cellspacing=“0” >
        <tr>
        <td align=“left” valign=“top” style=“line-height:10px;”> 
        </td>
        </tr>
      </table>

The line-height is equal to what the margin-bottom would have been right above it. This seems to work, however if anyone knows of an issue with this, please let me know.