Trouble getting html email signature to display properly in Outlook

StackOverflow https://stackoverflow.com/questions/14460470

Question

I have created myself a simple email signature in html, he's the code:

<html>

<!-- Company logo goes here -->
<div id="far_left" 
    style="width: 50px; 
           height: 50px;
           float: left;
           margin-right: 10px;">
    <img src="logo.png" />
</div>

<!-- Name and occupation goes here -->
<div id="top" 
    style="height: 25px;">
    <span style="font-family: Arial, Verdana, 'Sans Serif'; font-size: 22; color: #464646;"><strong>Dean Grobler</strong>, Programmer</span>
</div>

<!-- Website link and email adress goes here -->
<div id="bottom" 
    style="font-family: Arial, Verdana, 'Sans Serif';
           font-size: 14px;
           color: #464646;
           padding: 5px;
           height: 25px;">
    <a href="http://www.deangrobler.com" style="text-decoration: none; color: #84d5f6">www.deangrobler.com</a> | 
    <a href="mailto:dean@deangrobler.com" style="text-decoration: none; color: #84d5f6">dean@deangrobler.com</a> 
</div>

In thunderbird, and my browsers it displays correctly:

enter image description here

But alas in Outlook 2010 it does not:

enter image description here

If it's using the same rendering engine that IE uses, and I bet you it does, I'm not too surprised this is happening.

Any ideas?

Was it helpful?

Solution

Email clients do not render html in the same way that browsers do. When creating html emails it is much better to use tables. I know this is going against all modern web design, but they are supported by a lot more email clients. Here is a link to the css properties and which clients they are supported by.

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top