Ajax Calander is not appear under text box inside ajax accordion panel

Hi,

In my web page i am using ajax accordion panel to manage alot of information into sections. 

I have some textbox which basically take dates so i used ajax calander to select dates. 

When i click  first time on the textbox ajax calander shows but upper left corner of the Accordion panel. Not exact under the text box. that is really bad user interface.

when user just click again on the textbox then Ajax calander shows perfect under the textbox where it should be.

Why its now showing correct first, and whenever page postpack or refresh its same first time ajax calander not showing correctly its shows upper left corner of the accordion panel.

Here is my ASPX code

<%@ Page Title="Ny Bokning" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="bk.aspx.cs" Inherits="NewBooking" Culture="sv-SE" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %><asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server"><style type="text/css">
        .style1
        {
            width: 100%;
        }</style></asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server"><asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="True"></asp:ScriptManager><br /><br /><asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate><center><asp:Panel ID="Panel2" runat="server" Width="95%" CssClass="Panelbg"><center><h3 style="color: #993300;">New Page</h3><asp:Button ID="btnSpara" runat="server" Text="Spara" ValidationGroup="Booking" OnClick="btnSpara_Click"/></center><asp:Label ID="StaticErrorMessage" runat="server" Text="" Visible="false" ForeColor="Red"></asp:Label><br /><asp:Accordion ID="Accordion1" runat="server" SelectedIndex="0" FramesPerSecond="30"
                TransitionDuration="200" FadeTransitions="true" AutoSize="None" HeaderCssClass="accHeading"
                Width="95%"><Panes><asp:AccordionPane ID="APBookingInfo" runat="server"><Header>
                            Bokning Beskrivning</Header><Content><table cellpadding="0" cellspacing="0" class="style1"><tr><!--
                                            Booking Information
                                        --><!--
                                            Room Selection
                                        --><td width="35%" style="vertical-align: top;"><table cellpadding="0" cellspacing="0" class="style1"><tr><td class="labeltd">
                                                    Datum:</td><td class="Controltd"><asp:TextBox ID="txtBookingDate" runat="server" AutoPostBack="True" OnTextChanged="txtBookingDate_TextChanged" Width="100px"></asp:TextBox><asp:CalendarExtender ID="txtBookingDate_CalendarExtender" runat="server" Enabled="True"
                                                        TargetControlID="txtBookingDate" PopupPosition="BottomLeft"></asp:CalendarExtender><asp:CompareValidator ID="CompareValidator2" runat="server" ErrorMessage="Start Datum should be Less of Equal to Slut Datum"
                                                    ControlToValidate="txtBookingDate" ControlToCompare="txtEndBookingDate" Display="None" Operator="LessThanEqual" Type="Date"></asp:CompareValidator><asp:ValidatorCalloutExtender ID="ValidateStartBookingDate" runat="server" TargetControlID="CompareValidator2"></asp:ValidatorCalloutExtender></td><td class="labeltd">
                                                    Datum:</td><td class="Controltd"><asp:TextBox ID="txtEndBookingDate" runat="server" AutoPostBack="true" OnTextChanged="txtEndBookingDate_TextChanged" Width="100px"></asp:TextBox><asp:CalendarExtender ID="txtEndBookingDate_CalendarExtender" runat="server" Enabled="true" TargetControlID="txtEndBookingDate" PopupPosition="BottomLeft"></asp:CalendarExtender><asp:CompareValidator ID="CompareValidator1" runat="server" ErrorMessage="Slut-Datum Should be Greater or Equal to Booking Start Datum" ControlToValidate="txtEndBookingDate" ControlToCompare="txtBookingDate" Display="Dynamic" Operator="GreaterThanEqual" SetFocusOnError="True" Type="Date" ValidationGroup="Booking"></asp:CompareValidator><asp:ValidatorCalloutExtender ID="ValidateEndBookingDate" runat="server" TargetControlID="CompareValidator1"></asp:ValidatorCalloutExtender></td></tr><tr><td class="labeltd">
                                                Start tim:</td><td class="Controltd"></td><td class="labeltd">
                                                End tim:</td><td class="Controltd"></td></tr><tr><td colspan="4"></td></tr></table></td></tr></table></Content></asp:AccordionPane><asp:AccordionPane ID="BookingHanlder" runat="server"><Header>Övrig info Schema</Header><Content></Content></asp:AccordionPane><asp:AccordionPane ID="UtrustningSelection" runat="server"><Header>
                            Utursnting</Header><Content></Content></asp:AccordionPane></Panes></asp:Accordion></asp:Panel><asp:DropShadowExtender ID="Panel2_DropShadowExtender" runat="server" Enabled="True"
            TargetControlID="Panel2" Opacity=".8" Radius="8" Rounded="True"></asp:DropShadowExtender><asp:RoundedCornersExtender ID="Panel2_RoundedCornersExtender" runat="server" Enabled="True"
            TargetControlID="Panel2" Radius="7"></asp:RoundedCornersExtender><!---
