Email Development
2 Fixes for Image Spacing in Outlook Web App (Office 365)
Email Development
As you might know from our earlier blog, Outlook Web App didn’t make a great first impression. Because of the enforced HTML5 doctype, the Office Web App (OWA) creates a small 4-5px gap below every image. For email designers who use sliced images to create their email, this can cause a lot of problems. If you favor spacer gifs, these tiny gaps can cause a lot of annoyance. Because OWA strips out almost all styling other than width and height, display:block and other similar, CSS based fixes won’t work.
Let’s take an image that has been sliced into 3 parts, which should stack seamlessly on top of each other. In OWA, the images will come out looking like this:
Here’s the code we used to create this email:
<table align="center" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<img src="image.jpg" border="0" />
</td>
</tr>
<tr>
<td>
<img src="image.jpg" border="0" />
</td>
</tr>
<tr>
<td>
<img src="image.jpg" border="0" />
</td>
</tr>
</tbody>
</table>
Back in 2010 we blogged about 12 Fixes for Image Spacing in HTML Emails, but to our surprise only one actually worked in OWA. The rest are defeated by OWA stripping styles out. From that article, our remaining way to solve the image gap problem is to apply align="left" or align="right" to the image itself. You’ll also want to add style=”margin:0″ to prevent this fix from messing things up in Thunderbird. Check out the code below:
<table align="center" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<img src="image.jpg" align="left" border="0" style="margin:0" />
</td>
</tr>
<tr>
<td>
<img src="image.jpg" align="left" border="0" style="margin:0"/>
</td>
</tr>
<tr>
<td>
<img src="image.jpg" align="left" border="0" style="margin:0"/>
</td>
</tr>
</tbody>
</table>
OWA won’t allow you to apply styles to your images (or seemingly any other element) other than a few basics, as well as width and height. Luckily for us, that’s all we need for this second fix. Because the div is already a block level element, it can simulate the display:block property. The important part is to give the div the appropriate height. This will remove the unwanted gap below each image. Just make sure that the height of the div is equal to the height of the image it contains. Note: This fix may cause issues in Outlook 07/10/13 if the div is converted to a paragraph. We tested this fix and found no problems, but Outlook is a finicky beast.
<table align="center" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<div style="height:129px">
<img src="image.jpg" border="0" />
</div>
</td>
</tr>
<tr>
<td>
<div style="height:143px">
<img src="image.jpg" border="0"/>
</div>
</td>
</tr>
<tr>
<td>
<div style="height:134px">
<img src="image.jpg" border="0"/>
</div>
</td>
</tr>
</tbody>
</table>
Have you found another fix for this problem? Let us know in the comments below!
