Outlook 2013 Preview Rendering Issues

I was testing an email in Outlook 2013 Preview and I noticed that some table cells with an height of 1px are instead 15px high.

Did anyone else noticed this problem?

It's correct in Outlook 2007 and I thought that both programs use the same engine.

<tr>
<td height="1" bgcolor="#58595B"></td>
</tr>
roshodgekiss roshodgekiss, 1 year ago

Hi there wilbertheinen, it's good to see you! Thank you for chiming in about this. It looks like other customers have been encountering this issue as well, so I've done a little investigation. As it seems, Outlook 2013 is deciding to 'fill' empty cells of its own accord. I've found that you can avoid this by adding the following:

<td height="1" bgcolor="#cccccc" style="font-size: 0; line-height: 0;">&nbsp;</td>

...where height="" and font-size: ; should be the desired cell height. Please also note that the bgcolor hex code has to be 6 characters in length (ie. bgcolor="#cccccc", not #ccc).

I'll be publishing a post about this shortly, but in the interim, let me know how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
wilbertheinen wilbertheinen, 1 year ago

Great advice! A colleague of mine did some testing with a font-size of 1px. It seems to do the trick also.

<td height="1" bgcolor="#cccccc" style="font-size: 1px;"></td>

Create a Clang!
roshodgekiss roshodgekiss, 1 year ago

Brilliant, that's even better - thank you wilbertheinen!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
wilbertheinen wilbertheinen, 1 year ago

You're Welcome!


Create a Clang!
haydenbrown, 1 year ago

hi,
i have just been using:

<td height="1" bgcolor="#cccccc" style="font-size: 1px;"></td>

to fix the Outlook 2013 cell height issue and when i run a test in campaign monitor testing it doesn't seem to fix the problem, does anyone have any further ideas of what to try?

thanks

hayden

roshodgekiss roshodgekiss, 1 year ago

Hi hayden, I just took a look at one of your earlier drafts and saw:

<style> ...
td {color: #444444; font-size: 12px; margin-top: 0px; margin-bottom: 0px; line-height: 16px; font-family: Arial, Helvetica, sans-serif; }
... </style>

Not sure if this is the campaign you've been testing, but may I recommend removing font-size and line-height CSS properties from your td styles? Hopefully that explains things, but let us know how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
haydenbrown, 1 year ago

thanks for your help. I looked at the code and you were right I had font size and line height specified on the td, so i removed that from all tds and ran the test again but its made no difference.

The one I am testing now has HAYDEN TEST on the campaign name  (if you can see it).

roshodgekiss roshodgekiss, 1 year ago

Hi there hayden, sadly I can't seem to find the 'HAYDEN TEST' draft in your account. Could you kindly contact our team with your account and campaign details (as well as a link to this thread)? We'll do our best to help out here :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Sign up for free.
Then send campaigns for as little as $9p/m

Create an account