CSS - Pop-up div positioning

programming web dev
1

Hi,

I have the following code on a img link that opens a help window:


<a href="#"onclick="return !showPopup('<%=this.m_sHelpID%>', event);" style="cursor:pointer"><asp:Image ID="HelpImage"  runat="server" /></a>
<div onclick='event.cancelBubble = true;' class="cHelp_Popup" id="<%=this.m_sHelpID%>">
    <div class="cHelp" >
        <p><a class="cHelpPopup" href='#' onclick='hideCurrentPopup(); return false;'><asp:Label ID="lbl_keyword_close" runat="server"></asp:Label></a></p>
        <br />
        <p><asp:Label ID="lbl_HelpContent" runat="server" Text="Error retrieving help!"></asp:Label></p>
        <br />
    </div>
</div>

CSS


.cHelp_Popup
{ 
position: absolute;
visibility: hidden; 
top: 1px;
left:20px;
background-color:#EDECE0;
width: 250px; 
z-index: 1;
margin-left:12px;
}

.cHelp 
{
border: solid 1px #AEAEAE;
margin:0px;
padding: 0px;
background-color: #EDECE0;
    
}

while this works ok in IE, in FF the popup appears in the top left of the browser window not next to the link. I have tried messing around with it but i can’t get it to work.

This is how it looks correctly in IE:

Help very much appreciated.

Thanks