We Keep Coding

asp.net buttons stopped working after I inked a StyleSheet

I've run into a problem while trying to style a content page. I created a content Page that have buttons in it and for some reason after I linked a styleSheet the buttons stopped working.
I would appreciate any help, thank u.
the content page:
<%# Page Title="" Language="C#" MasterPageFile="~/Pages/Site1.Master" AutoEventWireup="true" CodeBehind="MyBooks.aspx.cs" Inherits="WebApplication8.Pages.MyBooks" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="../css/myBooks.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div>
<asp:Button CssClass="addBook" ID="addBook" runat="server" Text="+Add book"
onclick="addBook_Click" />
<center><asp:DataList ID="DataList1" runat="server" Font-Bold="False"
Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
Font-Underline="False" ForeColor="Gray">
<ItemTemplate>
<table class="style1">
<tr>
<td class="td">
<asp:Image CssClass="binding" ID="Image2" runat="server"
ImageUrl='<%# Bind("binding")%>'/>
<asp:Label ID="bookName" CssClass="bookName" runat="server" Text='<%# Bind("BookName") %>'></asp:Label>
</td>
<td>
<br />
<br />
<div class="buttons">
<asp:Button CssClass="btn1" ID="Publish" runat="server" Text="Publish" /><br />
<asp:Button CssClass="btn2" ID="Edit" runat="server" Text="Edit" /><br />
<asp:Button CssClass="btn2" ID="discared" runat="server" Text="discared" />
</div>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList></center>
</div>
</asp:Content>
the styleSheet (linked in the first content place holder):
addBook is the cssClass of the first butoon in the content page
btn1 is the cssClass of the first button in the DataList.
btn2 is the cssClass of the tow other buttons below it.
buttons is the cssClass of the div who contains the three buttons inside the DataList.
body
{
}
.btn1
{
border-style: none;
width:200px;
height:40px;
border-radius:15px;
background-color:#d4fcea;
color:White;
font-family:Calibri;
margin-bottom:10px;
font-size:20px;
}
.btn2
{
border-style: none;
width:200px;
height:40px;
border-radius:15px;
background-color:#d5e0db;
color:White;
font-family:Calibri;
margin-bottom:10px;
font-size:20px;
}
.buttons
{
position:relative;
left:30%;
z-index:-1;
}
.style1
{
margin-top:20px;
width:800px;
height:250px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 20px 0 rgba(0, 0, 0, 0.15);
border-radius:10px;
margin-left: auto;
margin-bottom: 0;
position:relative;
z-index:-1;
}
.addBook
{
border-style: none;
position:relative;
left:20%;
width:200px;
height:40px;
border-radius:15px;
background-color:#ffcc99;
color:White;
font-family:Calibri;
margin-bottom:10px;
font-size:20px;
right:25%;
z-index:-1;
}

Why does the design of a web page change at run time?