Show Message Div
--><div style="min-height: 700px;"><asp:ModalPopupExtender ID="ModalPopupExtender1" BackgroundCssClass="ModalPopupBG"
                runat="server" OkControlID="btnOkay" TargetControlID="lbmsgError" PopupControlID="Panel1"
                Drag="true" PopupDragHandleControlID="PopupHeader"></asp:ModalPopupExtender><div id="Panel1" style="display: none;" class="popupConfirmation"><div class="popup_Container"><div class="popup_Titlebar" id="PopupHeader"><asp:Label ID="lbmsgHeader" runat="server" Text="Error"></asp:Label></div><div class="popup_Body"><p><asp:Label ID="lbmsgError" runat="server" Text=""></asp:Label></p></div><div class="popup_Buttons"><input id="btnOkay" value="Stänga" type="button" /></div></div></div></div></center></ContentTemplate><Triggers></Triggers></asp:UpdatePanel></asp:Content>

Here is my style sheet.

/*
Design by CSS Templates For Free
http://www.csstemplatesforfree.com
Released for free under a Creative Commons Attribution 2.5 License
*/

body
{
    margin: 0;
    padding: 0;
    background: #FFFFFF url(images/img1.gif) repeat-x;
    font: normal 0.75em 'Trebuchet MS' , Arial, Helvetica, sans-serif;
    color: #000000;
    
   background: #b3bead; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIyJSIgc3RvcC1jb2xvcj0iI2IzYmVhZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iI2IzYmVhZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkZmU1ZDciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #b3bead 2%, #b3bead 25%, #dfe5d7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#b3bead), color-stop(25%,#b3bead), color-stop(100%,#dfe5d7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #b3bead 2%,#b3bead 25%,#dfe5d7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #b3bead 2%,#b3bead 25%,#dfe5d7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #b3bead 2%,#b3bead 25%,#dfe5d7 100%); /* IE10+ */
background: linear-gradient(to bottom,  #b3bead 2%,#b3bead 25%,#dfe5d7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3bead', endColorstr='#dfe5d7',GradientType=0 ); /* IE6-8 */

}

form {
	margin: 0;
	padding: 0;
}

.loginDisplay
{
    font-size: 1.1em;
    display: block;
    text-align: right;
    padding: 10px;
    color: White;
    background-color: #252D37;
}
.main
{
    padding: 0px 12px;
    margin: 12px 12px 12px 12px;
    
    min-height: 420px;
    
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	color: White;
}

h1 { font-size: 31px; }
h2 { font-size: 26px; }
h3 { font-size: 18px; }

p, ul, ol, blockquote {
	margin-top: 0;
	padding-top: 0;
	text-align: justify;
	line-height: 18px;
}

a
{
    color: #D93600;
    text-decoration: none;
}
.LinkButton {
    text-decoration: none;
}
a:hover {
	text-decoration: none;
}

/* Boxed */

.boxed {
	margin: 0 0 20px 0;
	padding: 0 20px 20px 20px;
	background: url(images/img4.gif) repeat-x left bottom;
}
.VisaBokaTableHeading
{
background: rgb(93,93,94); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(93,93,94,1) 0%, rgba(93,93,93,1) 26%, rgba(89,89,89,1) 37%, rgba(83,83,83,1) 42%, rgba(72,72,72,1) 47%, rgba(66,66,66,1) 53%, rgba(66,66,66,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(93,93,94,1)), color-stop(26%,rgba(93,93,93,1)), color-stop(37%,rgba(89,89,89,1)), color-stop(42%,rgba(83,83,83,1)), color-stop(47%,rgba(72,72,72,1)), color-stop(53%,rgba(66,66,66,1)), color-stop(100%,rgba(66,66,66,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(93,93,94,1) 0%,rgba(93,93,93,1) 26%,rgba(89,89,89,1) 37%,rgba(83,83,83,1) 42%,rgba(72,72,72,1) 47%,rgba(66,66,66,1) 53%,rgba(66,66,66,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(93,93,94,1) 0%,rgba(93,93,93,1) 26%,rgba(89,89,89,1) 37%,rgba(83,83,83,1) 42%,rgba(72,72,72,1) 47%,rgba(66,66,66,1) 53%,rgba(66,66,66,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(93,93,94,1) 0%,rgba(93,93,93,1) 26%,rgba(89,89,89,1) 37%,rgba(83,83,83,1) 42%,rgba(72,72,72,1) 47%,rgba(66,66,66,1) 53%,rgba(66,66,66,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(93,93,94,1) 0%,rgba(93,93,93,1) 26%,rgba(89,89,89,1) 37%,rgba(83,83,83,1) 42%,rgba(72,72,72,1) 47%,rgba(66,66,66,1) 53%,rgba(66,66,66,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d5d5e', endColorstr='#424242',GradientType=0 ); /* IE6-9 */

color:White;
    }

/* Accordian Heading*/
.accHeading
{
background: #cedce7; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NlZGNlNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1OTZhNzIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #cedce7 0%, #596a72 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#596a72)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #cedce7 0%,#596a72 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #cedce7 0%,#596a72 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #cedce7 0%,#596a72 100%); /* IE10+ */
background: linear-gradient(to bottom,  #cedce7 0%,#596a72 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 ); /* IE6-8 */
text-align:center;
font-size:small;
color: #993300;
padding-left:5%;
height:25px;
 }
/* Post */

.post {
	margin: 0 0 20px 0;
	padding: 10px 20px 30px 20px;
	background: url(images/img4.gif) repeat-x left bottom;
}

.post h4 {
	margin-bottom: 20px;
	font-size: 11px;
	font-weight: normal;
}

.post h4 strong {
	font-weight: bold;
	color: #5B6F88;
}

/* Header */

#header
{
    width: 100%;
    height: 140px;
    margin: 0 auto;
    background-color: #252D37;
}
header {
    background-color: #252D37;
}
.menucontainer{
    background-color: #252D37;
    
}
/* Menu */
div.menu
{
    padding: 4px 0px 4px 8px;
    background-color: #252D37;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}
#menu {
	float: left;
}

#menu ul {
	margin: 0;
	padding: 53px 0 0 0;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	height: 25px;
	padding: 10px 15px 0 15px;
	text-transform: lowercase;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
}

#menu a:hover {
	background: #0C7AC7 url(images/img2.gif) repeat-x;
}
/* Panel Properties */
.Panelbg
{
 background: #fcfff4; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjZmZmNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2RmZTVkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiM2JlYWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(40%,#dfe5d7), color-stop(100%,#b3bead)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* IE10+ */
background: linear-gradient(to bottom,  #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 ); /* IE6-8 */

    }
/* Table */

.labeltd
{
    text-align:right;
    padding-right:5px; 
    vertical-align:top;
    font-weight:bold;
}
.Controltd
{
    text-align:left;
    padding-left:5px; 
    vertical-align:top;
}
/* Search */

#search {
	float: right;
	padding: 63px 0 0 0;
}

#textfield1 {
	width: 175px;
	background: #FFFFFF;
	border: none;
}

#submit1 {
	height: 19px;
	background: #6F9303;
	border: none;
	text-transform: lowercase;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
}
.title
{
    display: block;
    float: left;
    text-align: left;
    width: auto;
    padding: 4px 20px;
    background-color: #252D37;
}

/* Content */

#content {
	width: 904px;
	margin: 0 auto;
}

#colOne {
	float: left;
	width: 238px;
}

#colTwo {
	float: right;
	width: 646px;
}

/* ColOne Content */

#colOne ul {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

#colOne li {
	padding: 5px 0 7px 0;
	border-top: 1px solid #3B495A;
}

#colOne li.first {
	border: none;
}

#colOne h3 {
	font-size: 15px;
}

/* ColTwo Content */

/* Logo */

#logo {
	margin: 0 0 20px 0;
	padding: 0 0 40px 20px;
	background: url(images/img3.gif) repeat-x left bottom;
}

#logo h1 {
	text-transform: lowercase;
}

#logo h2 {
	text-transform: lowercase;
	font-size: 12px;
}

#logo a {
	text-decoration: none;
	color: #FFFFFF;
}

/* Welcome */

#welcome {
	padding: 5px 20px 20px 20px;
}

#welcome h2 {
	margin-bottom: 25px;
}

#welcome .image {
	float: left;
	padding: 0 17px 0 0;
}

#welcome p {
	margin-left: 126px;
}

/* Footer */

#footer {
	clear: both;
	width: 904px;
	margin: 0 auto;
	background: url(images/img6.gif) repeat-x left top;
}

#footer p {
	margin: 0;
	padding: 30px;
	text-align: center;
}

.customCalloutStyle div, .customCalloutStyle td{
        border: solid 1px Black;
        background-color:#07888E;
        color:White;
        }