Linkable Image is not opening JS popup on IE6, but works on FF

[Gene1]

Hi, I use JSF and this is what generated in page source:
<div style="position:relative;">
<div style="position:absolute;top:2px;right:0px;"><a id="associatesForm:_id2775" name="associatesForm:_id2775" href="javascript:createPopup('My Company','/printerFriendly/printAssociate.nem?associateId=227', 670, 600);"><img src="/images/icon_printthispage.gif" onmouseover="javascript:this.style.cursor='hand'" style="border:none;" /></a>
</div>
</div>
I read other posts and know that is has to do with IE bug in handling CSS. But there are workarounds for this. I just could not figure out yet. Thank you for your help.

[WesleyC]

There's not quite enough information here to figure out what it's doing--it's referencing an external function somewhere that I'd need to see to be able to debug it.

On a side note, whatever editor you're using, I'd recommend that you drop it if at all possible. The line:

onmouseover="javascript:this.style.cursor='hand'"

is a horrible travesty that is wrong on at least 3 levels, and there are several more inconsistencies, improper markup, and inaccessible pieces as well. :¦

[edited by: WesleyC at 7:23 pm (utc) on Aug. 2, 2007]

[Gene1]

Wesley,
I removed that onmouseover and replaced that JS function with alert('Hello'); and it's not showing it, it's not showing like it's clickable image. Here I made it simple:
<div style="position:relative;">
<div style="position:absolute;top:2px;right:0px;">
<a id="image1" name="image1" href="javascript:alert('Hello');"><img src="/images/icon_printthispage.gif" style="border:none;" /></a>
</div>
</div>
If I remove "position:absolute" then it works, but the image goes into upper left corner, instead of being in the right one.

[WesleyC]

Instead of using href="javascript:alert('hello')" try using href="#" onclick="alert('hello');return false;".

Edit: Another problem you may be having is z-index order--try adding style="z-index:10;" as well.

[edited by: WesleyC at 8:15 pm (utc) on Aug. 2, 2007]

[Gene1]

Nope. Still not working:
<tr>
<td align="left" valign="top" style="padding-bottom:5px">
<div style="position:relative;">
<div style="position:absolute;top:2px;right:12px;z-index:10;">
<a id="image1" name="image1" href="#" onclick="alert('Hello');return false;"><img src="/images/icon_printthispage.gif" style="border:none;" /></a>
</div>
</div>
</td>
</tr>

[Gene1]

This code works for both images:
<tr>
<td align="left" valign="top" style="padding-bottom:5px">
<div style="position:relative;">
<div id="id168">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top">
<a id="id170" name="id170" href="javascript:createPopup('My Company', '/contactus/contactUs.nem?associateId=201888', 580, 625);">
<img src="/images/btn_contactus.gif" onmouseover="javascript:this.src='/images/btn_contactus_hover.gif'" onmouseout="javascript:this.src='/images/btn_contactus.gif'" style="border:none;" /></a>
</td>
</tr>
</table></div>
<div style="position:absolute;top:2px;right:12px;z-index:10;">
<a id="id174" name="id174" href="#" onclick="alert('Hello');return false;"><img src="/images/icon_printthispage.gif" style="border:none;" /></a>
</div>
</div>
</td>
</tr>

But this simple code with 1 image doesn't work:
<tr>
<td align="left" valign="top" style="padding-bottom:5px">
<div style="position:relative;">
<div style="position:absolute;top:2px;right:12px;z-index:10;">
<a id="id192" name="id192" href="#" onclick="alert('Hello');return false;"><img src="/images/icon_printthispage.gif" style="border:none;" /></a>
</div>
</div>
</td>
</tr>

Why is it?