I have created a website using asp.net. Everything worked fine until now. But the last page does not behave as i expected. In the UI there is a dropdownlist,gridview,link button and few labels within a collapse bar. Gridview get populated according to the selection of the dropdownlist. In the gridview there is a button and when clicked it, data relevant to the specific row loads into labels. Link button is to view a pdf upload to the system. Problem occurs when click on this link button. As soon as I click on the link button design changes its size of fonts,grid etc. How to stop happening it?
Note : C# code works without any error.
This problem occurs only in one page.
This is my aspx code
<%# Page Title="" Language="C#" MasterPageFile="~/CDDS_Master.Master" AutoEventWireup="true"
CodeBehind="agencyAdmin.aspx.cs" Inherits="Claim_Distribution_System.agencyAdmin" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="agency" runat="server">
<link href="CSS/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="JS/jquery.min.js" type="text/javascript"></script>
<script src="JS/bootstrap.min.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div id="div0" runat="server" style="width: 100%; height: auto; margin-top: 15px">
<asp:Label ID="lblApp" runat="server" Text="Competition :" Style="margin-left: 14px;
margin-top: 5px">
</asp:Label>
<asp:DropDownList ID="ddlComp" runat="server" Style="margin-top: 5px; margin-left: 5px;
width: 60%; height: auto" AutoPostBack="True" OnSelectedIndexChanged="ddlCompName_SelectedIndexChanged">
</asp:DropDownList>
</div>
<div id="div1" style="width: 100%; height: auto; float: left; margin-left: 10px">
<asp:GridView ID="grdSum" runat="server" Style="margin-top: 10px;" OnRowDataBound="grdSum_RowDataBound"
OnRowCreated="grdSum_RowCreated" OnSelectedIndexChanged="grdSum_SelectedIndexChanged"
CellPadding="4" ForeColor="#333333" GridLines="None" AutoGenerateColumns="false">
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" HorizontalAlign="Justify" />
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<HeaderStyle BackColor="#990000" ForeColor="White" Font-Bold="True" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="refer" HeaderText="REFERENCE NUMBER">
<ItemStyle Width="200px"></ItemStyle>
<%--200--%>
</asp:BoundField>
<asp:BoundField DataField="BRANCH_CODE" HeaderText="BRANCH">
<ItemStyle Width="70px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="SO_CODE" HeaderText="SO">
<ItemStyle Width="100px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="APPEAL_CREATE_DATE" HeaderText="CREATE DATE">
<ItemStyle Width="120px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="ATTACHMENT_UPLOAD" HeaderText="ATTACHMENT">
<ItemStyle Width="100px"></ItemStyle>
</asp:BoundField>
<asp:ButtonField Text="Click To View" CommandName="Select">
<ItemStyle Width="100px"></ItemStyle>
</asp:ButtonField>
</Columns>
</asp:GridView>
<asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>
</div>
<div id="emp" style="width: 100%; height: 20px; float: left">
</div>
<div id="col" style="width: 100%; height: auto; margin-left: 5px; float: left">
<div class="container">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Basic Appeal Info</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<div id="col1Body" style="width: 95%; height: auto;">
<div id="inner1" style="width: 98%; height: auto; float: left">
<asp:Label ID="Label1" runat="server" Style="width: 35%; margin-left: 43px" Text="Reference No :"></asp:Label>
<asp:Label ID="lblRef" runat="server" Style="width: 90%; margin-left: 10px" Text="Reference No :"></asp:Label>
</div>
<div id="inner2" style="width: 98%; height: auto; float: left; margin-top: 10px">
<asp:Label ID="Label2" runat="server" Style="width: 35%; margin-left: 20px" Text="Competion Name :"></asp:Label>
<asp:Label ID="lblComName" runat="server" Style="width: 90%; margin-left: 10px" Text="Reference No :"></asp:Label>
</div>
<div id="inner3" style="width: 98%; height: auto; float: left; margin-top: 10px">
<asp:Label ID="Label3" runat="server" Style="width: 35%; margin-left: 48px" Text="Branch Code :"></asp:Label>
<asp:Label ID="lblBranch" runat="server" Style="width: 90%; margin-left: 10px" Text="Reference No :"></asp:Label>
</div>
<div id="inner4" style="width: 98%; height: auto; float: left; margin-top: 10px">
<asp:Label ID="Label4" runat="server" Style="width: 35%; margin-left: 72px" Text="SO Code :"></asp:Label>
<asp:Label ID="lblSo" runat="server" Style="width: 90%; margin-left: 10px" Text="Reference No :"></asp:Label>
</div>
<div id="inner5" style="width: 98%; height: auto; float: left; margin-top: 10px">
<asp:Label ID="Label6" runat="server" Style="width: 35%; margin-left: 74px" Text="Remarks :"></asp:Label>
<asp:Label ID="lblRemarks" runat="server" Style="width: 90%; height: auto; text-align: justify;
margin-left: 10px;" Text="Reference No :"></asp:Label>
</div>
<div id="inner6" style="width: 80%; height: auto; float: left; margin-top: 10px;
margin-left: 10%; margin-bottom: 10px">
<div id="inner61" style="width: 30%; height: auto; float: left; margin-left: 100px">
<asp:GridView ID="grdKPI" runat="server" Style="margin-left: 5px; margin-top: 5px;
margin-bottom: 10px; float: left; border-color: #9B0423; border-width: medium;
width: 50%; text-align: center;" OnRowDataBound="grdKPI_RowDataBound">
<HeaderStyle BackColor="#9B0423" ForeColor="White" />
<AlternatingRowStyle BackColor="#FFE6E6" />
</asp:GridView>
</div>
<div id="inner62" style="width: 30%; height: auto; float: left; margin-left: 10px">
<asp:GridView ID="grdPolicyDetails" runat="server" Style="margin-top: 5px; margin-bottom: 10px;
float: left; border-color: #9B0423; border-width: medium; width: 50%; text-align: center"
OnRowDataBound="grdPolicyDetails_RowDataBound">
<HeaderStyle BackColor="#9B0423" ForeColor="White" />
<AlternatingRowStyle BackColor="#FFE6E6" />
</asp:GridView>
</div>
</div>
<div id="empty" style="width: 100%; height: auto; float: left">
<asp:Label ID="Label8" runat="server" Style="width: 35%; margin-left: 25px" Text="View Attachment :"></asp:Label>
<asp:LinkButton ID="pdfViewAdmin" runat="server" Style="margin-left: 10px" OnClick="pdfViewAdmin_Click">View PDF</asp:LinkButton>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">LOP</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div id="colBody2" style="width: 95%; height: auto;">
<div id="inner7" style="width: 98%; height: auto;">
<asp:Label ID="Label5" runat="server" Style="width: 35%; margin-left: 43px" Text="Remarks :"></asp:Label>
<asp:Label ID="lblRemarksLOP" runat="server" Style="width: 90%; margin-left: 10px"
Text="Reference No :"></asp:Label>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Accountant</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<div id="colBody3" style="width: 95%; height: auto;">
<div id="inner8" style="width: 98%; height: auto;">
<asp:Label ID="Label7" runat="server" Style="width: 35%; margin-left: 43px" Text="Remarks :"></asp:Label>
<asp:Label ID="lblRemarksAcc" runat="server" Style="width: 90%; margin-left: 10px"
Text="Reference No :"></asp:Label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</asp:Content>
Here are images before the link button click and after link button click
Link button click event
protected void pdfViewAdmin_Click(object sender, EventArgs e)
{
Response.Write(string.Format("<script>window.open('{0}','_blank');</script>", "viewPDF.aspx"));
lblComName.Visible = true;
lblBranch.Visible = true;
lblSo.Visible = true;
}

