Can't get main table horizontally centred in Outlook 2007, 2010, 2013

I've got a pretty classic EDM template I'm using [based on http://htmlemailboilerplate.com/], with a 100% grey TD for the background and then a 600-pixel white table horizontally centred inside that.

The 600-pixel white table is not centred within the grey background table in

* Outlook 2007
* Outlook 2010
* Outlook 2013

though it works fine in all the other Outlooks, Lotus Notes etc., and even in Outlook 2011.

* The single TD in the grey background table has align="center"
* The 600-pixel white table directly inside that TD also has align="center"

Any ideas gratefully received.

Alex I., 2 years ago

Hi!

If you post your code I'll fix this up for you.

Cheers,
Alex.

JohnP JohnP, 2 years ago

Try one of these to get you started.

JohnHorner JohnHorner, 2 years ago

Below is some abbreviated code to display the problem.

Here's a snapshot of what it looks like from Litmus, with the problem clients highlighted.

http://i.imgur.com/2cS5552.png

It has been processed through CampaignMonitor's "bring my CSS inline" option.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> Example code </title>
</head>
<body style="width:100% !important;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;">
<table cellpadding="0" cellspacing="0" border="0" id="bl_backgroundtable" style="margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;width:100% !important;line-height:100% !important;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
    <tr>
        <td bgcolor="#E4E6E7" align="center" valign="top" style="border-collapse:collapse;"> 
        <p>
            This is my outer grey table. 
        </p>
        <table width="620" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#ffffff" style="width:620px !important;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
            <tr>
                <td width="620" valign="top" align="center" style="width:620px !important;border-collapse:collapse;"> 
                <p>
                    This is my inner white table. 
                </p>
                </td>
            </tr>
        </table>
        <br />
        </td>
    </tr>
</table>
</body>
</html>
Tweedskin Tweedskin, 2 years ago

Hi John,

I removed all of the margin and padding styles from your main table and also the width:620px !important; from your inside table and that seems to have solved the issue. Don't know what your CSS was (you said the above code had been automatically inlined?) so you may need to look at removing some of the stuff from there.

Litmus result here - https://litmus.com/pub/5b13301 and code below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> Example code </title>
</head>
<body style="width:100% !important;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;">
<table cellpadding="0" cellspacing="0" border="0" id="bl_backgroundtable" width="100%" style="width:100% !important;line-height:100% !important;border-collapse:collapse;mso-table-lspace:0pt;">
    <tr>
        <td bgcolor="#E4E6E7" align="center" valign="top" style="border-collapse:collapse;"> 
        <p>
            This is my outer grey table. 
        </p>
        <table width="620" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#ffffff" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
            <tr>
                <td width="620" valign="top" align="center" style="border-collapse:collapse;"> 
                <p>
                    This is my inner white table. 
                </p>
                </td>
            </tr>
        </table>
        <br />
        </td>
    </tr>
</table>
</body>
</html>

Join 150,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