Adding presence indicator to a custom web part

Question

I have a custom web part which is generating some user data. I have added the appropriate code to output the standard presence icon and menu however this is acting rather stangely.

The rendered html of my web part is as follows:

<span>  
   <a href="http://mysite/Person.aspx?accountname=USERID"&gt;USERNAME&lt;/a&gt;&amp;nbsp;   
   <img border="0" height="12" width="12" src="/_layouts/images/blank.gif" onload="IMNRC('USEREMAIL')" id="imnUSERID" ShowOfflinePawn="1" />  
</span>

Obviously replacing USERID, USERNAME, USEREMAIL etc.

The problems are twofold.

1) In IE7 the presence information does not get retrieved. The menu displays correctly but the icon does not appear and when you hover over the gap the drop down menu does not provide IM settings.

2) In IE8 RC1 the presence information comes back correctly and the icon displays, but the drop down list is rendered severeal inches above the icon. (see this screenshot)

Any help with these issues, or with other tips about adding presence to custom web parts would be greatfully received.

Update on progress

*- Adding web page to 'Trusted Sites' for IE7 - did nothing - Compatability view for IE8 makes no difference. - Changed to id="CSRP_id,type=sip" Changed code to the following on recommendation:*

<span>     
<img class="PresenceImage" src="/_layouts/images/imnhdr.gif" onload="IMNRC('USEREMAIL')" name="imnmark" ShowOfflinePawn="1" id="contact_im,type=sip" />     
</span>

None of the above updates have been succesful.

Answer 1

First, you are going to have to eliminate whether you have a styling issue or a javascript issue.

If all of your presence bubbles display correctly, then get the IE Developer Toolbar and try and trace the css back. Even change the themes of the site and see if you get a different result.

This is our html, which works nice

 <span>
 <img width="12" src="/_layouts/images/blank.gif" onload="IMNRC('[USERMAIL]')" id="IMID[GUID]" ShowOfflinePawn=1 alt="Presence bubble">[USERNAME]</span>

Note:

[USERMAIL] = obvious [USERNAME] = obvious [GUID] = random guid

Also note the malformed img tag with no end "/>" (just ">"). We use this as this is the html generated by SharePoint (please don't get me started on that).