Outlook shunting tables to the left

Hi all,

I have a responsive email im coding which has three nested tables which contain an image in each. For most email clients the tables are centered as they should be and look great but in outlook the images are slightly of center to the left.

Is there something in outlook which im missing?

below is my code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Connect with us!</title>
        <style type="text/css">
        
        @import url(http://fonts.googleapis.com/css?family=Varela+Round);
        <!--Google fonts always have to be the first thing coded-->
        
        @media screen{
            font-family: 'Varela Round', arial, sans-serif;
        }
        
        body { margin: 0; padding: 0; border: 0; font-family: arial, sans-serif;}
        
        .appleLinks  {color: #ffffff; text-decoration: none;}
        
        
        @media only screen and (max-width: 640px) {
            
            body { font-family: 'Varela Round', arial, sans-serif;}
            
            table.container { width: 480px !important; }

            td.type-area { padding: 0px 0px 0px 0px; width: 480;}
            
            td.type-area h1 { font-size:26px !important;}
            td.type-area h2 { font-size:18px !important;}
            
            tr.green-section { height: 160px !important;}
            
            table.box_1 { width: 150px !important; }
            table.box_1 td { padding: 10px 0px 15px 15px !important; }
            table.box_1 img { width: 120px; height: 120px !important;}
            
            table.box_2 { width: 150px !important; }
            table.box_2 td { padding: 10px 0px 15px 0px !important; }
            table.box_2 img { width: 120px; height: 120px !important;}
            
            table.box_3 { width: 150px !important; }
            table.box_3 td { padding: 10px 15px 15px 0px !important; }
            table.box_3 img { width: 120px; height: 120px !important;}
            
            table.footer-left { width: 100% !important; text-align:center !important;}
            table.footer-left td { padding: 20px 0px 0px 0px !important;}
            table.footer-right { width: 100% !important;}
            table.footer-right td { text-align:center !important;}
            
        }
        
        @media only screen and (max-width: 490px) {
            
            body { font-family: 'Varela Round', arial, sans-serif;}
            
            td.type-area h1 { font-size:22px !important; padding: 20px 0px 0px 0px;}
            td.type-area h2 { font-size:18px !important; padding: 20px; 0px 0px 0px;}
            
            table.container { width: 100% !important; }
            
            
            table.box_1 { width: 100% !important; }
            table.box_1 td { padding: 10px 50px 0px 50px !important; }
            table.box_1 img { width: 100px; height: 100px !important;}
            
            table.box_2 { width: 100% !important; }
            table.box_2 td { padding: 10px 50px 0px 50px !important; }
            table.box_2 img { width: 100px; height: 100px !important;}
            
            table.box_3 { width: 100% !important; }
            table.box_3 td { padding: 10px 50px 0px 50px !important; }
            table.box_3 img { width: 100px; height: 100px !important;}
            
            table.footer-left { width: 100% !important; text-align:center !important;}
            table.footer-left td { padding: 20px 0px 0px 0px !important;}
            table.footer-right { width: 100% !important;}
            table.footer-right td { text-align:center !important;}
            
            
            
        }
        
        </style>
    </head>    
    <body bgcolor="#e6f5fd">
    
    <div style="font-size:1px; color:#efe1b0; display:none;">Connect with us!</div>
    <!--The text above is essentially hidden but has a purpose of showing as the preview text-->
    
        <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e6f5fd">
        <tr>
            <td>
       
            
            
<table class="container" width="600" align="center" border="0" cellspacing="0" cellpadding="0">
      <tr bgcolor="#dd6258" align="center">
<td class="type-area" style=" padding: 0px 0px 0px 0px;">
<h1 style="margin: 40px 60px 0px 60px; font-weight: normal; font-size:30px; color:#ffffff;">For all of our latest news, work and inspiration <strong style="color:#f7d186;">connect with us!</strong></h1>

</td></tr>      
<tr>
<td class="header" align="center" style="background-color:#dd6258">
<img src="http://www.uploadlibrary.com/Direct_Approach/DA-002/icons.jpg" width="100%" height="auto" alt="icons image"/>
</td></tr>



<tr class="green-section" bgcolor="#dd6258" valign="top" height="200">
  <td>
  
<table width="190" border="0" align="left" cellpadding="0" cellspacing="0" class="box_1" style="margin-right:14px; font-family:Arial, sans-serif; font-size:12px; color:#cae4f0; text-align:center;">
    
  <tr><td style="padding: 0px 0px 10px 0px;"><a href="http://www.linkedin.com/company/2941934?trk=tyah"><p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><img src="http://www.uploadlibrary.com/Direct_Approach/DA-002/lin-circle.gif" alt="LinkedIn" width="150" height="150" border="0" style="margin-bottom:10px;"/></p></a></td></tr>

</table>

<table width="190" border="0" align="left" cellpadding="0" cellspacing="0" class="box_2" style="margin-right:14px; font-family:Arial, sans-serif; font-size:12px; color:#cae4f0; text-align:center;">

<tr><td style="padding: 0px 0px 10px 0px;"><a href="https://www.facebook.com/DirectApproachDesignMarketing"><p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><img src="http://www.uploadlibrary.com/Direct_Approach/DA-002/fb-circle.gif" alt="Facebook" width="150" height="150" border="0" style="margin-bottom:10px;"/></p></a></td></tr>

</table>

<table width="190" border="0" align="left" cellpadding="00" cellspacing="0" class="box_3" style="font-family:Arial, sans-serif; font-size:12px; color:#cae4f0; text-align:center;">

<tr><td style="padding: 0px 0px 10px 0px;"><a href="https://twitter.com/Direct_Approach"><p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><img src="http://www.uploadlibrary.com/Direct_Approach/DA-002/tw-circle.gif" alt="Twitter" width="150" height="150" border="0" style="margin-bottom:10px;"/></p></a></td></tr>

</table>

</td></tr> 

<tr bgcolor="#dd6258" align="center" style="padding:0px 0px 10px 0px;">
  <td class="type-area" style=" padding: 0px 0px 0px 0px;"><h2 style="font-weight: normal; font-size:20px; color:#ffffff;">Or you can visit our brand new website!</h2></td>
</tr>
<tr bgcolor="#dd6258" align="center" style="padding:0px 0px 10px 0px;">
<td height="10" class="type-area" style=" padding: 0px 0px 0px 0px;"></td></tr>

<tr bgcolor="#dd6258" align="center" style="padding:0px 0px 10px 0px;">
<td class="type-area" style="margin: 0px 0px 40px 0px;">
<div><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.directapproachdesign.co.uk" style="height:40px;v-text-anchor:middle;width:150px;" arcsize="63%" stroke="f" fillcolor="#172f3b">
    <w:anchorlock/>
    <center>
  <![endif]-->
      <a href="http://www.directapproachdesign.co.uk"
style="background-color:#172f3b;border-radius:25px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;">Click here!</a>
  <!--[if mso]>
    </center>
  </v:roundrect>
<![endif]--></div>
</td></tr> 

<tr bgcolor="#dd6258"><td height="50px"></td></tr>

<tr bgcolor="#172f3b">
  
  <td>
    
  <table class="footer-left" align="left">
  <tr>
    <td style="padding:20px;"><a href="http://www.directapproachdesign.co.uk"><img src="http://www.uploadlibrary.com/Direct_Approach/DA-002/logo-ret.gif" alt="Direct Approach Logo" width="48" height="73" border="0"/></a></td></tr>
  </table>
    
  <table class="footer-right" align="right">
  <tr><td style="font-family: Arial, sans-serif; color:#FFFFFF; font-size:11px; text-align:right; width:400px; padding:20px;">
    Tel: <span class="appleLinks">01733 235 234</span><br>
    Email: <a href="mailto:hello@dadm.co.uk" style="color:#ffffff;">hello@dadm.co.uk</a><br>
    Online: <a href="http://www.directapproachdesign.co.uk" style="color:#ffffff;">directapproachdesign.co.uk</a><br>
  <a href="http://{~customDomain~}/_act/get_rcr.php?{~mailId~}" style="color:#ffffff;">Click here to unsubscribe</a> / <a href="http://{~customDomain~}/_act/get_send_to_friend.php?{~mailId~}" style="color:#ffffff;">Share this email</a> / 
  <a href="http://{~customDomain~}/interface/external_view_email.php?{~mailId~}" style="color:#ffffff;">View online</a><br>
    
  <a href="https://www.facebook.com/DirectApproachDesignMarketing"><img src="http://www.uploadlibrary.com/Direct_Approach/DA-002/fb-ret.gif" alt="Facebook" width="21" height="21" border="0" style="margin-top:5px"/></a>
    
  <a href="http://www.linkedin.com/company/2941934?trk=tyah"><img src="http://www.uploadlibrary.com/Direct_Approach/DA-002/in-ret.gif" alt="LinkedIn" width="21" height="21" border="0"/></a>
    
  <a href="https://twitter.com/Direct_Approach"><img src="http://www.uploadlibrary.com/Direct_Approach/DA-002/tw-ret.gif" alt="Twitter" width="21" height="21" border="0"/></a>
    
  </td></tr>
  </table>
    
  </td>
  
</tr>                   
                        

</table>
            
           
           </td>
       </tr>     
       </table>     
    </body>    
</html>

Here is what the email should look like

http://www.directapproachdesign.co.uk/images/ok.jpg

Here is the issue (white circles)

http://www.directapproachdesign.co.uk/images/issue.jpg

davidaf davidaf, 2 years ago

Hi there!

I did some testing with your code this morning. It does appear that Outlook is simply ignoring any attempts to center those tables, as well as margin and padding that I try to add. Although Outlook does generally support margins, it appears that it will ignore it when the table is inline. In any case, I was able to get decent results if I used conditional comments to apply a wider width to the first two tables:

<!--[if gte mso 9]>
      <style type="text/css">
      .box_1  {width:200px !important;}
      .box_2  {width:200px !important;}
      </style>
<![endif]-->

The result looked pretty close to me, although you might want to finagle with the exact widths to get it perfect. I hope that helps, designerste!


The Campaign Monitor Blog – HTML email smarts to go with your good looks
designerste, 2 years ago

Hi  davidaf,

Ill try adding that code to my email and see what happens, many thanks for your help.

Steve

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