I have a custom web part which is rendering the following html to
display presence information:

<div class="udPart_Details">
<span><a href=http://mysite/Person.aspx?accountname=xxx
<http://mysite/Person.aspx?accountname=xxx> >USER NAME</a> <img
border="0" height="12" width="12" src="/_layouts/images/blank.gif"
onload="IMNRC('USER EMAIL')" id="imnXXX" ShowOfflinePawn="1" /></span>
<br />
<span
id="ctl00_m_g_fdc2d535_74bd_4874_8e1a_96bd57660442_lblJobTitle"
class="udPart_JobTitle">JOB TITLE</span><br />
<span id="ctl00_m_g_fdc2d535_74bd_4874_8e1a_96bd57660442_lblTeam"
class="udPart_Team">TEAM</span>
</div>

USER NAME, USER EMAIL etc all replaced for confidentiality

In IE7 this does not return the correct presence info and does not ouput
an icon, but it does render the appropriate drop down list when you
hover over the space.

In IE8 this returns the appropriate presence information, but the drop
down menu appears several inches above the icon on the page and is
therefore not clickable.

Am I rendering the html correctly to facilitate this feature? What is
causing the strange rendering from IE8 (I am guessing this down to css,
but cannot see how or where) ?

Any advice on this or other issues around rendering presence data within
custom web parts would be greatly received.

IE8 rendering of presence drop down - http://twitpic.com/1z4r9
<http://twitpic.com/1z4r9>