Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Scripted Outlook Signature - formatting issues

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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Changing a few Outlook Options can help keep you organized!
In this article I discuss my selections of the Top Four free Outlook OST File Viewers available. Open, view and read even damaged OST files by using these tools. They all provide a clear preview of all data such as emails, notes, tasks, calendars, e…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
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: …
Suggested Courses

618 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