Hotmail 'ecx' Hell

Hello

I have a design which work great in everything excepy Hotmail. It's basically p elements seem to be get padding by hotmail via adding the class ecx to my classes:

Example:

<p class="myclass"></p>

ends up with:

<p class="ecxmyclass"></p>

It's only the margin / padding on the p elements that seem to be effected. I've tried adding !important but nothing doing with that.

Help

roshodgekiss roshodgekiss, 3 years ago

Hi versus, it's been reported that Hotmail/Outlook.com have stopped supporting the margin CSS property in email. I'll be looking into a workaround, however based on your observations, I think the following may be worth a try:

p[class*="ecx"] { margin: 15px; }

Again, this is untested. However, if you get a chance to try this before I do, please let us know how you go! I'll be sure to update this thread once I've tried my own tests.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
versus, 3 years ago

Hello roshodgekiss - I tried that but unfortunately it didn't work for me.

What I have done is replace all p elements with a class specific span. Padding and margin now seem to work in the usual way, without any special declarations or adding !important.

 .myclass { margin: 15px; } <span class="myclass>Text</span> 

Would there be any problems in not using p, h1, h2 etc. and replacing with spans?

Redferret, 3 years ago

strictly speaking, spans aren't mean to be used like paragraphs, but i'd be interested to know if this still works if you apply display:block; to the span (although i don't think all clients will respect this)

also, you could try using div tags instead of P tags, it sounds like we're getting closer to a work around


Gmail app apologist
JohnP JohnP, 3 years ago

Instead of <p> or <span> you could use <font> tags and double <br> for line breaks.

You can also get by fine without ever having to use the margin attribute.

roshodgekiss roshodgekiss, 3 years ago

Hi guys, just to let you know, we posted about the Outlook.com margin issue in our blog yesterday. While Outlook.com is stripping all instances of margin (and CSS variants like margin-top), we're not giving up! By all means, lets keep hacking away at this!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
versus, 3 years ago

Redferret: I know that span is not intend to be used like that but it works well in hotmail / outlook and designs seem to be consistent across all my tests in gmail etc. I used:

<span class="title-text"></span>
<span class="body-text"></span>

In place of h1 and p. So far so good but you never know!

JohnP's idea of using <br/> and its a good solution to - as I'd rather avoid / prevent the problem rather than try and cure it. But not sure about using <font>. Thought that was depreciated in html4?... does that matter?

roshodgekiss roshodgekiss, 3 years ago

Just refreshing this, as Stephen on our team has mentioned a possible workaround. Assuming you have a plain background color, it may be possible to use the border CSS property to create "fake" margins. For example, if you wanted to add a 10px margin to the RH-side of a table cell:

<td style="border-right: 10px solid #FFFFFFF;">Your content</td>

Of course, it may not always be practical, but given that border is widely supported, some folks may find this to be useful :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Redferret, 3 years ago

am I right in thinking that because borders exist on the outer edge, you'll need to deduct them from the width of the table?


Gmail app apologist
roshodgekiss roshodgekiss, 3 years ago

Redferret, this is correct. Or, you can set width="100%" where possible :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098