Solved

Scripted Outlook Signature - formatting issues

Posted on 2014-01-15
3
1,351 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

Tutorials alone can't teach real engineering

So we built better training tools.

-Hands-on Labs
-Instructor Mentoring
-Scenario-Based Tests
-Dedicated Cloud Servers

All at your fingertips. What are you waiting for?

Question has a verified solution.

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

In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
Outlook for dependable use in a very small business   This article is about using the Outlook application (part of Microsoft Office) in a very small business, or for homeowners where dependability and reliability are critical requirements. This …
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…
This is my first video review of Microsoft Bookings, I will be doing a part two with a bit more information, but wanted to get this out to you folks.

687 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