I'm having trouble getting a basic example to work in IE (9). It works fine in Chrome. Can't reproduce in jsfiddle with IE either.
Paste this into a .html page and navigate by opening via an IIS site or on your local C: drive. You should see that:
1. The tabs appear stacked vertically instead of horizontally
2. The tabs occupy 100% width
3. The static text for tabs 2 and 3 (People and Office) always displays at the bottom (not just when the People or Office is selected)
Paste this into a .html page and navigate by opening via an IIS site or on your local C: drive. You should see that:
1. The tabs appear stacked vertically instead of horizontally
2. The tabs occupy 100% width
3. The static text for tabs 2 and 3 (People and Office) always displays at the bottom (not just when the People or Office is selected)
<
html
>
<
head
>
<
script
type
=
'text/javascript'
src
=
'http://code.jquery.com/jquery-1.7.1.js'
></
script
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css"
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"http://cdn.kendostatic.com/2011.3.1129/styles/kendo.blueopal.min.css"
>
<
script
type
=
'text/javascript'
src
=
"http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"
></
script
>
<
script
type
=
"text/javascript"
>
$(document).ready(function() {
tabStrip = $("#tabStrip").kendoTabStrip({
contentUrls: [
'Home.html', null, null
]
});
});
</
script
>
</
head
>
<
body
>
<
div
id
=
"tabStrip"
>
<
ul
>
<
li
class
=
"k-state-active"
id
=
"Home"
>Home</
li
>
<
li
id
=
"People"
>Meet Our People</
li
>
<
li
id
=
"Office"
>In The Office</
li
>
</
ul
>
<
div
>
</
div
>
<
div
>Hello</
div
>
</
div
>
</
body
>
</
html
>