影响AJAX控件的CSS

Having an issue trying to figure out why this is affecting the AJAX control the way it is. When I remove the CSS file it displays correctly.

CSS File

.tdMain
{
    width:452px;
    font-family:Arial;
    font:bold,small;
}

.tdInput
{
    width:324px;
    font-family:Arial;
}

.center
{
    margin-left:auto;
    margin-right:auto;
    width:50%;
}

table
{
    border-collapse: separate;
    border-spacing: 0;
    border: 0;
    width:752px;
}

ASPX

<tr>
    <td class="tdMain">Date:</td>
    <td>
       <asp:TextBox ID="txtDate" runat="server" ReadOnly="true"></asp:TextBox>
       <asp:ImageButton ID="imgPopupDate" ImageUrl="~/Images/calendar.png" ImageAlign="Bottom" runat="server" />
        <ajaxToolkit:CalendarExtender ID="cDate" PopupButtonID="imgPopupDate" runat="server" TargetControlID="txtDate" Format="MM/dd/yyyy"/>
     </td>
</tr>

The CalendarExtender generates a table. You are setting all tables on your page to a width of 752px including the one generated by the CalendarExtender.

table
{
    ...
    width:752px;
}

you need to be more specific with your css selectors. Give the table that you wish to have a set width a class or id and use that as a selector.

table.myTable
{
    ...
    width:752px;
}

or

table#myTable
{
    ...
    width:752px;
}