?
Solved

Scripted Outlook Signature - formatting issues

Posted on 2014-01-15
3
Medium Priority
?
1,360 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 1000 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 1000 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Changing a few Outlook Options can help keep you organized!
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
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…
Suggested Courses

762 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