Following change solved my problem.
protected void pdfViewAdmin_Click(object sender, EventArgs e)
{
//Response.Write(string.Format("<script>window.open('{0}','_blank');</script>", "viewPDF.aspx"));
this.ClientScript.RegisterStartupScript(this.GetType(), this.GetType().Name, string.Format("window.open('{0}', '_blank');", "viewPDF.aspx"), true);
lblComName.Visible = true;
lblBranch.Visible = true;
lblSo.Visible = true;
lblRef.Visible = true;
lblRemarks.Visible = true;
}
Commented line is code i had earlier. And the line below it is the new code and it worked.
This is where i found the answer
Click to view the page

how to stretch div based on content

CSS
#outer
{
position: relative;
z-index: 3;
width: 100%;
margin: 0px auto 0 auto;
background: #ffffff;
box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.2);
float:inherit;
}
#main
{
display:inline;
position: relative;
padding: 0px 0px 0px 0px;
width: 100%;
}
#header
{
position: relative;
padding: 28px;
height: 125px;
background: #ffffff;
color: #ffffff;
text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
border-bottom: solid 1px #003B47;
}
#copyright
{
padding: 40px 0 80px 0;
text-align: center;
color: #777777;
}
HTML
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="outer">
<div id="header" style="background-color: lightgrey">
</div>
</div>
<div id="main">
<div id="sidebar" style="background-color: lightgrey">
<div id="menubar">
<h2>
Menu
</h2>
<ul class="linkedList">
<li>
<img id="img12" src="./images/bt_tri.gif" alt="" width="16" height="16" runat="server"/>
Server Search
</li>
<li>
<img id="img13" src="./images/bt_tri.gif" alt="" width="16" height="16" runat="server"/>
Service Status
</li>
<li>
<img id="img14" src="./images/bt_tri.gif" alt="" width="16" height="16" runat="server"/>
Data Records
</li>
</ul>
</div>
</div>
<div id="content">
<div class="box">
<h2>
Member Details
</h2>
<p>
<asp:UpdatePanel id="Up1" runat="server">
<contenttemplate>
Last Refreshed : <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><BR /><BR />
<asp:GridView id="gvMem_Details" runat="server" SkinID="Professional" OnRowDataBound="gvMem_Details_RowDataBound">
<RowStyle Width="500px"/>
</asp:GridView>
<asp:Timer ID="Timer1" runat="server" Interval="600">
</asp:Timer>
</contenttemplate>
</asp:UpdatePanel><br class="clear" />
</p>
</div>
<div class="box">
<h2>
Reservation Details
</h2>
<p>
<asp:UpdatePanel id="UpdatePanel1" runat="server">
<contenttemplate>
Last Refreshed : <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label><BR /><BR />
<asp:GridView id="gvRes_Details" runat="server" SkinID="Professional" OnRowDataBound="gvRes_Details_RowDataBound">
</asp:GridView>
<asp:Timer ID="Timer2" runat="server" Interval="600">
</asp:Timer>
</contenttemplate>
</asp:UpdatePanel>
</p>
</div>
</div><br class="clear" />
</div><br class="clear" />
</div>
<div id="copyright">
© Company. Design by Technies.
</div>
</form>
I have to stretch my div based on the content inside... i have head, body and copyright(lower) divs... I want body div size should be of its dynamic contents.

