jQuery UI tabs positioned about 50% of their height below eachother

This is quite odd, and I can't get it to stop happening.

Here's the relevant code. I'm using a Google CDN host for the UI-lightness theme.

<div id="prof_div">
    <ul>
        <li><a href="#prof_home">Profile</a></li><br/>
        <li><a href="#prof_details">Details</a></li><br/>
        <li><a href="#prof_settings">Settings</a></li><br/>
    </ul>

That's the only relevant HTML. Here's jQuery/JavaScript

    $(document).ready(function() {  
        $('#prof_div').tabs({ 
            fx: { height: 'toggle', opacity: 'toggle' } 
        });
    }); 

And it's displaying like this:

TAB 1
      TAB 2
            TAB 3

Instead of like this:

TAB 1 - TAB 2 - TAB 3

I have no custom CSS acting on them at all (I even blanked my stylesheets to check).

Any idea why this is happening? I'll post a screenshot if necessary.

Thanks! :)

EDIT

Here's my CDN requests

<link rel="stylesheet" href="http://ajax.googleapis.com开发者_JAVA技巧/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript" src="https://www.google.com/jsapi?key=very long string"></script>

<script type="text/javascript" src="/JSFunctions.js"></script>
<script type="text/javascript">
google.load("jquery", "1.6.4");
google.load("jqueryui", "1.8.16");
....
</script>

Remove those ending <br/>s from your <li>s. They shouldn't be there.

<div id="prof_div">
<ul>
    <li><a href="#prof_home">Profile</a></li><br/>
    <li><a href="#prof_details">Details</a></li><br/>
    <li><a href="#prof_settings">Settings</a></li><br/>
</ul>

Here's a fiddle.