Lotus Notes 8.5 HTML signature with image, image not aligned horizontally

Question

I have the following problem with Lotus Notes email HTML signatures with image. The code for HTML signature is this:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <title>signature</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
 </head>
 <body>

 <!--CSS can skip-->
 <style type="text/css">
   #url {
    color:rgb(0, 136, 204) !important;
    text-decoration:none !important;
   }
   #outer {
    font-family: 'Lucida Sans', Lucida Grande, Verdana, Arial, Sans-Serif; 
    font-size:11px; 
    color:#555555;
   }
   #padding {
    padding-top:10px;
   }
   #div.img {
    width:288px;
    height:40px;
    padding-left:10px;
   }
   #left {
    float:left;
   }
   #right {
    width:100%;
   }
 </style>

<!--Signature itself-->
<div id="outer">
 <div id="header">
  [Name FamilyName] | [Title]
 </div>
 <div id="padding"></div>
 <div id="left">
  Line1<br>
  Line2<br>
  Line3<br>
 </div>
 <div id="right">
  <img src="file:///LocalPathToImage.png" style="padding-left:10px">
 </div>
</div>
</body>
</html>

Idea is to have signature where image is aligned to the right with text on the left. In browser alignment is correct, though when putting it as signature in Lotus Notes 8.5 (File->Preferences->Mail->Signature->HTML), image is always at the bottom.

How to make sure that in HTML signatures the alignment (float) properties are preserved?

Ken Pespisa Ken Pespisa · Accepted Answer · 2012-12-17T15:02:07

Your CSS rules seem to work fine in Chrome (I checked on JSFiddle), but the HTML engine in Lotus Notes is likely far off when it comes to adherence to CSS rules. I'd suggest rewriting this to use tables instead, you will probably have more success.

Lotus Notes 8.5 HTML signature with image, image not aligned horizontally

2 Answers