Outlook background hack: centering text

Hey all,

I've been toying with this for the last hour or so, and haven't been able to figure it out. What am I missing that is keeping this text from center-aligning in the v:shape?

<table border="0" bgcolor="#329eb6" cellpadding="0" cellspacing="0">
            <tr>
            <td align="center" valign="top" height="126" style="padding:0;text-align:center;margin:0;height:126px;background-color:#329eb6;background:url(http://mktg.weddingwire.com/weddingwirepros/2011/December/holiday/bottom.jpg);background-repeat:no-repeat;" background="http://mktg.weddingwire.com/weddingwirepros/2011/December/holiday/bottom.jpg"><!--[if gte mso 9]>
         <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:126px; width:675px; top:0px; left:0px; border:0; z-index:1;' src="http://mktg.weddingwire.com/weddingwirepros/2011/December/holiday/bottom.jpg"/>
        <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:126px; width:675px; top:5px;left:8px;border:0;z-index:2;'>
        <div align="center" style="width:675px;text-align:center;">
        <![endif]-->
            <p style="width:675px;padding:0;margin:0;color:#FFFFFF;font-family:Arial, Helvetica, sans-serif;font-size:16px;text-shadow:1px 1px 2px #161616;">From ours to yours, sending warm wishes for good health <br />
and much happiness this holiday season.</p><!--[if gte mso 9]>
        </div>
        </v:shape>
        <![endif]-->
</td>
            </tr>
            </table>

Thanks for any help you might be able to offer!

Matt

gavbridger, 4 years ago
thatscool87 :

Hey all,

I've been toying with this for the last hour or so, and haven't been able to figure it out. What am I missing that is keeping this text from center-aligning in the v:shape?

I was having the same trouble. I tried adding text-align:center to everything, but this didn't work.

In the end, wrapping the content of the td in good old-fashioned <center> tags did the job for Outlook 2007, between the two sections of ie conditional comments (I don't have OL2010 to check if it's worked on that client).

However, can anyone advise if it's possible to vertically align the content in this cell? valign and the style of vertical-align:middle on the td, v:rect and v:shape don't have any effect in Outlook 2007.

thatscool87, 4 years ago

I just replaced the "div" in the Outlook conditional statement with a table, and it seems to have done the trick, I think!

gavbridger, 4 years ago

Yep, that works for me. I've replaced my <center> tags with a new table the same height as the holding td.

Thanks thatscool87. And thanks CampaignMonitor for this excellent tip!

roshodgekiss roshodgekiss, 4 years ago

Thanks to you guys - keep up the awesomeness and have a great Christmas ahead :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

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