Text aligned center instead of left in Gmail and Hotmail through IE

I have an issue when looking HTML email in Gmail and Hotmail ONLY through Internet Explorer. Even though I put text-align:left wherever I could, when rendered through Internet Explorer it always shows centered. I did some inspection and found out that my <li> tag where text resides have MsoNormal class and ecxMsoNormal applied so I tried to put some CSS specifically for that in my <head> section. But it still appears centered. When email is opened in gmail or hotmail through Firefox or Chrome, text is properly aligned - left. Even if I use Windows mobile phone and IE to look at it, text is left aligned as it should be...so I will freak out without a proper fix. Please help.Thanks.

bratimir, 4 years ago

Here is the actual code from other version of email I did (not using li tags) but problem remained the same as when using <li>'s:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>invitation</title>
</head>

<body>
<table align="center" width="600" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr >
    <td cellpadding="0" cellspacing="0"><img src="slika.jpg" alt="daj neki tekst!"  style="margin:0; padding:0; outline:0; border:0; display:block;" /></td>
    </tr>
 
  <tr>
    <td>
      <table width="600" border="0" cellspacing="0" cellpadding="0" >
       <tr>
 
        <td height="30" width="599" colspan="3"></td>

  </tr>
        <tr>
          <td width="35">&nbsp;</td>
          <td width="550">
          <table width="550" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="269"><table width="270" border="0" cellspacing="0" cellpadding="0" valign="top">
                
                
                <tr >
                  <td><table width="269" border="0" cellspacing="0" cellpadding="0" valign="top">
                    <tr>
                      <td width="12" valign="top"><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em; "><img src="crtica_plava.jpg" border="0" style="float:left; margin:0; padding:0;"></span></td>
                      <td width="269"><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; font-weight:bolder;line-height: 1.2em; ">meet key Ministers and influence business policies </span><a target="_blank" href=#"><span style="font-family: Arial, Helvetica, sans-serif; color: #6e6a6a; font-size: 11px; line-height: 1.2em;">@ Business Luncheons, Breakfasts & Roundtables</span></a></td>
                    </tr>
                    <tr>
                      <td colspan="2" valign="top"><img src="spacer.jpg" style="display: block;" width="1" height="10" alt="" /></td>
                    </tr>
                    <tr>     
                      <td width="12" valign="top"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 1.2em;"><img src="crtica_plava.jpg" border="0" style="float:left; margin:0; padding:0;"></span></td>
                      <td width="269"><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em; font-weight:bolder">help decrease the compliance burden </span><a target="_blank" href="#"><span style="font-family: Arial, Helvetica, sans-serif;font-size:11px;line-height:1.2em; color: #6e6a6a; ">@ Panel Discussions with midlevel Government officials and Committee activities</span></td>
                    </tr>
                    <tr>
                      <td colspan="2" valign="top"><img src="spacer.jpg" style="display: block;" width="1" height="11" alt="" /></td>
                    </tr>
                     <tr>
                      <td width="12" valign="top"><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em; "><img src="crtica_plava.jpg" border="0" style="float:left; margin:0; padding:0;"></span></td>
                      <td width="269"><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em;font-weight:bolder ">boost the visibility of your company/staff as source of expertise </span><a target="_blank" href="#"><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em;color: #6e6a6a; ">@ Committee events, Seminars/Briefing sessions</span></a><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em;color: #6e6a6a; ">, <a target="_blank" href="#">Perspective magazine interviews and articles</a></span></td>
                    </tr>
                    <tr>
                      <td colspan="2" valign="top"><img src="spacer.jpg" style="display: block;" width="1" height="11" alt="" /></td>
                    </tr>
                    
                     <tr>
                      <td width="12" valign="top"><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em; "><img src="crtica_plava.jpg" border="0" style="float:left; margin:0; padding:0;"></span></td>
                      <td width="269"><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em; font-weight:bolder;">meet your business peers, discuss common issues</span><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em; "> and learn from each other @ focused meetings, briefing sessions</span></td>
                    </tr>
                    <tr>
                      <td colspan="2" valign="top"><img src="spacer.jpg" style="display: block;" width="1" height="10" alt="" /></td>
                    </tr>
                    
                     <tr>
                      <td width="12" valign="top"><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em; "><img src="crtica_plava.jpg" border="0" style="float:left; margin:0; padding:0;"></span></td>
                      <td width="269"><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em; ">learn from the best @ Academia (Member 2 Member)</span></td>
                    </tr>
                    
                    </table></td>
                </tr>
               
               
              </table></td>
            
           <!--desna tabela-->
           
           <td width="269" valign="top"><table width="269" border="0" cellspacing="0" cellpadding="0" valign="top">
                
              
                <tr>
                  <td width="269" valign="top"><table width="269" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="12" valign="top"><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em; "><img src="crtica_plava.jpg" border="0" style="float:left; margin:0; padding:0;"></span></td>
                      <td width="269"><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em; font-weight:bolder;">strenghten your business network and develop your business</span><a target="_blank" href="#"><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em; "> @ Cocktails</span></a><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em;"> , B2B forums and targeted seminars </span><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em; "><a target="_blank" href="#">+ high level events</a>, network </span><span style="font-weight:bold; font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em;">online</span><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em; ">, promote your services, disscus and post your opinion </span><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em; "><a target="_blank" href="#">@ LinkedIN group, Twitter, etc.</a></span></td>
                    </tr>
                    <tr>
                      <td colspan="2" valign="top"><img src="spacer.jpg" style="display: block;" width="1" height="8" alt="" /></td>
                    </tr>
                    <tr>
                      <td width="12" valign="top"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 1.2em; "><img src="crtica_plava.jpg" border="0" style="float:left; margin:0; padding:0;"></span></td>
                      <td width="269"><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em; ">position your company as a leader in Corporate Social Responsibility</span><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em; "> through CSR news </span><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em; "><a target="_blank" href="# ">+ member sucess stories @ the website</a></span></td>
                    </tr>
                    <tr>
                      <td colspan="2" valign="top"><img src="spacer.jpg" style="display: block;" width="1" height="8" alt="" /></td>
                    </tr>
                    
                     <tr>
                      <td width="12" valign="top"><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em; "><img src="crtica_plava.jpg" border="0" style="float:left; margin:0; padding:0;"></span></td>
                      <td width="269"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 1.2em; ">meet potential investors in Serbia</span><span style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 1.2em; "> @ our carefully chosen investment promotion activities</span></td>
                    </tr>
                    <tr>
                      <td colspan="2" valign="top"><img src="spacer.jpg" style="display: block;" width="1" height="8" alt="" /></td>
                    </tr>
                    <tr>
                      <td width="12" valign="top"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 1.2em; "><img src="crtica_plava.jpg" border="0" style="float:left; margin:0; padding:0;"></span></td>
                      <td width="269"><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em; ">relax & mingle</span><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em; "> in good company </span><span style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 1.2em; "><a target="_blank" href="#">@  family events</a></span><span style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 1.2em; ">, cocktails, theme parties in good company</span></td>
                    </tr>
                    <tr>
                      <td colspan="2" valign="top"><img src="spacer.jpg" style="display: block;" width="1" height="8" alt="" /></td>
                    </tr>
                    
                     <tr>
                      <td width="12" valign="top"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 1.2em; "><img src="crtica_plava.jpg" border="0" style="float:left; margin:0; padding:0;"></span></td>
                      <td width="269"><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em; ">apply</span><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em; "> for the business</span><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em; "> visa facilitation</span><span style="font-family: Arial, Helvetica, sans-serif;  font-size: 11px; line-height: 1.2em; "> service with Consular section of the US Embassy</span></td>
                    </tr>
                   
                    
                    
                    
                    </table></td>
                </tr>
               
               
              </table></td>
                    </tr>
                    </table></td>
            </tr>
          </table></td>
        </tr>
      
   
  <tr>
    <td ><table align="center" width="600" cellpadding="0" cellspacing="0"  bgcolor="#FFFFFF">
      <tr>
        <td colspan="3"><img src="spacer.jpg" style="display: block;" width="1" height="30" alt="" /></td>
      </tr>
      <tr>
        <td  width="600"colspan="3"><img src="slika_dole.png" width="600"  height="30" style="margin:0; padding:0; border:0; outline:0;" /></td>
      </tr>
       <tr>
        <td height="30" colspan="3"><img src="spacer.jpg" style="display: block;" width="1" height="30" alt="" /></td>
      </tr>
      <tr>
        <td width="25"></td>
        <td>
        <span style="text-align:center; padding:0 0 20px 0;margin:0 0 50px 0; font-size:9px;font-family: Arial, Helvetica, sans-serif;" >Smiljanićeva 24/I,  30 88 132, 34 46 437; Fax: 30 88 922; </span>
       </td>
        <td width="15"></td>
      </tr>
       <tr>
        <td colspan="3"><img src="spacer.jpg" style="display: block;" width="1" height="8" alt="" /></td>
      </tr>
    </table></td>
  </tr>   
  
    </table></td>
  </tr>

