JQuery tab issue - Tab bar taller then tabs (Solved)

Today is my first attempt at using Jquery... and so far it freackin rocks. I'm using the tab ui and having an issue though. The tab bar is about twice the size of the tabas. Any Ideas on what I might do? **Note: I have attached a screen shot so you can see what I'm talking about

I'm using very basic code:

<script type="text/javascript">
    $(function() {
        $("#tabs").tabs();
    });
</script>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1"><span>Traffic & Visits</a></span></li>
        <li><a href="#tabs-2"><span>Goals and Conversions</a></span></li>
    </ul>
    <div id="tabs-1">
        <iframe
            width="100%"
            height="500"
            src="IFRAMEURL"
            scrolling="auto"
            frameborder="0"
            marginheight="0"
            marginwidth="0">
        </iframe>
    </div>
    <div id="tabs-2">
        <iframe
            width="100%"
            height="500"
            src="IFRAMEURL"
            scrolling="auto"
            frameborder="0" marginheight="0" marginwidth="0">
        </iframe>
    </div>
</div>

The tabs work great, but the bar is just to 'tall'