Trouble getting html email signature to display properly in Outlook - McMap

About

Trouble getting html email signature to display properly in Outlook

Asked 22/1, 2013 at 14:8 Answered 22/1, 2013 at 14:16

Solved html css outlook-2010 email-client signatures

S

1

5

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:[email protected]" style="text-decoration: none; color: #84d5f6">[email protected]</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?

Stamina answered 22/1, 2013 at 14:8 Comment(6)

Try to add an absolute path to the image with http://your.domain.com/image.path/logo.png – Faretheewell 22/1, 2013 at 14:11

@Faretheewell - thanks for the tip. I can sort out the image quick enough, it's more the layout here that's the problem... :\ – Stamina 22/1, 2013 at 14:13

You're gonna have to get your <table>s out again, I'm afraid. Hope this page helps: campaignmonitor.com/css – Ganiats 22/1, 2013 at 14:14

I think your layout problem is related to the fact that the image is not loading, so it's not taking up a fixed space. Do your text lines fall under the image even if it loads? – Beslobber 22/1, 2013 at 14:16

@Ioana O - Yes even if the image loads the layout remains the same. Have to remember that the div that contains the image has a fixed width and height of 50px; So if there's an image in or not it will still render the same. :) – Stamina 22/1, 2013 at 15:10

Yes, sorry about that, I had not looked closely enough at the posted html.... – Beslobber 22/1, 2013 at 19:59

D

14

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/

Dieback answered 22/1, 2013 at 14:16 Comment(2)

I have done a lot of work on HTML emails for the company I work for currently and there are a number of useful tips that you can learn. Campaign Monitor has the best articles that I have found on the topic. – Dieback 23/1, 2013 at 14:26

Thanks for this. I was looking for this answer. My HTML signature breaks in gmail web client and outlook App client. Useful link to thanks! :) – Disembroil 20/4, 2016 at 7:7

Recommended topics

#Godot #Unity #Godot 4.X #Mongodb

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

© 2022 - 2024 — McMap. All rights reserved.