</table>
</body>
</html>
bratimir, 4 years ago

If that may help troubleshooting, when I am sending this email I am using MS Outlook because that is the actual client request.

Step, 4 years ago

Within the <td> you should add the style command <td align="left" style="text-align:left;">
That should hopefully fix your problem :)

Cheers


A email developer obsessed with gym, coding, design, music, and other things he doesn't understand. Twitter - http://twitter.com/#!/stephenho1mes
dedra dedra, 4 years ago

Hi, you do not need add one of align="left" or style="text-align:left", if you add to begin of your CSS style definition block to "reset CSS" styles like these lines:

body {margin-top:8px; margin-bottom:7px; padding:0px; mso-margin-top-alt:0px; mso-margin-bottom-alt:0px; mso-padding-alt:0px 0px 0px 0px;}
p, div, table, caption, tbody, tfoot, thead, tr, th, td {margin:0px; padding:0px; text-align:left;}
p, div, span, table, caption, tbody, tfoot, thead, tr, th, td {font-family:Verdana,sans-serif !important; font-size:12px;}
p {margin-bottom:1em;}

For your information:
- first line set default margins for whole page, bottom is 1px less, because CM add at bottom his 1px blank square image for monitoring opens
- we use these fonts (families) and size as default for our campaigns, you can use another fonts - it's your choice
- do remeber, that in layout do not exist only tables (table, caption, tbody, tfoot, thead, tr, th, td), but paragraphs (p, div, span)

And sure, test, test, test...

Enjoy

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<td width="25%"></td>
<td width="50%" style="padding-left:5px;">
    <!-- your mailer code start here with fixed width for center alignment in IE gmail and hotmail-->
</td>
<td width="24%"></td>
</table>

JohnP JohnP, 3 years ago

You should always use the html align="left|center|right" for horizontal alignment and valign="top|middle|bottom" for vertical. These are 100% supported (in table cells) across all email clients.

Don't waste your time with CSS alignment techniques, align="left" on your table cell is all you need in this case.

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