Problem with <ajaxToolkit:CalendarExtender>


I am facing problem using calendarExtension in IE 8

I am using a textbox and calender control in .net

Normally it works in the following scenario when the user clicks on the textbox calendar appears
below the textbox. But in IE 8.0 it is not working properly.

I have searched on internet to find the solution all the blogs and discussion forums gives the same solution i.e. add the following css class

.ajax__calendar_title{width:150px; margin:auto; padding:3px;}

But where to add there is no description for that. Can you help me out in this.
Who is Participating?
vinodsnair2001Connect With a Mentor Commented:
Create a new style sheet with the following in it:

.ajax__calendar_container {padding:4px;position:absolute;cursor:default;width:170px;font-size:11px;text-align:center;font-family:tahoma,verdana,helvetica;}

.ajax__calendar_body {height:139px;width:170px;position:relative;overflow:hidden;margin:auto;}

.ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years {top:0px;left:0px;height:139px;width:170px;position:absolute;text-align:center;margin:auto;}

.ajax__calendar_container TABLE {font-size:11px;}

.ajax__calendar_header {height:20px;width:100%;}

.ajax__calendar_title {cursor:pointer;font-weight:bold;}

.ajax__calendar_footer {height:15px;}

.ajax__calendar_today {cursor:pointer;padding-top:3px;}

.ajax__calendar_dayname {height:17px;width:17px;text-align:right;padding:0 2px;}

.ajax__calendar_day {height:17px;width:18px;text-align:right;padding:0 2px;cursor:pointer;}

.ajax__calendar_month {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}

.ajax__calendar_year {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}

.ajax__calendar .ajax__calendar_container {border:1px solid #646464;background-color:#ffffff;color:#000000;}

.ajax__calendar .ajax__calendar_footer {border-top:1px solid #f5f5f5;}

.ajax__calendar .ajax__calendar_dayname {border-bottom:1px solid #f5f5f5;}

.ajax__calendar .ajax__calendar_day {border:1px solid #ffffff;}

.ajax__calendar .ajax__calendar_month {border:1px solid #ffffff;}

.ajax__calendar .ajax__calendar_year {border:1px solid #ffffff;}

.ajax__calendar .ajax__calendar_active .ajax__calendar_day {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}

.ajax__calendar .ajax__calendar_active .ajax__calendar_month {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}

.ajax__calendar .ajax__calendar_active .ajax__calendar_year {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}

.ajax__calendar .ajax__calendar_other .ajax__calendar_day {background-color:#ffffff;border-color:#ffffff;color:#646464;}

.ajax__calendar .ajax__calendar_other .ajax__calendar_year {background-color:#ffffff;border-color:#ffffff;color:#646464;}

.ajax__calendar .ajax__calendar_hover .ajax__calendar_day {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}

.ajax__calendar .ajax__calendar_hover .ajax__calendar_month {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}

.ajax__calendar .ajax__calendar_hover .ajax__calendar_year {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}

.ajax__calendar .ajax__calendar_hover .ajax__calendar_title {color:#0066cc;}

.ajax__calendar .ajax__calendar_hover .ajax__calendar_today {color:#0066cc;}


Then add this to the top,

<link href="ajaxcalendarfix.css" rel="stylesheet" type="text/css" />
ajaxcalendarfix.css is the style sheets name.

Then add  ajax__calendar to the calendar extender cssclass property, and then all of the calendars will work.

Pls mark yes if this was helpful to you
KaranGuptaAuthor Commented:

There is another class input_text that is applied on the textbox should I remove it.
KaranGuptaAuthor Commented:
The reason I am asking this is because when you view source then you won't see any class called ajax__calendar
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

you have to add this as css file and thenadd  ajax__calendar to the calendar extender cssclass property, and then all of the calendars will work.
KaranGuptaAuthor Commented:

I have added the class in the css file then add the <link> tag on the top of the page. After that I have applied css class in calendar extender control.

But still I am facing the same problem

Am I missing  something. If you want some piece of code then I can give
KaranGuptaAuthor Commented:

One more thing which I want to share is I am using master page.

When I am using <link> tag in child page. I am getting a warning message

"Cannot switch views: Validations(XHTML 1.0 Transitional): Element link cannot be nested within  element 'div'"
KaranGuptaAuthor Commented:

Any Updates
amar31282Connect With a Mentor Commented:
you need to use the Content place holder with the id="head" in the master page and then paste the link part in the child page in that contentplaceholder Or alternatively add the link tag into the master page it will be automatically called in child page.

Still not working ???

Paste you aspx part here(content page only + the Css file)
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.