Can not get the tabs to display?

Can not get the tabs to display? help..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="<link rel="STYLESHEET" href="../../../../1.7.3/development-bundle/themes/base/ui.all.css" type="text/css">">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery UI Tabs Example 1</title>
  </head>
  <body>
	<div id="myTabs"> 
	  <ul>
  	    <li><a href="#a">Tab 1</a></li>
    	<li><a href="#b">Tab 2</a></li>
      </ul>
      <div id="a">This is the content panel linked to the first tab, it is shown by default.</div>
      <div id="b">This content is linked to the second tab and will be shown when its tab is clicked.</div>
    </div>
    <script type="text/javascript" src="../../WebInterface/jquery/customer_theme/js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="../../WebInterface/jquery/customer_theme/development-bundle/ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="../../WebInterface/jquery/customer_theme/development-bundle/ui/jquery.ui.tabs.js"></script>
    <script type="text/javascript">
	  //define function to be executed on document ready
	  $(function(){ 
	    //create the tabs
	    $("#myTabs").tabs();
	  });
	</script>
  </body>
</html>

Open in new window

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="../../../../1.7.3/development-bundle/themes/base/ui.all.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery UI Tabs Example 1</title>
  </head>
  <body>
	<div id="myTabs"> 
	  <ul>
  	    <li><a href="#a">Tab 1</a></li>
    	<li><a href="#b">Tab 2</a></li>
      </ul>
      <div id="a">This is the content panel linked to the first tab, it is shown by default.</div>
      <div id="b">This content is linked to the second tab and will be shown when its tab is clicked.</div>
    </div>
    <script type="text/javascript" src="../../WebInterface/jquery/customer_theme/js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="../../WebInterface/jquery/customer_theme/development-bundle/ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="../../WebInterface/jquery/customer_theme/development-bundle/ui/jquery.ui.tabs.js"></script>
    <script type="text/javascript">
	  //define function to be executed on document ready
	  $(function(){ 
	    //create the tabs
	    $("#myTabs").tabs();
	  });
	</script>
  </body>
</html>

Open in new window

tabs.bmp
areyouready344Asked:
Who is Participating?
 
Slim81Connect With a Mentor Commented:
So the tabs are showing up as bullet points instead of actual "tabs"?

Sounds like you are not pulling the css file correctly, where is the css file on your server in relation to the page you are displaying the tabs?

Based on your code, it looks like page is quite a few folder deep, compared to your css file....
"../../../../1.7.3/development-bundle/themes/base/ui.all.css"

rootLocation/Folder1/Folder2/Folder3/1.7.3/development-bundle/themes/base/ui.all.css
0
 
Lukasz ChmielewskiCommented:
If you verify the paths, try using

$(document).ready(function(){
$("#myTabs").tabs();
});

Open in new window


instead of

$(function(){ 
	    //create the tabs
	    $("#myTabs").tabs();
	  });

Open in new window

0
 
areyouready344Author Commented:
Same problem after using the fully-qualified path and replacing the function to the $(document). ready function

I got this code example from the ebook called Jquery UI 1.7 chapter 3 and using there version it works.

The only difference here is that I"m using jquery UI version 1.8.11 and base jquery version 1.5.1  

The only  difference I noticed between these different version is the naming change...

For example, jquery 1.3.2 uses name as ---> ui.core.js
jquery 1.5.1 uses name as ---> jquery.ui.core.js
0
 
areyouready344Author Commented:
Slim81 was right, it was a path problem. Is there tool that can test a html src path?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.