CODEWITHSUNDEEP
htmlemailoutlook
Cyclotron
Cyclotron

Reputation: 339

HTML layout is messed up in Microsoft Outlook E-mail client

My application sends an HTML e-mail to users. When I test it as a plain HTML file, it looks ok in various browsers (Firefox, IE, Chrome, Safari, Android phone browsers). It also displays fine in webmail clients that I Have tested (Gmail, Yahoo mail).

But when I view the message in Microsoft Outlook, the layout is messed up. Specifically - the right hand icon is not top aligned, but displayed much lower than the left icon. This is the HTML code:

<div style="width: 100%; margin: 0px auto; background-color: #333; border: 0px solid #333; color: #FFF">
   <!-- Logos -->
       <div style="background-color: #333; border: 0px solid #333; color: #FFF; padding-top: 2px; padding-right: 2px; padding-left: 2px">
           <a href="http://mywebsite.com" target="_blank" style="color: #333; "><img src="MyLogo.png" height="30px" width="30px" alt="Logo" border="0"></a>
           <a href="mailto:?subject='.$email_subject.'&body='.$email_body.'" style="color: #333"><img src="Image_1.png" height="27px" width="120px" align="right" alt="recommend" border="0"></a>
       </div>
   <!-- Title -->
       <div style="text-align: left; font-size:12px; padding-left: 2px; font-weight: bold;">
           <span style="font-size:12px; padding-left: 2px; font-weight: bold;">Comment line - should be left aligned</span>
       </div>
       <div style="text-align: center; text-transform: uppercase; color: #DDD; font-size: 12px;font-weight: bold;">
           <span><b>My Title Should Be Centered</b></span>
      </div>
   </div>

Upvotes: 2

Views: 5158

Answers (2)

David Hunter
David Hunter

Reputation: 9

You should really be building your email using responsive techniques as well. Here is a very good article that describes the method : http://blog.booking.com/responsive-email.html

Upvotes: 1

John
John

Reputation: 12193

You may need to do more research on html email design. It is not the same as html for the web and should be table based instead of divs. Here is a basic example of how your example code should look:

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#333333">
  <tr>
    <td>
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="left">
            <a href=""><img style="margin: 0; border: 0; padding: 0; display: block;" src="MyLogo.png" width="30px" height="10px" alt="Logo"></a>
          </td>
        </tr>
        <tr>
          <td align="left" style="font-size:12px; padding-left: 2px; font-weight: bold; color:#DDDDDD;">
            Comment line - should be left aligned
          </td>
        </tr>
      </table>
    </td>
    <td align="right" valign="top">
      <a href="mailto:?subject='.$email_subject.'&body='.$email_body.'"><img style="margin: 0; border: 0; padding: 0; display: block;" src="MyLogo.png" width="120px" height="27px" alt="recommend"></a>
    </td>
  </tr>
  <tr>
    <td align="center" colspan="2" style="text-transform: uppercase; color: #DDDDDD; font-size: 12px; font-weight: bold;">
      My Title Should Be Centered
    </td>
  </tr>
</table>

A couple of good introduction to email design resources:

Upvotes: 2

Related Questions