Javascript tabs vises forkert i IE8
Jeg er løbet ind i det problem at når min tab control vises i IE8 så vises al teksten. Er der nogen her der kan spotte fejlen. Det ser fint ud i firefox og chrome.<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript" src="../../scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../../scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="../../scripts/jquery.cookie.js"></script>
<script type="text/javascript" src="../../scripts/common.js"></script>
<link href="../../Content/Themes/Start/jquery-ui-1.8.12.custom.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript">
$(function () {
var page_count = $("#page-container div").length;
$("#page-container").css("width", (page_count * 500));
$("#tab-control .tab-bar ul li").hover(function () {
$(this).css("background-color", "#4b6c9e");
$(this).css("color", "#FFFFFF");
},
function () {
$(this).css("background-color", "#FFFFFF");
$(this).css("color", "gray");
}
);
$("#tab-control .tab-bar ul li").click(function () {
var p = ($(this).index() * 500);
$("#page-container").animate({ left: "-" + p + "" }, 300);
});
});
</script>
<h2>Velkommen</h2>
Vælg din login metode
<div id="tab-control">
<div class="tab-bar">
<ul>
<li>TAB 1</li>
<li>TAB 2</li>
<li>TAB 3</li>
</ul>
</div>
<div id="content">
<div id="page-container">
<div>
Test 1
</div>
<div>
Test 2
</div>
<div>
Test 3
</div>
</div>
</div>
</div>
<% if (Model.ErrorMessage != null && Model.ErrorMessage.Length > 0){%>
<div id="dialog-technical-error" title="Teknisk Fejl">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Teknisk Fejl
</p>
<p>
<b><%:Model.ErrorMessage%></b>
</p>
</div>
<% }%>
</asp:Content>