Tab is not Tab; FF vs IE

[Marcus]

Hi everybody:

FF:


IE:


I prefer the FF rendering, of course.

How to configure the KendoTabStrip to be fit for both browsers?

The code:
...
<div id="tabstrip">
     <ul>
         <li>Table</li>
         <li>Log</li>
         <li>Top User</li>
     </ul>
     <!-- first tab -->
     <div style="overflow:scroll;min-height:450px;height:450px;">Please select dates and click Get Report.</div>
     <!-- second tab -->
     <div style="min-height:300px;height:300px;">To send emails please click on Email Report.</div>
      <!-- third tab -->
     <div style="min-height:800px;height:800px;">Please select dates and click get Report.</div>

 </div>
...
and
...
var tabStrip = $("#tabstrip").kendoTabStrip({animation: false});
...

Thank you
Marcus

[Dimo]

Hi Marcus,

The proper layout of the tabs in IE7 is taken care of by the following CSS rule, which is at the end of kendo.common.css:

*+html .k-tabstrip-items .k-item,
*+html .k-tabstrip-items .k-link
{
    display: inline;
    zoom: 1;
}

For newer IE versions and other browsers, the following is in effect:

.k-tabstrip-items .k-item,
.k-tabstrip-items .k-link
{
    display: inline-block;
}

In case you are testing with IE6 or quirks mode, we don't support these.

You can test with our online demos which work as expected:

http://demos.kendoui.com/tabstrip/index.html


Another possible reason for the problem is that the above CSS styles are overridden by some custom styles in your application.

Greetings,
Dimo
the Telerik team