Trouble Layering in CSS

Question

Hi,

I'm trying to layer some elements using z-index and it's not working at all.

Here's the CSS:

    ul.ui-tabs-nav {list-style:none; float:left; display:block;padding:0; margin:6px 0px 0px 0px; width:85px;  }
    ul.ui-tabs-nav li {padding:0px 7px; height:64px; background:url(/templates/gspm_home/images/tab_bak.gif) top left no-repeat;}
    ul.ui-tabs-nav li.ui-tabs-selected {z-index:100; display:block; background:url(/templates/gspm_home/images/tab_bak_current.gif) top left no-repeat; overflow:visible;  }
.ui-tabs-panel { z-index:1; width:360px; height:256px; padding:0;background:#fff; float:right; margin-top:6px;}

When the ui-tabs-selected class is invoked, there is supposed to be a background image that layer above the ui-tabs-panel. But nothing happens.

Here is the html markup:

<ul class="ui-tabs-nav">
    <li class=""> <a href="#1" class="blue">
    Link</a></li>
    <li class="ui-tabs-selected"> <a href="#2" class="blue">Link</a></li>
    <li class=""> <a href="#3" class="blue"></a></li>
    <li class=""> <a href="#4" class="blue">Link</a></li></ul>


                <div style="" class="leading ui-tabs-panel ui-tabs-hide" id="1">
                Content
                </div>
                <div style="" class="leading ui-tabs-panel" id="2">
                Content
                </div>  
                <div style="" class="leading ui-tabs-panel ui-tabs-hide" id="3">
                Content
                     </div>
                <div style="" class="leading ui-tabs-panel ui-tabs-hide" id="4">
                Content
                </div>

What am I missing?

www.gspm.org - site's under construction. The section in question are the rotating tabs. Uses jQuery UI Tabs plugin.

Answer 1

You need to use:

ul.ui-tabs-nav
{
    list-style:none;
    padding:0;
    margin:6px 0px 0px 0px;
    width:85px;
    position: absolute;
    z-index: 100;
} 

ul.ui-tabs-nav li.ui-tabs-selected
{
    display:block;
    background: url(/templates/gspm_home/images/tab_bak_current.gif) top left no-repeat; 
    width: 100px
}

z-index won't take effect unless the element has position absolute or relative iirc. You also need to set a width on the selected li - a background image won't "escape" even with overflow: visible; (which you can now remove).

This worked for me in FireBug - hopefully it will work when you put it in code.