AJAX calendar extender display issue in Safari

Question

Ok, this is not a CSS issue, I removed all styling from the page. This is a calendar extender that has a target id of a textbox and the popupbutton is the same text box.

The month name is displaying lower than the days, so it's not usable.

it's fine in IE.

I am using Safari in Windows Vista.

Does anyone know what is causing this?

Thank you.

I don't know why this was voted down, is there some information I'm missing? This isn't a duplicate question.

UPDATE:

here is the c0dez:

 <label>date</label>
        <asp:TextBox ID="txtDate" CssClass="field" runat="server" />
        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtDate" Text="*" />
       <ajaxtoolkit:CalendarExtender ID="CalendarExtender1" runat="server"
                    TargetControlID="txtDate"
                    Format="MMMM d, yyyy"
                    PopupButtonID="txtDate" PopupPosition="BottomLeft" />

Answer 1

I think it was voted down because you didn't entered any code in your question, so it looks like you are asking support to your Safari browser instead of asking for help on a particularity of how safari treats AJAX. In other words you need to be more specific and clear.

Answer 2

I had a similar issue with the Menu control and Safari. I had to create a safari.browser file in the App_Browser folder. This folder contains browser definition files that ASP.NET uses to identify individual browsers and determine their capabilities. Here is what I had to put in the safari.browser file.

<browsers>
    <browser refID="safari1plus">
     <controlAdapters>
      <adapter controlType="System.Web.UI.WebControls.Menu" adapterType="" />
     </controlAdapters>
    </browser>
</browsers>

Another thing you could try is to modify the base css syling for the Calendar. The Ajax Calendar Extender has a predefined set of CSS classes that can be overridden.

If you go to http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Calendar/Calendar.aspx and towards the bottom of the page there is a topic on Calendar Theming, listing all the Calendar Css Classes.

Hope it helps.

Answer 3

I came across the same problem today.

The solution, while somewhat difficult to find on the web, is rather trivial

Create a new Div with its position set to relative (style="position:relative;")

and place your textbox and calendarExtender inside the Div.

That fixed the problem i was facing, i hope it does the trick for you too

Similar problem on: http://stackoverflow.com/questions/958555/calendarextender-positioning-problem/3512636#3512636