adding tabs works terribly different in IE vs firefox
I am working with something that makes use of Jquery's tabs. It works
perfectly in firefox but in IE the add functionality is not doing what
it should by my accounting.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<!--stylesheet that has the barebones hide rule described in
documentation and nothing else-->
<link rel="stylesheet" type="text/css"
href="CSS/jqueryStyles.css"/>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#tabs').tabs();
$('#tabs').tabs("add",'#bob','test',2);
}
);
</script>
</head>
<body>
<h1>Header that shouldn't duplicate as part of the tabs.</h1>
<div id="tabs">
<ul>
<li><a href="#bob">bob</a></li>
</ul>
<div id="bob">howdy</div>
<div id="test">Test Tab Added</div>
</div>
</body>
</html>
This was a simplified version of what I am doing. In reality I build
the <div id="test"> content programatically based on user input and
xml data that I have loaded from a previous click. This however
simplified it and demonstrates that it is strictly the add that is not
working.
Basically it looks like Firefox generates <li><a href="#test">Test</
a></li> when you add the tab. IE Generates
<li><a href="test.html#test">Test</a></li>
In IE it treats it like an ajax loading tab. In firefox it does
exactly what I would want and expect. Please help me solve this.
You can see my full solution working in firefox and breaking in IE at:
http://www.staten-illustration.com/portfolio-new.htm
thanks,
Danny