How to provide padding/margin on a text on top of an image in Outlook 2010, Outlook 2007, Outlook 2013?

Question

I am trying to add a text on top of an image as below. It is working on all email clients except Outlook 2010, Outlook 2007, Outlook 2013. Padding is ignored for all three. I have looked everywhere tried everything :( Please help me in getting the text on top of the image such that it has 147px left and 107px top padding/margin/?

Solved it finally as below:

 <tr>
        <td background="yourimage.gif" bgcolor="#c0393f" width="600" height="240" valign="top" style="background:url('yourimage.gif')">
            <!-- M$ hack for table background images -->
            <xsl:comment>
                <![CDATA[[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" color="#c0393f" style="width:600px;height:240px;">
                    <v:fill type="frame" src="yourimage.gif" />

                    <v:textbox inset="107px,147px,0px,0px" id="headerTitle">
                    <![endif]]]>
            </xsl:comment>
            <font style="color:#c9be8a;font-weight:700;font-size:19px;width:300px;text-transform:uppercase;">
                <div style="color:#c9be8a;font-weight:700;font-size:19px;width:300px;text-transform:uppercase;padding:147px 0px 0px 107px;">
                    Your Text
                </div>
            </font>
           <xsl:comment>
                <![CDATA[[if gte mso 9]>
                    </v:textbox>
                    </v:rect>
                    <![endif]]]>
            </xsl:comment>
        </td>
    </tr>

Answer 1

div padding is ignored in outlook. Your best bet is to insert a table inside the div and then pad the TDs inside of it.

There were some other errors in your code, that i made changes to in the below, but this works in Outlook. I would also recommend using padding-top, etc instead of just padding because i have found it is more widely accepted and consistent across email clients.

     <table width="640" height="240">
<tr>
<td background="http://www.swagatobhatta.info/emailtest/header.gif" width="600" height="240" valign="top">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:240px;">
    <v:fill type="tile" src="http://www.swagatobhatta.info/emailtest/header.gif" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div>
   <table width="400" align="right" cellpadding="0" cellspacing="0" border="0" style="color:#c9be8a;font-weight:700;font-size:19px;width:400px;">
        <tr>
        <td style="text-transform:uppercase;padding-top:107px; padding-left:147px;">TEST CONTENTS TEST CONTENTS TEST CONTENTS</td></tr>
        </table></div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>
                        </tr>
                    </table>