Extravision Blogsblog

Recent Posts

Categories

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 cellYou 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

Data Protection, E-Privacy, GDPR. What does it all mean ?

Most people have heard of the Data Protection Act and if your in email marketing…

Simon Hill
December 5, 2016

5 things you should stop doing right now in your email marketing

It’s easy to get stuck in a rut with your email marketing campaigns. You can…

Jenni Malley
October 26, 2016

Latest Tweets

Facebook IconTwitter IconVisit Our BlogVisit Our BlogVisit Our Blog