Solved

Scripted Outlook Signature - formatting issues

Posted on 2014-01-15
3
1,338 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

You need to know the location of the Office templates folder, so that when you create new templates, they are saved to that location, and thus are available for selection when creating new documents.  The steps to find the Templates folder path are …
The Windows functions GetTickCount and timeGetTime retrieve the number of milliseconds since the system was started. However, the value is stored in a DWORD, which means that it wraps around to zero every 49.7 days. This article shows how to solve t…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …

733 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