Solved

Scripted Outlook Signature - formatting issues

Posted on 2014-01-15
3
1,312 Views
Last Modified: 2014-01-16
I'm using a VBS script written by Peter Aarts and modified by Brad Marsh that generates Outlook signatures.  It has worked well, until we began a rebranding exercise.

The format of the signature is pretty standard.  The issue is in trying to have four lines of text to the right of the logo.


Person's name
Company | Address | Town
Direct: my-phone | Mobile: my-mobile | Fax: my-fax
Logo-image  text line 1
Logo-image  text line 2
Logo-image  text line 3
Logo-image  text line 4

When I open the HTML form of the signature in a browser, it looks fine.  However, when I open it in Outlook, the text is a mess.

The HTML looks like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Microsoft Office Outlook Signature</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META content="MSHTML 6.00.3790.186" name=GENERATOR></HEAD>
<body>
<font color=black face="Calibri">
<br>
<b><span style="font-size:11pt">John Doe</span></b><br>
<span style="font-size:11pt"> Acme Manufacturing | 101 Main Street | AnyTown, USA 12345</span><br>
<span style="font-size:11pt"> Direct: 123-445-0001 | Mobile: 123-456-0002 | Fax: 123-456-0004</span><br>
<br>
<div style="float:left; padding: 5px"><img src=http://www.propublica.org/images/member_photos/cache/photo_7975-70x70.jpg border=0></a></div>
<div>
<div style="font-family:Calibri,Arial; font-size:12pt; color:#ff6600; font-weight:bold; float:left">C</div>
<div style="font-family:Calibri,Arial; font-size:12pt; color:#000000">ommunication</div>
<div style="font-family:Calibri,Arial; font-size:12pt; color:#ff6600; font-weight:bold; float:left">O</div>
<div style="font-family:Calibri,Arial; font-size:12pt; color:#000000">ptimal Service</div>
<div style="font-family:Calibri,Arial; font-size:12pt; color:#ff6600; font-weight:bold; float:left">R</div>
<div style="font-family:Calibri,Arial; font-size:12pt; color:#000000">espect for Resources</div>
<div style="font-family:Calibri,Arial; font-size:12pt; color:#ff6600; font-weight:bold; float:left">E</div>
<div style="font-family:Calibri,Arial; font-size:12pt; color:#000000">nthusiasm</div>
</div>
<br><br>
</font></body></HTML>


what do I need to do to have Outlook (preferably from 2003 to 2010) signatures work properly with this style of HTML?

I've tried modifying the image so that it contains the text, but management doesn't like the quality of the text in the final image, so that's not an acceptable solution.
Capture-ok.PNG
Capture-a-mess.PNG
0
Comment
Question by:ITHastings
  • 2
3 Comments
 
LVL 76

Accepted Solution

by:
David Lee earned 250 total points
ID: 39784967
Hi, ITHastings.

You need to use a table instead of DIVs.  Beginning with Outlook 2007, Microsoft switched from using IE's rendering engine to display HTML messages to using Word's rendering engine.  That change caused quite an uproar because Word's engine has a different set of rules when it comes to what it allows.  In short, DIVs behave differently in Outlook 2007 and later than they did in earlier versions of Outlook.  That's the problem.  You can read all about the changes at this Microsoft page.

The solution is to switch to using a table, which should behave the same in all versions of Outlook.  Here's the signature redone using a table.  I've attached screenshots of what the signature looks like in both Outlook and a web browser (Firefox in my case).

<table style="font-family:Calibri,Arial; font-size:12pt;">
    <tr>
        <td rowspan=4>
            <img src=http://www.propublica.org/images/member_photos/cache/photo_7975-70x70.jpg border=0>
        </td>
        <td>
            <span style="color:#ff6600; font-weight:bold;">C</span><span style="color:#000000">ommunication</span>
        </td>
    </tr>
    <tr>
        <td>
            <span style="color:#ff6600; font-weight:bold;">O</span><span style="color:#000000">ptimal Service</span>
        </td>
    </tr>
    <tr>
        <td>
            <span style="color:#ff6600; font-weight:bold;">R</span><span style="color:#000000">espect for Resources</span>
        </td>
    </tr>
    <tr>
        <td>
            <span style="color:#ff6600; font-weight:bold;">E</span><span style="color:#000000">nthusiasm</span>
        </td>
    </tr>
</table>

Open in new window

Signature-in-Outlook.png
1
 
LVL 29

Assisted Solution

by:matrixnz
matrixnz earned 250 total points
ID: 39784969
Use basic HTML i.e. use tables instead of divs and/or span tags and inline css.  Office 2003 renders html differently to 2010+, you can also drop the HTML header information as that won't be used by either.

Something like:

<html>
<head>
<title>Microsoft Office Outlook Signature</title>
</head>

<body>
<br>
<span style="font-size:11pt; font-weight:bold">John Doe</span><br>
<span style="font-size:11pt"> Acme Manufacturing | 101 Main Street | AnyTown, USA 12345</span><br>
<span style="font-size:11pt"> Direct: 123-445-0001 | Mobile: 123-456-0002 | Fax: 123-456-0004</span><br>
<br>
<table border="0" cellspacing="0" cellpadding="0" style="font-family:Calibri,Arial; font-size:12pt">
	<tr>
		<td rowspan="4" style="padding: 5px"><img src=http://www.propublica.org/images/member_photos/cache/photo_7975-70x70.jpg alt="John Doe" border=0></td>
		<td style="color:#ff6600; font-weight:bold">C</td>
		<td style="color:#000000">ommunication</td>
	</tr>
	<tr>
		<td style="color:#ff6600; font-weight:bold">O</td>
		<td style="color:#000000">ptimal Service</td>
	</tr>
	<tr>
		<td style="color:#ff6600; font-weight:bold">R</td>
		<td style="color:#000000">espect for Resources</td>
	</tr>
	<tr>
		<td style="color:#ff6600; font-weight:bold">E</td>
		<td style="color:#000000">nthusiasm</td>
	</tr>
</table>
<br><br>
</body>
</html>

Open in new window

1
 
LVL 76

Expert Comment

by:David Lee
ID: 39784975
Somehow I managed to post my comment without attaching the second screenshot.  Here's that screenshot.
Signature-in-Firefox.png
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Are you unable to connect or configure Hotmail email account in Microsoft Outlook 2010, 2007? Or Outlook.com emails are not downloading to Outlook? Lets’ see the problem and resolve Outlook Connector error syncing folder hierarchy (0x8004102A).
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now