Hi all!

I guess this is been discussed a lot but I still can't find a solution (I'm more a designer than programmer).
So my problem is a classic: Outlook.

I'm programming an email and it should look like this:ok

But in Outlook looks like this:sample
So basically valign (I want the content in the middle) is not working... and also the images on the sides of the frame are also weird as you can see the background (even if I set the width to 100%).

This is the code:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td width="25" height="25" bgcolor="#152A69">&nbsp;</td>
                <td height="25" bgcolor="#152A69">&nbsp;</td>
                <td width="25" height="25" bgcolor="#00C6C5">&nbsp;</td>
              </tr>
              <tr>
                <td width="25" height="100" bgcolor="#152A69"><img src="http://patriciaperibanez.com/online/wizink/cards/promo5/images/izq.gif" width="100%" height="100" style="display:block;"></td>
                <td rowspan="2" align="center" valign="middle">
                <table width="57%" height="174" border="0" cellspacing="0" cellpadding="100" align="left" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" class="regaloTexto">
              <tbody>
                <tr>
                  <td valign="middle" style="font-family: Arial, Helvetica, sans-serif; font-size: 22px; color: #152A69; padding:20px 25px 0 25px; text-align: right;" class="texto"><strong>Paga en noviembre al menos 50€ en gasolineras y <font color="#00C6C5">consigue tu regalo</font></strong></td>
                </tr>
              </tbody>
            </table>
            <table width="42%" height="174" border="0" cellspacing="0" cellpadding="0" align="right" style="border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" class="regalo">
              <tbody>
                <tr>
                  <td align="left" valign="middle"><img src="http://patriciaperibanez.com/online/wizink/cards/promo5/images/regalo.gif" width="189" height="174" alt="Regalo" style="display:block;" class="regaloIcon"></td>
                </tr>
              </tbody>
            </table>
                </td>
                <td width="25" bgcolor="#00C6C5"></td>
              </tr>
              <tr>
                <td width="25" bgcolor="#152A69"></td>
                <td valign="bottom" bgcolor="#00C6C5"><img src="http://patriciaperibanez.com/online/wizink/cards/promo5/images/der.gif" width="100%" height="100" style="display:block;"></td>
              </tr>
              <tr>
                <td width="25" height="25" bgcolor="#152A69">&nbsp;</td>
                <td height="25" bgcolor="#00C6C5">&nbsp;</td>
                <td width="25" height="25" bgcolor="#00C6C5">&nbsp;</td>
              </tr>
            </table>

I have tried also with <!--[if mso]> but I don't think I'm doing it right as it appears what I wrote into the <!--[if mso]> code but also the actual code! ... I don't really understand how that works...

Any help please?

Thanks!!