How can I produce this effect within the outlook client? - html

Question

I've created a mailer view in rails, which displays great on all clients except outlook. The limiting factor is the lack of the 'position' attribute.
I'm trying to place an image on top of a table row, so that the top and bottom edges sit above/below the row. I've achieved this for other email clients, by putting the image in another row above this, making the position absolute, and giving it a negative top margin. I can then bring the image down and overlap the bottom row as much as I like by adjusting the top margin value. (See Code)
<tr>
<td>
<%= image_tag(attachments['logo.png'].url, style:"text-
align:left;height:100px; width:100px; margin:-30px 10px 10px 10px;
position: absolute") %>
</td>
</tr>
<tr>
<td style="text-align: left; padding-left: 125px;">
Some Text
</td>
</tr>
position: absolute does not work in outlook, what would be a good alternative to help me achieve this?
Thanks!

Answer 1

You won't be able to achieve this in the same way as position:absolute.
Your alternatives are:
Split the image up into three and have each slice in each of the three sections.
Make the three row sections into a background image and place the image in as normal.
I understand neither of these are ideal but you're limited with Outlook and the usual margin and position tricks won't work.
With the options I've suggested, rather than restructuring your code, you could simply add a new block just for Outlook, using Outlook specific conditional statements:
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>Outlook content</td>
</tr>
</table>
<![endif]-->
<!--[if !mso]><!-- -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>All other clients</td>
</tr>
</table>
<!--<![endif]-->