TIP: How To Fix ASP.NET CalendarExtender when used with Blueprint CSS

I just ran into a bizarre condition where, when using the Blueprint CSS with ASP.NET AJAX Toolkit, the popup calendar produced by the CalendarExtender control has its date numbers pushed out so I only saw about four or five days in each week.

It turns out that this is caused by the padding defined in Blueprint for TD elements are set to 5px. This expands the calendar so only part of it is visible in its containing div.

To fix the problem, I added a DIV called "calendarContainer" around the text box and the CalendarExtender control to "insulate" them:

<div id="calendarContainer">
  <asp:TextBox ID="dateFromTextBox" runat="server"></asp:TextBox>
  <cc1:CalendarExtender ID="dateFromCalendarExtender" runat="server"
    TargetControlID="dateFromTextBox"></cc1:CalendarExtender>
</div>

...and then added the following to my CSS file:

div#calendarContainer table td {
 margin:0px;
 padding:0px; 
}

The calendar dates snapped right back!

Problem solved!