jquery ui tabs and huge buttons problem

In my page i got 3 divs [A] [B] [C] one next to each other [A] and [C] contain jquery ui tabs.

Now the middle div [B] contains a mapviewer instance. In order to match the side divs style i created an empty tab (with no tabs) and added my mapviewer tools as button masked a hrefs on the tab header.

the jquery

$("#maptabs").tabs();
$("#zoomin").button();
$("#zoomout").button();
$("#repeat0").button();
$("#repeat1").button();
$("#boxzoom").button();

and the html:

<div class="maptab">
<div id="maptabs">
    <ul>
        <li><div class="tls">
        <a href="#" id= "zoomin" onclick= "zoomIn();" >开发者_C百科;+</a>
        <a href="#" id= "zoomout" onclick= "zoomOut();" >-</a>
        <a href="#" id= "boxzoom" onclick= "boxzoomin();" >[]</a>
        <a href="#" id="repeat0" name="repeat">VIEW</a>
        <a href="#" id="repeat1" name="repeat" onclick="gotoADE();">EDIT</a>
</div></li>
            </ul>
<div id="tabs-1">
    <div id="mapAll">
        <div id="mapJ"></div>
        <div id="mouse_location" ></div>
    </div>
    </div>
    </div>
    </div>

now the problem is that those masked a hrefs come out as extremely huge buttons 80x40 pixel big. does anyone knows why? and if making a tab ui with buttons instead of tabs on its header is a stupid idea or not.

the reason I did not put normal buttons is that the page for some reason reloads when each tool is activated

---

http://jsbin.com/oface4/edit

Just add these CSS rules to your code

.ui-tabs .ui-tabs-nav li a {
   padding:0px;
}
.ui-button-text {
   font-size:13px;
}