Problems with Outlook
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"> </td>
<td height="25" bgcolor="#152A69"> </td>
<td width="25" height="25" bgcolor="#00C6C5"> </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"> </td>
<td height="25" bgcolor="#00C6C5"> </td>
<td width="25" height="25" bgcolor="#00C6C5"> </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!!
you'll want to put height="174" on the <td> with the text in it. the height is respected on the td, not the table.
So I have to put exactly the height of the frame then?
You need to input height attribute in the "valign" td for it to work in Outlook.
I did all that and still not working in Outlook 2013 and 2016...
I have discovered that it is easier to use styles <!--[if gte mso 9]> so all is solved at once.