jquery-ui vertical tab bottom border problem

Question

hey there everyone

i am trying to implement jquery UI tabs, but i want to do it vertically, i found this tutorial here on how to built a vertical tab, modified css a bit and i got what i want, there's only one thing i cant figure out, that is how to make a border-bottom on the selected tab "ui-state-default ui-tabs-selected ui-state-active", i have tried several workaround but still come up with nothing

my current css:

    .ui-tabs-vertical {  }
 .ui-tabs-vertical .ui-widget{font-size:1em; }
 .ui-tabs-vertical .ui-state-default{border:none;  }
 .ui-tabs-vertical .ui-tabs-nav { float: left; width:100px;}
 .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 99%; border-bottom: 0px solid; border-right-width: 0 !important; margin: 0 -1px .2em 0; padding:10px 0 10px 10px;; }
 .ui-tabs-vertical .ui-tabs-nav li a { display:block; }
 .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding:10px .1px 10px 10px; margin-bottom:.2em; border-right-width: 1px; border: 1px solid #aaaaaa; border-bottom:1px; }
 .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width:773px; min-height:550px; border:1px solid #AAAAAA; -moz-border-radius:0;}

and the jquery:

$(function() {
    $("#portfolios").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
    $("#portfolios li").removeClass('ui-corner-top');
});

here's the screen shot

what should i do ??

thanks

Answer 1

The classes " .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected" have a border style assigned:

border: 1px solid #aaaaaa;

but also this style:

border-bottom:1px;

The latter is the one that will be used for the bottom-border. But it has no color assigned. I don't know what the default border-color of that element is, but that might be causing your problem.