Outlook HTML Signature, Background Images Not Displaying

[HandlerOfCode]

Dear friends,

I have difficulties in creating a functioning HTML signature with an image for Outlook Express.

First, I tried the simple <div> sections in order to package the whole signature as relative, and all its elements as absolute. Everything appeared correctly in web browsers, but in Outlook, the image and the text were positioned as if there were no div section at all. However, the image did appear, and I used <img src=""

http://www...png">

Then, I tried to do arrange the elements as tables. The elements are now positioned correctly, but the problem is that the image does not appear. The image does appear when I send the message to my own outlook, but not when I send the message to another person's outlook. When I send the message from outlook to gmail, the image does not appear in gmail. However, the image does appear in one another webmail, although slightly differently than in my outlook.

According to this thread, there are problems with images in tables:

http://www.tek-tips.com/viewthread.cfm?qid=1299232&page=124

Any suggestions about how this could be done? I've read that there are lots of problems with CSS too.

-Eemeli

 

[ChrisHunt]

Start by posting the actual code you're currently using, you're unlikely to get any meaningful help otherwise.

Mail clients are pretty simple beasties, so it's best not to confuse them too much with advanced HTML and CSS. What effect are you trying to achieve?

(Also be aware that, as a security measure, many clients will not display the images in a post without the user's explicit permission)

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[HandlerOfCode]

Hi,

here is an example signature with an image inside a table:


<table border="1">
<tr>
<td style="background-image:url('

http://upload.wikimedia.org/wikipedia/mediawiki/a/a9/Example.jpg');height:267px;

width:400px;">
</td>
</tr>
</table>


When I create a new mail in outlook, the image appears there. But when I send the mail to myself or to someone else's outlook, the image does not appear. Also, when I send the mail to gmail, the image does not appear.

Note that I have all the setting in the way that allows downloading and showing images.

-Eemeli

 

[ChrisHunt]

Is there a reason you don't just do this?

<img src="[URL unfurl="true"]http://upload.wikimedia.org/wikipedia/mediawiki/a/a9/Example.jpg"[/URL] alt="Some useful alternative text">

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[vacunita]

As Chris points out email clients are very limited in what they support.

You might find this interesting to read. That way you know what exactly is supported by the different email clients.

CSS background-image is one of the things not supported in current versions of either Outlook or Gmail, so from there stems your problem.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[vacunita]

Of course I forgot to post the link:

http://www.campaignmonitor.com/css/

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[HandlerOfCode]

I finally managed to get the image to appear in Outlook signature. I guess it was the "display:block" that did the trick. So, if anyone has difficulties with outlook signature, namely, the image does not appear in a signature within a HTML table, just try this:


<table border="0" cellpadding="0" cellspacing="0" width="590">
<tbody>
<tr>
<td>

<img style="display:block" src="

http://www.ctemploymentlawblog.com/test.jpg"

alt="Alternative text" height="100" width="224">

</td>
</tr>
</tbody>
</table>

 

[spamjim]

Are you only sending to Outlook users? If users of other mail clients will be reading this mail as well, you should really follow the tip from ChrisHunt...

<img src="[URL unfurl="true"]http://upload.wikimedia.org/wikipedia/mediawiki/a/a9/Example.jpg"[/URL] alt="Some useful alternative text">

 

[spamjim]

...or more specifically to your last code snippet...

<table border="0" cellpadding="0" cellspacing="0" width="590">
<tbody>
<tr>
<td height="100" width="224">

<img src="[URL unfurl="true"]http://www.ctemploymentlawblog.com/test.jpg"[/URL] alt="Alternative text" height="100" width="224">

</td>
</tr>
</tbody>
</table>

Mail clients struggle with styles so one often must go 'old school' with the HTML.

 

[HandlerOfCode]

Hmm, can you go more old-school than that?

In addition to inter-operability, the only problem now is that in my ourlook, the signature does not appear correctly before I have sent the message. However, when I receive the message with outlook, it looks perfect.

Why can't everybody use some standard way of representing HTML?