.net Ajax calendarExtender cuts of saturday's in IE7 (works fine in firefox)

Question

I was having this problem in IE7 where the saturdays appear to be missing from the calendar. It displays fine in Firefox and a few people have suggested that it could be my other stylesheets messing it up so i am now using a custom calendar CSS theme and i'm still having the same problem.

Any ideas? is there a known bug with the ajax toolkit pack that is used?

Answer 1

Asp code:

            <asp:TextBox ID="F1_I2" runat="server" CssClass="bigInput">
            </asp:TextBox>
         <cc1:CalendarExtender ID="F1_I2_CalendarExtender" CssClass="cal_Theme1" runat="server" 
                TargetControlID="F1_I2" Format="dd/MM/yyyy">
            </cc1:CalendarExtender>
            <div class="magiPad" />

I have a custom CSS applied to the calendar which i dont think will display well on here, but this is it:

/* Calendar css */
.cal_Theme1 .ajax__calendar_container {background-color: #e2e2e2;width:182px;border:solid 1px #cccccc;}
.cal_Theme1 .ajax__calendar_header{background-color: #ffffff; margin-bottom: 4px;}
.cal_Theme1 .ajax__calendar_title,.cal_Theme1 .ajax__calendar_next,.cal_Theme1 .ajax__calendar_prev{color: #004080; padding-top: 3px;}
.cal_Theme1 .ajax__calendar_body{background-color: #e9e9e9; border: solid 1px #cccccc;}
.cal_Theme1 .ajax__calendar_dayname{text-align:center; font-weight:bold; margin-bottom: 4px; margin-top: 2px;}
.cal_Theme1 .ajax__calendar_day{text-align:center;}
.cal_Theme1 .ajax__calendar_hover .ajax__calendar_day,.cal_Theme1 .ajax__calendar_hover .ajax__calendar_month,.cal_Theme1 .ajax__calendar_hover .ajax__calendar_year,.cal_Theme1 .ajax__calendar_active{color: #004080; font-weight:bold; background-color: #ffffff;} 
.cal_Theme1 .ajax__calendar_today{font-weight:bold;} 
.cal_Theme1 .ajax__calendar_other,.cal_Theme1 .ajax__calendar_hover .ajax__calendar_today,.cal_Theme1 .ajax__calendar_hover .ajax__calendar_title{color: #bbbbbb;}

Answer 2

If anyone else has this problem then i recommend setting a wildcard css element at the beginning of your style to blank out all posible padding and margin issues.

This fixes the problem in IE6.IE7 and firefox works fine too.

.yourCalendarTheme * {padding:0px;margin:0px;}

Answer 3

here's a solution:

.cal_Theme1 .ajax__calendar_days td { padding:0px; }

Answer 4

I had a similar problem and the solution marked as best (by SocialAddict) did not work for me. The core of my problem is that a css class set in a table was causing my calender extender to cut off Saturdays. The solution that worked involved modifying the calender extender's css. Here it is:

.ajax__calendar_body tr td {
 padding: 0px; 
 margin: 0px;}

Answer 5

Thank you, Social Addict; your solution worked for me!

Answer 6

Great answer from SocialAddict, but it didn't work for me...

My problem was the body/container size.

So here is what cured me:

<style>
    div.ajax__calendar_days table tr td{padding-right: 0px;}
    div.ajax__calendar_body{width: 205px;}
    div.ajax__calendar_container{width: 205px;}
</style>

I also changed my calendar style, (like SocialAddict did), but this style works out of the box.