HTML Signature Help - Outlook 03,07,OWA

I've been tasked with creating an html signature for my company, and they wish to have the thing designed in order to display the brand and look cool. I have to get this thing to work in outlook 03, 07, and Outlook Web Access, which is turning out to be a real challenge. The main consistent problem I am having with each design I try (I am building out multiple choices for them; I'm not going to promise a design I can't build) is the problem of table borders.

Every single client seems to handle them differently - thus far I've simply resigned myself to the fact that my designs will be off by 1px, but I would LOVE to find a solution to this, especially because my current design is too noticeably broken in OWA.

I've attached a picture of what I'm talking about. You have to look closely, but the problem is on the right side. I've also added the code, but unfortunately I've had to kill all of the image links due to company NDA policies. Also this code is NASTY - this is not meant to be valid or anything like that. It just has to work, which requires some....creativity....with the old school 1993 html. Background images are not an option and neither (unfortunately) are most css styles.

If anyone on here has experience making html work for Outlook, I would love your advice!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<META content="text/html; charset=unicode" http-equiv=Content-Type>
<META name=GENERATOR content="MSHTML 8.00.6001.18812"></HEAD>
        <STYLE type=text/css media=all>
        table td {
        <IMG style="DISPLAY: block" src="#" width=481> 
        <TABLE id=Table1 border=0 cellSpacing=0 cellPadding=0 width=481>
                <TD><IMG src="#"></TD>
                <TD width=406>{fullname}</TD>
                <TD><IMG src="#"></TD>
        <IMG style="DISPLAY: block" src="" width=480> 
        <TABLE id=Table2 cellSpacing=0 cellPadding=0 width=481>
                <TD><IMG src=""></TD>
                <TD bgColor=#e9e9e9 width=406>{fullname}</TD>
                <TD bgColor=#e9e9e9><IMG src="" bgcolor="#FFFFFF"></TD>
        <IMG style="DISPLAY: block" src="" width=480> 
shayl, 8 years ago

Well I didn't solve the core problem, but I came up with a hacky solution to make it look correct.

OWA is very good about recognizing background images in td elements. SO, because of that, and because '07 doesn't recognize them at all, I was able to take the design that already looked ok in 07, and put background "filler" images to cover up the gray line and the white line in OWA. Essentially, since the css background-image property is applied to the td cell, it overrides the bgcolor that is already on it, but 07 still uses the bgcolor and ignores the background image.

So, this looks fine now, but I'm still not happy that I don't understand why every client handles the borders differently.

shayl, 8 years ago

Well of course every time I fix one thing, another problem comes up. Does anyone know why Outlook 2003 might be ignoring my css? I'm trying to tell it to do style=""width:480px" on an img file, and OWA sees it just fine but 03 isn't.

fyredefyre fyredefyre, 8 years ago

Outlook is a bit clunky when it comes to custom borders, but for a quick fix try:


img { display: block; }

to your CSS (in the head tags) & re-test.

If it's still giving you grief I'd try removing the custom border and adding custom cells with 1px width/height where needed & is guaranteed to work in all browsers. - Everything Email.
Email: Skype: fyredefyre

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free