PDA

View Full Version : CSS - Pop-up div positioning



burns
October 11th, 2007, 04:52 AM
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:
http://img248.imageshack.us/img248/2285/81582083uy0.th.jpg (http://img248.imageshack.us/my.php?image=81582083uy0.jpg)

Help very much appreciated.

Thanks

prc
October 11th, 2007, 04:59 AM
Without looking at it in depth you could try:

.cHelp_Popup
{
position: relative;
...

see what that gives ya.

burns
October 11th, 2007, 05:28 AM
Hi,

Thanks for the quick response, unfortunatly that doesn't work.

cheers

prc
October 11th, 2007, 05:38 AM
Have you got this on a site I can look at?

burns
October 11th, 2007, 08:41 AM
I don't i'm afraid, all the dev is local on my machine :(