Extravision Blogsblog

Recent Posts



Outlook 2013 table cell height issue

February 26, 2014

Recently I have had the pleasure of working with Microsoft’s newest version, Outlook 2013. Email clients are always updating with newer versions which potentially affect how your email will appear. As email marketers this is something we need to constantly monitor and if need be, change the way we build our emails; moving forward and keepingup to date with the ever changing online environment. So far I have only had a few minor issues with the way emails are rendered in Outlook 2013. One reoccurring issue appears when thespecified height of table cells within your email is ignored. This can be a big problem as it can appear a number of times and potentially ruin the look of email. I have found that in Outlook 2013, if the height of the table cell is lower than 15 pixels it will automatically display table cells at a height of at least 15 pixels, regardless of what you specified.You can imagine the visual impact it has on an email that has table cells with a height of 1 or 2 pixels. Table cells with low pixel height are usually used as spacers or a way to create a border around banners and articles. Figure 1 is an excellent example of how an email will appear in Outlook 2013 when table cells have a height set to 1px. This drastically affects the look of this email. <image 1 goes here> Fortunately there is a solution. For each table cell that causes a problem all you need to do is add this line of code; setting the height to what you want it to be, in this case it is 1px and also importantly adding the ‘line-height’ style property which should always be set to ‘0’ regardless of height: <td height=”1” style=”line-height:0;”></td> When we tested this we noticed that the spaces in Outlook 2013 were now displaying as they should (see figure 2). These changes didn’t affect how the email was already displaying in any other email clients. <image 2 goes here> Images inside the table cell You may notice the blue along the top and bottom of the articles, if you have an image inside a table cell with a height less than 15px, this could be a 1px spacer or any other image, and as previously shown, place in this code: <td height=”1” style=”line-height:0;”></td> It will fix the cell height although the image will disappear and the cell will just show whatever the background colour has been set to, as seen in figure 3, an image has been put at the top and bottom of each box at a height of 9px to show a rounded edge but isn’t appearing anymore. <image 3 goes here> To avoid this you just need to add a font-size to the code: <td height=”9” style=”line-height:0;font-size:0;”>      <imgsrc="image.jpg" width="320" height="9" /> </td> This will now keep the table cell height how you want it, and the image will also appear as normal. (See figure 4) <image 4 goes here>

Posted by Andrew Chau
Email Design

No comments

Comments are closed.

From the Blog

How to craft the perfect re-engagement email: Topshop example

In an ideal world, everyone on your list would be eagerly awaiting your email. They…

Jenni Malley
June 1, 2017

How To Get Your Perfect Email Template

If you send email campaigns then you probably use a template. Not every email campaign…

Jenni Malley
May 12, 2017

Latest Tweets

Get in touch

MediaCity UK
M50 2AB
Find us on Google maps

Main: +44 (0) 161 817 2929
Support: +44 (0) 161 817 2930
Email: [email protected]


Facebook IconTwitter IconVisit Our BlogVisit Our BlogVisit Our Blog