Fixing line spacing in Outlook 2007 email signatures with a bit of help from Visual Studio 2008

Today I’ve been trying to generate an e-mail signature in Outlook 2007 which renders well in Google Mail also, with some success. The signature consists of a two column table, with an embedded image on the left, and all the details running down the right.

As the client is using Outlook 2007 and wants to be able to add a signature on all outgoing mail, I began by using Outlook 2007’s rich text editor, creating a two column table and adding all the relevant details. I sent it for a quick visual check with Google Mail — Spot the differences:

Rendered in Outlook 2007:

In Google Mail:

i.e. completely different. Aside from the slightly different width which I can live with we’ve got three main issues: the font family and line spacing is different and the table padding is also out, making the table approximately twice as high as it should be. Try as I might with setting the font family in Outlook (selecting text and forcing anything other than Arial), Google Mail didnt want to play ball, refusing to display text in anything but Arial! OK, so compromise made - Arial it is!

Line spacing was an interesting one - I’m not sure if its some interaction with the markup Outlook generates (hideous when viewed in FireBug) which the web browser is unable to make sense of but there is an obvious difference. So, in my frustration with not being able to see what HTML was being generated by Outlook’s rich text editor (MS — please please please rectify this for Outlook 2010), I opened Visual Studio, created a new HTML file and began typing markup, recreating the right hand side of the table using <p> tags and <br> for line breaks, so for the tel/fax/web details something like:

<p style="color:Red">Tel<br />Fax<br />Web<br /></p>

I put Visual Studio into Design mode, selected and copied the p tag from the visual view, pasted it into Outlook, which looked as it should, and then sent it out to test how it rendered in Google Mail — this is what I got.

Which is something a little closer to how Outlook renders the email, with <br> tags intact. So, one less problem to deal with, hope this helps someone (or if there are any easier ways to achieve this please leave a comment!)… I might have to live with the font family and padding issues!