ui tabs and position relative

Question

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

Answer 1

From the code you've posted, and if I've understood your problem correctly, the "top: 30px" in your icon div is interfering with your tabs. The icon image height is not declared but I'm assuming it's less than 30px. Therefore, given that your icon has a z-index of 1, it would appear on top of the tabs.

If the icon is intended to appear on the same line as the tabs, this may still occur as no width is declared for the icon's parent div. This means it may take up the entire row.

There are several ways to fix this, but I think you're in the best position to come up with right solution, depending on the exact effect you're going for. The culprit seems to be "top: 30px" which pushes the div down by 30px. If you remove that, you can likely also remove the "position: relative" from the same div.

Hope that helps.

Answer 2

It is most likely the IE hasLayout bug and the image is not forcing the height of the tab to change as expected. This can be fixed by adding zoom:1 to any position:relative elements.

Also you might want to add a padding with 4 specifications like so...

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

Hope that helps!