User1769015664 posted
I am using AJAX Tab Container and have the following CSS; the Tabs don't look like tabs anymore and it seems to be like a menu bar.
Also, my tabs are going from left to right which takes up the entire screen width; how do I stack them up?
/*Header*/
.Tab .ajax__tab_header
{
color: #4682b4;
font-family:Calibri;
font-size: 14px;
font-weight: bold;
background-color: #ffffff;
margin-left: 0px;
}
/*Body*/
.Tab .ajax__tab_body
{
border:1px solid #b4cbdf;
padding-top:0px;
}
/*Tab Active*/
.Tab .ajax__tab_active .ajax__tab_tab
{
/*color: #ffffff;*/
color: red;
background:url("../../tab_active.gif") repeat-x;
height:20px;
}
.Tab .ajax__tab_active .ajax__tab_inner
{
color: #ffffff;
background:url("../../tab_left_active.gif") no-repeat left;
padding-left:10px;
}
.Tab .ajax__tab_active .ajax__tab_outer
{
color: #ffffff;
background:url("../../tab_right_active.gif") no-repeat right;
padding-right:6px;
}
/*Tab Hover*/
.Tab .ajax__tab_hover .ajax__tab_tab
{
color: #000000;
background:url("../../tab_hover.gif") repeat-x;
height:20px;
}
.Tab .ajax__tab_hover .ajax__tab_inner
{
color: #000000;
background:url("../../tab_left_hover.gif") no-repeat left;
padding-left:10px;
}
.Tab .ajax__tab_hover .ajax__tab_outer
{
color: #000000;
background:url("../../tab_right_hover.gif") no-repeat right;
padding-right:6px;
}
/*Tab Inactive*/
.Tab .ajax__tab_tab
{
color: #666666;
background:url("../../tab_Inactive.gif") repeat-x;
height:20px;
}
.Tab .ajax__tab_inner
{
color: #666666;
background:url("../../tab_left_inactive.gif") no-repeat left;
padding-left:10px;
}
.Tab .ajax__tab_outer
{
color: #666666;
background:url("../../tab_right_inactive.gif") no-repeat right;
padding-right:6px;
margin-right: 2px;
}
