New Hotmail Issues

Hi Everyone,
It seems as if Microsoft have decided to update Hotmail. While I am sure it has some nice new features, I'm having problems with how it is displaying eflyers:

1. Centrally aligning tables/divs
2. Applying a background color

It seems to be fine in everything but hotmail, in which a parent style

.ReadMsgBody .ExternalClass {
display:inline-block;
} (within their inboxAll.css)

seems to be blocking the width and background colors of the body or wrapper div and therefore the align="center" table I have is aligning to the left (and displays content only up to 734 wide(width of table). example below of code (content stripped out))

<style type="text/css">
img {border:0; display:block;}
body {margin:0px; padding:0px; background-color:#000;}
.wrapper{background-color:#000;}
</style></head>

<body>
<div class="wrapper">
<table border="0" width="734" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td></td>
  </tr>
</table>
</div>
</body>

I hope this makes sense and that someone may have some solutions.
Many thanks in advance.

BThies BThies, 6 years ago

Centering:

<body bgcolor="#000000">
<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center">
     <table width="734" cellpadding="0" cellspacing="0" border="0">
         <tr>
               <td width="734"></td>
         </tr>
     </table>
</td></tr></table>
</body>

Brian Thies
Professional Email Developer
Thies Publishing
emailmonkey, 6 years ago

Hi BThies,
Normally something like that would work, but not with the new Hotmail, the inline-block of the parent css (within hotmail's css) seems to be blocking anything outside of a table. Adding a table/div around it with a width of 100% will do nothing as it will still be constrained by the inline-block (therefore constaining it to the width of the inital table 734px wide). It is not advised to make the tables any wider for accessibility reasons, but in doing so does display the background colour and centralises the design. (try disabling .ReadMsgBody .ExternalClass within firebug to see the problem fixed) p.s. have you tried/tested the new hotmail?

Any other suggestions?

BThies BThies, 6 years ago

Hmm... let me get back to you - I'll need to take a look at what they've done.


Brian Thies
Professional Email Developer
Thies Publishing
BThies BThies, 6 years ago

It almost looks like they're forcing their CSS to override any other CSS, and possibly using Javascript as well.

If that's the case, then another Microsoft fail.


Brian Thies
Professional Email Developer
Thies Publishing
BThies BThies, 6 years ago

Okay, so from what I can tell, it completely removes the <body>, so any 100% container (table or div) would only be as wide as the widest specified area.  So if you have 650px as the width of the main table, it'll only be that wide.

I'm not seeing any way around it since its being run by Javascript.


Brian Thies
Professional Email Developer
Thies Publishing
emailmonkey, 6 years ago

Thanks for your help, has anyone else got any suggestions on how to fix this??
For usability reasons its not worth making the eflyer/table/div wider than it actually is.

GarryAylott, 6 years ago

I have had this issue on a number of emails where I have a containing table of 100% and then a series of tables within each row all set to align="center".  At first I tried adding the same attribute to the <td>'s as well but no avail.

Then I found this fix which should be added within the <head> tags:

<style type="text/css">
.ReadMsgBody {width: 100%;}
.ExternalClass {width: 100%;}
</style>

It worked for me so give it a try.

BThies BThies, 6 years ago
GarryAylott :

I have had this issue on a number of emails where I have a containing table of 100% and then a series of tables within each row all set to align="center".  At first I tried adding the same attribute to the <td>'s as well but no avail.

Then I found this fix which should be added within the <head> tags:

<style type="text/css">
.ReadMsgBody {width: 100%;}
.ExternalClass {width: 100%;}
</style>

It worked for me so give it a try.

YES!  That does work.  Awesome find Garry!

I was going through all the different classes adding "100%" using Firebug, but never hit those.  It seemed there was no virtual body to it.   I thought Microsoft was trying to punish us.


Brian Thies
Professional Email Developer
Thies Publishing
emailmonkey, 6 years ago

Seems to work great, thanks for your help. Can't believe I missed it.

CCode, 6 years ago

Just a sidenote: Another, even simpler Hotmail-"fix" is setting the "display"-CSS-property of those two classes to the one they used to have:

<style type="text/css">
  .ReadMsgBody, .ExternalClass { display: inline; }
</style>

(It's "display: inline-block;" since the update.)

cjfarran, 6 years ago

This solution is not working for me, because Hotmail breaking the style by adding the letters "ecx" to the beginning of the class name. So my name of .ExternalClass is being renamed to ecxExternalClass and thus breaking the style.
Any other suggestions?

CCode, 6 years ago

OK, I just looked at it in detail and the what Hotmail does is the following:

It replaces all of your CSS class definitions, i.e. "MyClass" by ecxMyClass and adds the defined styles to a <style>...</style> block like this:

<style type="text-css">
.ExternalClass ecxMyClass { ... }
</style>

This happens for all of your defined CSS-classes except one named ".ExternalClass".

I found out that all of your styles that you define for the <body>-element are being automatically added to the default Hotmail .ExternalClass-definition. So you can simply use this style within your head and you are done:

<style type="text/css">
body { width: 100% !important; }
</style>

That will lead in Hotmail to a style-definition like the one using directly .ExternalClass, but you won't mess up your code with Hotmail-specific class-names and the <body> is per default 100% wide anyway so it won't harm anything of your code!

Alternatively you could use:

<style type="text/css">
body { display: block !important; }
</style>
ed.melly, 6 years ago

@ CCode - nice work, saved me a lot of hassle with that little fix.

rman22, 5 years ago

Tried everything in the above, and then some.  Any new ideas would be appreciated!
Thanks -

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