panel height not working in internet explorer 7

i have an ajax modalpopupextender that opens a popup in the event that an error occurs.
This works fine in all browsers i have tested so far. But not in internet explorer 7 (it does in ie 8 and 9)
basically the height of the panel isnt being applied. on screen its about 20 pixels high. I have no idea why and have used various samples to no avail for hours now. The width os working fine.
Any help appreciated
Thanks
Damo
HTML
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="myapp.Logon" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="assets/css/Logon.css" rel="stylesheet" type="text/css" />
<link href="assets/css/modalBackground.css" rel="stylesheet" type="text/css" />
<title>myapp Login</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtenderError" runat="server"
TargetControlID="PanelLogonDetails">
</ajaxToolkit:RoundedCornersExtender>
<asp:Panel ID="PanelLogonDetails" runat="server" Width="350" Height="300" BorderColor="White" BackColor="White">
<div id="container">
<asp:Label ID="LabelLogo" runat="server" Text="Logo"></asp:Label>
<br />
<div id="inputcontainer">
<asp:Label ID="lblUsername" runat="server" Text="Username"></asp:Label>
<br />
<asp:TextBox CssClass="Textbox" ID="txtUserName" runat="server" Text="Administrator"
ToolTip="Username" Width="200px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorUsername" runat="server" ErrorMessage="You must enter a Username"
ControlToValidate="txtUserName" ForeColor="White"></asp:RequiredFieldValidator>
<br />
<asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label>
<br />
<!-- TextMode set to singleline for testing - set to Password for production-->
<asp:TextBox CssClass="Textbox" ID="txtPassword" runat="server" Text="!password£$nmj5%$-12"
ToolTip="Password" TextMode="SingleLine" Width="200px"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorPassword" runat="server" ErrorMessage="You must enter a password"
ControlToValidate="txtPassword" ForeColor="White"></asp:RequiredFieldValidator>
<br />
<br />
<asp:Button CssClass="Button" ID="btnLogin" runat="server" Text="Login" OnClick="btnLogin_Click" />
<br />
<br />
</div>
</div>
</asp:Panel>
<!-- Error Modal Form -->
<asp:HiddenField ID="hideForModal" runat="server" />
<ajaxToolkit:ModalPopupExtender runat="server" ID="ErrorModal" BehaviorID="modalPopupExtenderError"
TargetControlID="hideForModal" PopupDragHandleControlID="popUpPaneError" PopupControlID="popUpPaneError"
OkControlID="btnOk" BackgroundCssClass="modalBackground" DropShadow="False" Drag="true">
</ajaxToolkit:ModalPopupExtender>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="popUpPaneError">
</ajaxToolkit:RoundedCornersExtender>
<asp:Panel ID="popUpPaneError" runat="server" CssClass="confirm-dialog" Width="485" Height="285" BackColor="White">
<div id="ErrorInputContainer">
<div>
<b>Error Code:</b></div>
<asp:Label ID="lblErrorCode" runat="server" Text="Error Code"></asp:Label>
<div>
<b>Error Message:</b></div>
<asp:Label ID="lblErrorMessage" runat="server" Text="Error Message"></asp:Label>
<div>
<b>Ex message:</b></div>
<asp:Label ID="lblExMessage" runat="server" Text="Ex Message"></asp:Label>
<br />
<asp:Button ID="btnOk" runat="server" Text="Ok" CssClass="Button" />
<br />
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="close" OnClientClick="$find('modalPopupExtenderError').hide(); return false;" />
</div>
</asp:Panel>
<!-- End Error Modal Form -->
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Logon.css
#PanelLogonDetails
{
background-color:#FFFFFF;
width: 350px;
height: 300px;
position:absolute;
left: 40%;
top: 40%;
margin-left: -50px;
margin-top: -50px;
}
/* main div */
#container
{
padding-left:50px;
padding-top:20px;
}
#LabelLogo
{
font-family: Arial, Sans-Serif;
font-size: 20px;
font-weight: bold;
}
/* end main div */
/* inputcontainer (within the main div above) */
#inputcontainer {
position:absolute;
height:100px;
width:230px;
left: 35%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
/* End inputcntainer */
html,body {
margin:0px;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
font-size:13px;
line-height:1.5em;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003366', endColorstr='#FFFFFF'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#036), to(#FFF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #036, #FFF); /* for firefox 3.6+ */
height: 100%;
}
/* Error Modal */
#ErrorInputContainer
{
background-color:White;
background:white;
position:absolute;
height:260px;
width:460px;
top:20px;
left:20px;
color:Black;
}
#popUpPaneError
{
height:260px;
width:460px;
}
/* End Error Modal */
/* TextBox */
.Textbox
{
width:auto;
padding:2px;
color:Black;
text-align:left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
font-size: 10pt;
font-family: Arial;
}
.Textbox:focus
{
background-color:#FFCC33;
}
/* End TextBox */
/* Button */
.Button
{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
text-align:left;
padding-left:22px;
background-repeat: no-repeat;
background-image: url(/assets/img/action.gif);
background-position:3px 50%
}
.Button:hover
{
background: #FFCC33;
background-repeat: no-repeat;
background-image: url(/assets/img/action.gif);
background-position:3px 50%
}
/* End Button */
modalBackground.css
.modalBackground
{
background-color:#696969;
filter: alpha(opacity=60);
opacity: 0.6;
}
.close {
DISPLAY: block;BACKGROUND: url(img/close.png) no-repeat 0px 0px;
LEFT: -5px;WIDTH: 26px;TEXT-INDENT: -1000em;POSITION: absolute;
TOP: -7px;HEIGHT: 26px;
}
.modalBackground {
background-color:Gray;filter:alpha(opacity=70);opacity:0.7;
}

