JQuery dialog pop up issues in IE and FF

JQuery dialog pop up issues in IE and FF

Here is my scenario. And also I have couple of questions.

1. I need to open a JQuery pop up under the button which I clicked. And this popup should scroll along the button when the page is being scrolled. It should be locked with the button
2. If I click the button which is at bottom of the screen, then the page should scroll to top and this popup should open below the button.
3. Issue with FF and Chrome:
The popup is locked up with the button during the scrolling. But the problem is if I scroll the page before I open the page, the pop up opens in the previous place where the button was there before scrolling.
  1. JQuery Script:
  2. var popup = $('#' + ClientId);
            var left = popup.offset().left;
            var top = popup.offset().top;
            $('#dvDenyCommentContainer').dialog({
                dialogClass: "ui-widget-content",
                width: 250,
                height: 140,
                autoOpen: true,
                modal: false,
                position: [left - 75, top + 30]
            });
  1. Code:
  2. <div id="dvDenyCommentContainer" class="dvContainer" style="display:none;"> 
                                    <div class="dv-arrow-border"></div>
                                    <p align="left" style="font-size:12px; font-family:Verdana;"><span style="color:#4d4e53;">Denial Reason</span><span style="color:Red">*</span> <br /><br /></p>
                                    <div id="dvDenyComments">
                                        <asp:TextBox id="txtDenyComments" runat="server" style="resize:none;" Width="200px" Height="50px" TextMode="MultiLine" /><br /><br />
                                        <asp:ImageButton id="ibPopUpDenyr" runat="server" OnClientClick="return PopUpButtonDeny();" OnClick="btnPopUpProcess_Click" />
                                        <input type="image" id="btnDenyCancel" onclick="return DenyPopupClose();" value="Cancel" />
                                        <br /><p align="left" style="color:Red;font-size:12px; font-family:Verdana;">* Required Field</p>
                                    </div>
                                </div>

  3. CSS:.dvContainer
  4. {
  5.     background-color: White;
  6.     border:3px solid #afafaf;
  7.     line-height:1.3em;
  8.     margin:10px auto;
  9.     padding:10px;
  10.     position:absolute;
  11.    .position:relative;
  12.     text-align:center;
  13.     -moz-border-radius:10px;
  14.     -webkit-border-radius:10px;
  15.     -moz-box-shadow:0 0 5px #888888;
  16.     -webkit-box-shadow:0 0 5px #888888;
  17. }

  18. .dv-arrow-border 
  19. {
  20.     border-color: transparent transparent #afafaf transparent ;
  21.     border-style: solid;
  22.     border-width: 10px;
  23.     height:0;
  24.     width:0;
  25.     position:absolute;
  26.     top : -22px;
  27.     .top:-38px;
  28.     left:100px;
  29. }
Please help me to fix this.

Thanks,
Siva