-1

i created an E- mail signature in Html and copied the Browser output in Gmail Signature tab, it is working fine for Gmail to gmail, or Gmail to yahoo.

But when i open the mail in Outlook in my desktop, the logo is not showing up, i tried using html table as said here,

My HTML markup:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>    
<body>
<table cellspacing="0" cellpadding="0" border="0">
<tbody>

<tr>    
<span style="text-align: left; margin-top: 0px; margin-bottom: 0px; color: #000000; font-family: 'Arial', sans-serif; font-weight: normal; font-size: 9pt;">
Best Regards,</span><br><br>    
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;">
<span style="text-align: left; color: #000000; font-family: 'Arial', sans-serif; font-size: 13pt; font-weight: bold">Mr. Xyz</span>    
<td style="text-indent: -12.0em;">
<span style="text-align: right; margin-top: 0px; margin-bottom: 0px; color: #000000; font-family: 'Arial', sans-serif; font-weight: normal; font-size: 9pt;">Email:  
xyz@something.com</span>
</td>    
</td>
</tr>


<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;">    
<span style="text-align: left; margin-top: 0px; margin-bottom: 0px; color: #000000; font-family: 'Arial', sans-serif; font-weight: normal; font-size: 9pt;">IT
Development Manager</span>  
<td style="text-indent: -12.0em;">
<span style="text-align: left; margin-top: 0px; margin-bottom: 0px; color: #000000; font-family: 'Arial', sans-serif; font-weight: normal; font-size: 9pt;">Ph No:  
123456</span>    
</td>    
</td>
</tr>

<tr>
<td valign="top" style="padding-left: 0px; padding-top: 7px; padding-bottom: 4px; padding-right: 0px;">
<a href="http://www.example.com/"><img src="http://imgur.com/ZQhgPvj" nosend="1" border="0" alt="E Design" title="xyz.com"></a>
</td>
</tr>

<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;">    
<span style="text-align: left; margin-top: 0px; margin-bottom: 0px; color: #000000; font-family: 'Arial', sans-serif; font-weight: normal; font-size: 9pt;">Address Line 1,
</span><br>    
</td>
</tr>




<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;">
<br>
<span style="text-align: left; margin-top: 0px; margin-bottom: 0px; color: #0000; font-family: 'Arial', sans-serif; font-weight: normal; font-size: 9pt;">
Address Line 2.
</span>
</td>
</tr>


<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;">
<br>
<span style="text-align: left; margin-top: 0px; margin-bottom: 0px; color: green; font-family: 'Arial', sans-serif; font-weight: normal; font-size: 9pt;">
Please consider the environment before printing this e-mail.!
</span>
</td>
</tr>

</tbody>
</table>
</body>
</html>

Expected Output:

enter image description here

May i know what i am doing wrong ?

Any help would be great.

Community
  • 1
  • 1
Shaiju T
  • 6,201
  • 20
  • 104
  • 196
  • What are all the exclamation marks doing in there? Is that a contest who can type the most? Seriously, remove them! They look as if typed by a 3 years old toddler. In general: one is just right. less might not be enough, more make no sense. So one is just right :-) – arkascha Feb 09 '15 at 10:05
  • You specify an empty source attribute for the image (`src=" "`). How do you expect the image to load that way? Where from? – arkascha Feb 09 '15 at 10:10
  • @arkascha, sorry actually i missed the src while posting, i have updated the post with img src and removed exclamation marks, may be now it would help you answering – Shaiju T Feb 09 '15 at 10:27
  • I created a jsfiddle: http://jsfiddle.net/Ld7n6egs/ It shows that the markup works as expected. The image is shown _if I fill in a correct url, yours did not lead to an image, but to a html page_. If then still MS-Outlook does not display perfectly valid html markup, then you have found one of the hundreds of problems MS-Outlook has. What is the result when you use any other Email program? – arkascha Feb 09 '15 at 10:34
  • @arkascha, i have updated the fiddle:http://jsfiddle.net/o5o71yna/2/, i tried sending to gmail and yahoo it is works fine, but in outlook desktop the image is still not showing up – Shaiju T Feb 09 '15 at 11:06
  • I haven't really done any work with email signatures but could the issue be anything to do with not declaring a width and height on the image? May be showing but collapsing. – Dom Walker Feb 10 '15 at 11:52

1 Answers1

0

Outlook uses Word as an email editor. You can read about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the following articles in MSDN:

img src=" "

You need to add a reference to an image loaded to any web server or add an image as a hidden attachment. So, the result markup should look like the following one:

img src="cid:attachmentName"

  1. Add the attachment using the Attachments.Add method.
  2. Set the PR_ATTACH_CONTENT_ID property using the PropertyAccessor object.
  3. Set the cid value (see #2) for the reference in the message body.
      string img = "<br/><p><o:p><img src=\"" + att.FileName
         + "\" width=1 height=1 border=0 /></o:p></p>";
      item.HTMLBody = item.HTMLBody.Replace("</body>", img + "</body>");
      string PR_ATTACH_CONTENT_ID = "http://schemas.microsoft.com/mapi/proptag/0x3712001E";
      string HIDDEN_ATTACHMENT = "http://schemas.microsoft.com/mapi/proptag/0x7FFE000B";
      var pa = att.PropertyAccessor;
      if (pa != null)
      {
         pa.SetProperty(PR_ATTACH_CONTENT_ID, att.FileName);
         pa.SetProperty(HIDDEN_ATTACHMENT, false);
      }
Eugene Astafiev
  • 47,483
  • 3
  • 24
  • 45
  • i am new to this, can you edit [this](http://jsfiddle.net/o5o71yna/2/) fiddle, so that i can figure out how to use your code – Shaiju T Feb 09 '15 at 11:21
  • If the image is hosted remotely, the fiddle you have is fine (it links to a statically served image hosted at http://i.imgur.com/ZQhgPvj.jpg?1). If you include the image in the email, you need to link to the image you include. – tripleee Feb 09 '15 at 11:30
  • @tripleee, i have already linked the image in the Html , how should i link it again, what do you mean ? – Shaiju T Feb 09 '15 at 11:39
  • @triplee , i have hosted in server this way, http://www.example.com/image/Ea1.jpg, and exactly i am using that link in img src " " – Shaiju T Feb 09 '15 at 11:44
  • 1
    In reference to the above, here is a source referring to the pros/cons of hosting/embedding an image in and email footer. May be some info in here that is relevant http://www.mail-signatures.com/articles/images-in-email-signatures-linked-or-embedded/ – Dom Walker Feb 10 '15 at 11:53