This is a migrated thread and some comments may be shown as answers.

IE Doesn't Work At All

2 Answers 122 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Jeff
Top achievements
Rank 1
Jeff asked on 16 Jan 2012, 09:12 AM
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)


<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>


2 Answers, 1 is accepted

Sort by
0
Jeff
Top achievements
Rank 1
answered on 16 Jan 2012, 09:18 AM
I finally traced down the problem. Any idea why 

<!DOCTYPE html>

makes all the difference in IE?
0
Kamen Bundev
Telerik team
answered on 16 Jan 2012, 10:13 AM
Hello Jeff,

If you don't specify the doctype on a web page, you're basically turning Quirks mode on in it. In Internet Explorer Quirks mode means that the browser will use the IE5.5 engine to render its contents, which uses different box model and generally has too many issues to even start listing them. Check this extensive doctype effects article for more information.

Greetings,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
TabStrip
Asked by
Jeff
Top achievements
Rank 1
Answers by
Jeff
Top achievements
Rank 1
Kamen Bundev
Telerik team
Share this question
or