Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Formatting Issues in Hotmail

stadster

Newbie
Total Posts:  8
Posted: 20 February 2011 09:56 PM

I did some testing on an email I designed and noted that the text lost all formatting in Hotmail.  It displayed well in all other email clients.

Having seen this I put together a very basic sample email for testing.  Basically, a centered table with text that has margins set on it.

When I tested this basic sample I see the table is not centered and the margin properties for the text do not display in Hotmail. 

I thought I finally could design an email that would display properly in all email clients, only to run into this issue with Hotmail.

Any help would be greatly appreciated!


Following is the code I used for testing:

<html>

<head>
<meta http-equiv=“Content-Language” content=“en-us”>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<title>Sed ut perspiciatis unde omnis i</title>
</head>

<body>

<div align=“center”>
  <table border=“0” width=“100%” cellspacing=“0” cellpadding=“0” height=“100%”>
      <tr>
        <td align=“left” valign=“top”> <div align=“center”>
  <table border=“1” width=“600” cellspacing=“1” height=“300”>
      <tr>
        <td align=“left” valign=“top” height=“150”>
       
        Help! ut perspiciatis unde omnis iste natus error
        sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem
        accusantium doloremque. Omnis iste natus error sit voluptatem
        accusantium doloremque laudantium, totam rem aperiam</font>.</td>
      </tr>
      <tr>
        <td align=“left” valign=“top” height=“144”>
       
        Sample 1</font>
        Sample 2
        Omnis iste natus error sit voluptatem  doloremque laudantium
        totam rem aperiam</font>.

       

 </td>
      </tr>
  </table>
   </div>

        </td>
      </tr>
  </table>
</div>

</body>

</html>


 

stadster

Newbie
Total Posts:  8
Posted: 20 February 2011 10:41 PM
[ # 1 ]

Ok, I found a fix for centering the table.  It appears, “the new Hotmail, the inline-block of the parent css (within hotmail’s css) seems to be blocking anything outside of a table.”

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 works!

Now, I need to find fix for text margins…


 

Michelle Klann

Avatar
Administrator
Total Posts:  204
Posted: 28 February 2011 08:56 PM
[ # 2 ]

Stadster,

You are correct, I believe that fix for centering your entire email is also included in our Tips/Tricks section for Hotmail. 

Hotmail does not support the “margin” and “margin-top” CSS properties for any HTML element.  This, coupled with the Outlook 2007 and 2010’s “padding” issues on paragraphs and spans can make life difficult.

Also, Hotmail has the following code in their embedded CSS:

p {margin:0 0 1.35em;

You will need to overwrite this in your embedded CSS in order to start with a clean slate.

Our recommendation is to stick with margin-left, margin-right, and margin-bottom properties for all paragraphs and spans.
 
It is also safe to use the padding property within your TDs for additional spacing.  Just know that if you have a specific width attribute or property set to a TD, the left/right padding will affect the actual width differently within browsers.

Here’s more on that.
http://www.emailonacid.com/forum/viewthread/47/