IE Compatibility Mode

[Joe]

My calendar appears fine in standards mode, but only displays the header in compatibility mode.  It's dynamically loaded in a partial view.  What's the best way to make it appear and work properly in both compabibility and standards mode?

Joe

[Dimo]

Hello Joe,

I am afraid the provided information is not enough to determine the cause of the problem. Generally, the Calendar should work in both cases. Have you tried inspecting the page elements with IE's web developer toolbar (press F12) - it is possible that some custom styles interfere with the Calendar's layout. Can you please provide a live URL or a standalone runnable demo?

Greetings,
Dimo
the Telerik team

[Joe]

Maybe the trick, to reproducing the problem, was to put the Calendar inside of a tabstrip.  Here's some example code:

<% Html.Telerik().TabStrip()
        .Name("MyTabs")
        .Items(tabStrip =>
         {
             tabStrip.Add()
                .Text("My Tab")
                .Content(() =>
                 {
                %>
                    <%= Html.Telerik().Calendar().Name("MyCalendar") %>
                <%
                 });
         })
         .Render();
%>

• This was added to a brand new Telerik MVC 2 project, on the Index.aspx view.
• I'm using IE 8.
• The calendar displays properly in standards mode.
• Click the Compatibility mode button, reload the page, click the tab, and observe that only the header appears.

Thanks,

Joe

[Dimo]

Hi Joe,

Now I see - the problem is caused by a display:none style intended for the TabStrip's inactive containers, which is inherited by the Calendar, because it has a t-content CSS class for its day matrix wrapper.

The issue occurs only in IE6 and IE7, which do not understand the display:table CSS declaration for the Calendar. You can add the following CSS rules as a workaround. We will include them in the next internal build of our MVC extensions.

/*IE7*/
*+html .t-tabstrip .t-calendar .t-content { display:block; }
/*IE6*/
* html .t-tabstrip .t-calendar .t-content { display:block; }

Do not combine the selectors if you must support both browsers, as they will stop working.

I have updated your Telerik points for bringing the issue to our attention.

All the best,
Dimo
the Telerik team

[Joe]

Dimo,

That works great.

Thanks,

Joe

[charles]

Any word on this will be fixed?  I'm having the exact same issue with the Menu control in IE7.  I'm using Q2 2011.

There doesn't appear to be display:table set in the common.css for the menu, but I'm experiencing the exact same problem that Joe describes above.

Thanks!

[Dimo]

Hello Charles,

The issue will be resolved for all scenarios in the coming Q3 2011 release (due somewhere in mid November).

Regards,
Dimo
the Telerik team