Jquery tabs add space at the top

Question

Ok, here's the deal. I set jQuery tabs from http://jqueryui.com/tabs/#mouseover

But it seems to work fine only from the first two tabs, when I activate the tab 3, 4, ... it adds a space in front of each div and so each div moves down about 10 pixels.

My script doesn't really matter:

JQuery

$(document).ready(function() { $( "#tabs" ).tabs({ event: "mouseover" }); }); 

HTML:

  <div id="tabs"> <ul class="tabs"> <li><a href="#tab-1">1</a></li> <li><a href="#tab-2">2</a></li> <li><a href="#tab-3">3</a></li> <li><a href="#tab-4">4</a></li> <li><a href="#tab-5">5</a></li> <li><a href="#tab-6">6</a></li> </ul> <div id="1"></div> <div id="2"></div> <div id="3"></div> <div id="4"></div> <div id="5"></div> <div id="6"></div> </div> 

Answer 1

The problem is to close every div, there is an extra br

 </div> <br /> ^ ^ ^ (remove this br) <div id="tab-n".....> // something </div>