Stuck with jquery UI tabs. Styling not working quite right

Stuck with jquery UI tabs. Styling not working quite right

Hey all,

Hope someone here can help.

I'm trying to get a tabbed UI working and I'm using a generic theme from ThemeRoller.

jQuery is 1.3
jQuery UI is 1.5.3

My problem is that although the tabs work as intended, the different styles aren't working. For example, when the page loads, tab 1 is selected, the other 2 are dimmed. Mouseover does not highlight any of the tabs and when clicking on tab 2 or 3 the style of the tabs doesn't update, so although content changes, the 1st tab is always highlighted.

What am I doing wrong? Any ideas? I'm pulling my hair out over this, as far as I can tell I've got exactly the same code as the jQuery UI site.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <script type="text/javascript" src="lib/js/jquery.js"></script>       
    <script type="text/javascript" src="lib/js/jqueryPlugins/ui.core.js"></script>
    <script type="text/javascript" src="lib/js/jqueryPlugins/ui.tabs.js"></script>   
       
    <script>
    $(document).ready(function(){
       $('#tabs').tabs();

      
    });
    </script>
   
    <link rel="stylesheet" href="lib/css/jqueryTheme/ui.all.css" type="text/css" media="screen">       

</head>
<body style="font-size:62.5%">
 
    <div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
        <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
            <li class="ui-corner-top ui-state-default ui-tabs-selected ui-state-active">
               <a href="#tabs-1">First</a>
            </li>
            <li class="ui-corner-top ui-state-default">
               <a href="#tabs-2">Second</a>
            </li>
            <li class="ui-corner-top ui-state-default">
               <a href="#tabs-3">Third</a>
            </li>
        </ul>
        <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        <div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
        <div id="tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
    </div>
</body>
</html>


[/code]