HTML email signature returning .png file on Outloo

Question

I'm creating some email signatures for my company and I've come across a little problem.

I've got it working with Outlook fine (when I send to a user with Outlook the signature looks perfect), however when they reply the signature text is turned into a .png file, while the background image is shown still.

I'm not sure why Outlook is turning it into a .png?

Has anyone experienced this ?

IMAGES.

1. This is how the signature should look, and does look in Outlook & Mac mail.

2. This is what happens when the Outlook user responds to my email. It keeps the sig and garbles the text by turning it into a .png as shown in the next image.

3. This is the signature turned into a .png when the Outlook user responds.

<br />
<br />
<table width="524" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
    <td style="width: 524px; height: 244px; background-image: url('http://photography.kastnerandpartners.com.au/email/rb_guy.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; width: 524px; height: 244px; top: 0; left: 0; border: 0; z-index: 1;' src="http://photography.kastnerandpartners.com.au/email/rb_guy.jpg" />
        <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 524px; height: 244px; top: 14; left: 40; border: 0; z-index: 2;'>
        <div>
        <![endif]-->
        <table width="524"; height: "244"; border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
          <tr>
            <td height="244" align="left top" valign="top">

                <p style="z-index:2; padding: 14px 0 0 40px; line-height: 18px; font-family: 'Courier New', Courier, monospace; font-weight:800; font-size: 12px; color: #999999;">
            <br />
            <img src="http://photography.kastnerandpartners.com.au/email/KP-logo.png"><br />
            <span style="-webkit-text-size-adjust:none; font-size:12px;"><strong style="color: #333333">Michael Birchall</strong> | Art Director | <a href="http://kastnerandpartners.com.au" title="kastnerandpartners.com.au" style="color: #666666; text-decoration: none; border-bottom: 1px #cccccc dotted;">kastnerandpartners.com.au</a></span><br />            
            Level 2,  137 Pyrmont St, Pyrmont NSW 2009, Australia<br />
            t [phone]  | m [phone]<br />
            e <a href="mailto:[e-mail]" style="color: #999999;">[e-mail]</a><br />

                </p>         
            </td>
          </tr>
        </table>
        <!--[if gte mso 9]>
        </div>
        </v:shape>
        <![endif]-->
    </td>
</tr>
</table>

Answer 1

Incase anyone is wondering in the future.. I solved this problem by simply placing the images in a table and table cells.

Outlook renders the signature fine now (well Outlook 2007?) - Lotus notes on the other hand has a panic attack and renders everything with red x's.

I'm having a problem with Outlook 2010 - It's putting a gap in between the first and second ... could anyone see what's going wrong with this code?

<table id="Table_01" width="524" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
  <tr>
    <td colspan="3" style="padding:0;" cellpadding="0" cellspacing="0"><img src="http://photography.kastnerandpartners.com.au/email/bell/bell_01.png" width="524" height="19" alt="" style="background-color:#ffbb39;"></td>
  </tr>
  <tr>
    <td rowspan="2" style="padding:0;" cellpadding="0" cellspacing="0"><img src="http://photography.kastnerandpartners.com.au/email/bell/bell_02.png" width="18" height="151" alt="" style="background-color:#ffbb39;"></td>
    <td width="488" align="left top" valign="top" alt="" style="background-color:#fff; padding: 10px 0 0 25px;" cellpadding="0" cellspacing="0">
    <p style="padding: 0; line-height: 18px; font-family: 'Courier New', Courier, monospace; font-weight:800; font-size: 12px; color: #999999;">
    <img src="http://photography.kastnerandpartners.com.au/email/KP-logo.png"><br />
        <span style="-webkit-text-size-adjust:none; font-size:12px;"><strong style="-webkit-text-size-adjust:none; font-size:12px; color: #333333;">Michael Birchall</strong> | Art Director | <a href="http://kastnerandpartners.com.au" title="kastnerandpartners.com.au" style="color: #666666; text-decoration: none; border-bottom: 1px #cccccc dotted;">kastnerandpartners.com.au</a></span><br />
        <span style="-webkit-text-size-adjust:none; font-size:12px;"><strong style="color: #999999">Level 2,  137 Pyrmont St, Pyrmont NSW 2009, Australia<br />
        t [phone] | m [phone]<br />
        e <a href="mailto:[e-mail]" style="color: #999999;">[e-mail]</a><br />
        </strong></span> </p></td>
    <td rowspan="2" style="padding: 0;" cellpadding="0" cellspacing="0"><img src="http://photography.kastnerandpartners.com.au/email/bell/bell_04.png" width="18" height="151" alt="" style="background-color:#ffbb39;"></td>
  </tr>
  <tr>
    <td valign="bottom" style="padding: 0;" cellpadding="0" cellspacing="0"><img src="http://photography.kastnerandpartners.com.au/email/bell/bell_05.png" width="488" height="18" alt="" style="background-color:#ffbb39;"></td>
  </tr>
  <tr>
    <td colspan="3" style="padding: 0;" cellpadding="0" cellspacing="0">
    <img src="http://photography.kastnerandpartners.com.au/email/bell/bell_06.png" width="524" height="74" alt="" style="background-color:#ffbb39;">

      </td>
  </tr>
</table>

Answer 2

The VML method is only used for background images when sending HTML emails from a deployment service such as Campaign Monitor, MailChimp, etc. When sending an email from within Outlook, the program itself will add its own code to your signature, which will remove/strip the coding you've created (Including the VML code).

To top it off, Outlook is notorious for messing with the HTML of any email upon reply, so there's no way to guarantee what you've sent will remain intact.