Hi,

I am using ui tabs a lot.In my last project i add an icon just before tabs and the tab links start a strange behavior, you can not click to change the tabs if you are above tab name BUT only when you are outside tab name.

Here is the code

<div style="float:left;display:inline;width:718px;padding:5px;border:1px solid #ececec">
   <!--ICON just before TABs-->
<div style="z-index:1;position:relative;top:30px;left:5px">
    <img src="../graphics/icons/add.gif" onclick="AddTab();" href="javascript:void(0);" id="addNewTab"/>
</div>

<div  id="tabs" >   
    <ul >
        <li >
            <img src="../graphics/icons/x.gif" onclick="RemoveTab(this)" style="cursor: pointer;" />
            <a href="#tab-1"><span id="tabContent-1"><span class="tabText" >TAB1</span></span></a>
        </li>
        <li >
            <img src="../graphics/icons/x.gif" onclick="RemoveTab(this)" style="cursor: pointer;" />
            <a href="#tab-2"><span id="tabContent-2"><span class="tabText" >TAB2</span></span></a>
        </li>
    </ul>               

    <div id="tab-1" >
        contents    
    </div>
    <div id="tab-2" >
        contents    
    </div>

</div><!--tabs-->

I know that ui.css has position relative for tabs

    .ui-tabs .ui-tabs-nav {
        list-style:none outside none;
        padding:0.2em 0.2em 0;
        position:relative;
   }

and i dont know if meshing up with my icon.

If i remove the position:relative from the icon (add.gif) everything works fine

Any help is appreciated