HTML Email Office 365 (OWA) Table Rendering Error - html

Question

I am creating an email signature which is made up of a sliced image. Here is how the image should fit together:
Below is the code:
<table width="406" height="136" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td colspan="4" height="82">
<img src="img/Rectangle_1.png" width="406" height="82" alt="" style="display: block;"></td>
</tr>
<tr>
<td rowspan="2" height="54">
<img src="img/Rectangle_2.png" width="25" height="54" alt="" style="display: block;"></td>
<td height="40">
<img src="img/Rectangle_3.png" width="134" height="40" alt="" style="display: block; border:0; outline: none; text-decoration: none;"></td>
<td height="40">
<img src="img/Rectangle_4.png" width="125" height="40" alt="" style="display: block; border:0; outline: none; text-decoration: none;"></td>
<td rowspan="2" height="54">
<img src="img/Rectangle_5.png" width="122" height="54" alt="" style="display: block;"></td>
</tr>
<tr>
<td colspan="2" height="14" style="line-height: 14px;">
<img src="img/Rectangle_6.png" width="259" height="14" alt="" style="display: block;"></td>
</tr>
</table>
This renders perfectly in nearly all mail clients apart from Office365 (in any browser). View screenshots for all clients/browsers https://www.emailonacid.com/app/acidtest/viewresult/tUjH3Kk7JSzaD5D0F6X2agbPFHRkUvVfkGetyDv2hMgll. The below screenshot shows Office365 in IE11.
I can not seem to fix this whitespace issue nor the outline around the linked images. I have tried both the fixes listed here http://www.emailonacid.com/blog/details/C13/two_fixes_for_image_spacing_in_outlook_web_app_owa but neither of them have worked. align="left" fixed it in Office365 in both Chrome and Firefox but it remained broken in other browsers moreover it broke the layout in many other clients. It was a similar story for the div fix. See screenshots for all clients/browsers with align left 'fix' here https://www.emailonacid.com/app/acidtest/viewresult/SyapFGGm5JKUgTdZEs6L7oqlmHLOuQqMcFQGM307uA7LH
Does anyone know how to resolve this issue without causing issues for the other clients/browsers?
Many Thanks

Answer 1

when using images you need to also use the align = rule to remove the spaces in owa
It is a huge pain
<img src="img/Rectangle_2.png" width="25" height="54" alt="" align="center" style="display: block;">
if it is just solid colors you should stick to background color for tables

Answer 2

I was able to replicate your issue. To fix it, remove all the hard returns in your code; it looks like the signature html editor adds in multiple non-breaking spaces ( ) that causes the image alignment issues. Note how all the code appears on one line below; it will wrap as necessary in the html editor.
<table width="406" height="136" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;"> <tr> <td colspan="4" height="82"> <img src="img/Rectangle_1.png" width="406" height="82" alt="" style="display: block;"></td></tr><tr> <td rowspan="2" height="54"> <img src="img/Rectangle_2.png" width="25" height="54" alt="" style="display: block;"></td><td height="40"> <img src="img/Rectangle_3.png" width="134" height="40" alt="" style="display: block; border:0; outline: none; text-decoration: none;"></td><td height="40"> <img src="img/Rectangle_4.png" width="125" height="40" alt="" style="display: block; border:0; outline: none; text-decoration: none;"></td><td rowspan="2" height="54"> <img src="img/Rectangle_5.png" width="122" height="54" alt="" style="display: block;"></td></tr><tr> <td colspan="2" height="14" style="line-height: 14px;"> <img src="img/Rectangle_6.png" width="259" height="14" alt="" style="display: block;"></td></tr></table>
One other thing - the images that are hyperlinked (inside <a> tags) need a border attribute set to zero instead of setting it via inline CSS.
<a href=""><img src="" width="" alt="" border="0" style="display:block;"/>