title: jQuery UI tabs positioned about 50% of their height below eachother
body: <p>This is quite odd, and I can't get it to stop happening.</p>
  
  <p>Here's the relevant code. I'm using a Google CDN host for the UI-lightness theme.</p>
  
  <pre><code>&lt;div id="prof_div"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#prof_home"&gt;Profile&lt;/a&gt;&lt;/li&gt;&lt;br/&gt;
          &lt;li&gt;&lt;a href="#prof_details"&gt;Details&lt;/a&gt;&lt;/li&gt;&lt;br/&gt;
          &lt;li&gt;&lt;a href="#prof_settings"&gt;Settings&lt;/a&gt;&lt;/li&gt;&lt;br/&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>That's the only relevant HTML. Here's jQuery/JavaScript</p>
  
  <pre><code>    $(document).ready(function() {  
          $('#prof_div').tabs({ 
              fx: { height: 'toggle', opacity: 'toggle' } 
          });
      }); 
  </code></pre>
  
  <p>And it's displaying like this:</p>
  
  <pre><code>TAB 1
        TAB 2
              TAB 3
  </code></pre>
  
  <p>Instead of like this:</p>
  
  <pre><code>TAB 1 - TAB 2 - TAB 3
  </code></pre>
  
  <p>I have no custom CSS acting on them at all (I even blanked my stylesheets to check).</p>
  
  <p>Any idea why this is happening? I'll post a screenshot if necessary.</p>
  
  <p>Thanks! :)</p>
  
  <p>EDIT</p>
  
  <p>Here's my CDN requests</p>
  
  <pre><code>&lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" /&gt;
  &lt;script type="text/javascript" src="https://www.google.com/jsapi?key=very long string"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="/JSFunctions.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  google.load("jquery", "1.6.4");
  google.load("jqueryui", "1.8.16");
  ....
  &lt;/script&gt;
  </code></pre>