http://www.mindfiresolutions.com/Workaround-for-Modal-Popup-with-RoundedCornerExtender-issue-833.php
this is the solution. Bug with the ajax controltoolkit....
thanks
Damo

Lock Screen on my email sending page asp.net

i have a page wherein i need to lock the screen when user clicks on the send email button, but everything is happening except i am unable to see my lock screen page. i have used the update progress for this purpose.. m posting part of the code here
.aspx part
<asp:UpdatePanel ID="SendMailUpdatePanel" runat="server">
<ContentTemplate>
<div style="float: right;">
<asp:Button ID="btnSend" runat="server" Text="Send" ToolTip="Send "
Visible="false" Font-Bold="True" OnClick="btnSendResume_Click" />
<asp:Button ID="btnDown" runat="server" Text="Download IDs" ToolTip="follow-up"
Visible="false" Font-Bold="True" OnClick="btnDownloadEmailIDs_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
<table>
<td style="width: auto; vertical-align: top;">
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="SendMailUpdatePanel">
<ProgressTemplate>
<div id="blur" style="width: 100%; background-color: black; moz-opacity: 0.5; khtml-opacity: .5;
opacity: .5; filter: alpha(opacity=50); z-index: 120; height: 100%; position: absolute;
top: 0; left: 0;">
<div id="progress" style="z-index: 200; background-color: White; position: absolute; top: 0pt;
left: 0pt; border: solid 1px black; padding: 5px 5px 5px 5px; text-align: center;">
<b>Mail in progress.Please Wait...</b>
<br />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</td>
</table>
.cs part
protected void btnSendResume_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(2000);
}
rest of the part i have not mentioned here...any help

Your HTML Table is incorrectly formed. You have no <tr> elements, but the real problem probably lies with your style attributes, please see my updated code below.
You can find a good example of how to accomplish what you are trying to do here: http://blogs.visoftinc.com/2008/03/13/Modal-UpdateProgress-for-UpdatePanel-Revisited/
Try adjusting your code to the following:
<asp:UpdatePanel ID="SendMailUpdatePanel" runat="server">
<ContentTemplate>
<div style="float: right;">
<asp:Button ID="btnSend" runat="server" Text="Send" ToolTip="Send "
Visible="false" Font-Bold="True" OnClick="btnSendResume_Click" />
<asp:Button ID="btnDown" runat="server" Text="Download IDs" ToolTip="follow-up"
Visible="false" Font-Bold="True" OnClick="btnDownloadEmailIDs_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="SendMailUpdatePanel">
<ProgressTemplate>
<div id="blur" style="position:fixed; top:0px; bottom:0px; left:0px; right:0px; overflow:hidden; padding:0; margin:0; background-color:black; filter:alpha(opacity=50); opacity:0.5; z-index:1000;" />
<div id="progress" style="position:fixed; top:30%; left:43%; width:14%; z-index:1001; background-color:white; border:solid 1px black; padding:5px; text-align:center;">
<b>Mail in progress.Please Wait...</b>
<br />
<br />
</div>
</ProgressTemplate>
</asp:UpdateProgress>