Menu
It's really pretty simple. I have the following code.. and it works in every other html5 compatible browser (Safari 5, Chrome 9, FireFox), but in IE9 (RC) I get the following errors.
Line: 16 Error: Object doesn't support property or method 'getElementsByTagName'
Line: 40 Error: Object doesn't support property or method 'tabs'
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
$("#ribbon").tabs();
});
</script>
</head>
<body>
<header>
<span id="branding"></span>
<div id="ribbon-navigation">
<div id="ribbon">
<ul>
<li><a href="#ribbon-1">1</a></li>
<li><a href="#ribbon-2">2</a></li>
<li><a href="#ribbon-3">3</a></li>
<li><a href="#ribbon-4">4</a></li>
</ul>
<div id="ribbon-1" class="ribbon-strip">
@Html.Partial("Menus/Ribbons/__H1")
</div>
<div id="ribbon-2" class="ribbon-strip">
@Html.Partial("Menus/Ribbons/__2")
</div>
<div id="ribbon-3" class="ribbon-strip">
@Html.Partial("Menus/Ribbons/__3")
</div>
<div id="ribbon-4" class="ribbon-strip">
@Html.Partial("Menus/Ribbons/__4")
</div>
</div>
</div>
</header>
</body>
</html>
I could understand if my CSS just didn't produce the right styles - but it looks like it's outright ignoring $("#ribbon").tabs(); all together. Any ideas?
557
Further digging yielded more fruitful results... bugs.jquery.com/ticket/8052 - This is apparently a bug in IE, and was fixed in an update of jQuery that came out Yesterday of all times! I had to reference jQuery 1.5.1, and it all worked fine.
Thank you to everyone who jumped in with helpful suggestions. They were all very good ideas, but this time it turned out to simply be a bug with IE9 and nothing more.
93
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
