I'm trying to duplicate our in-house tabs using the TabStrip and I have got all but one part working. I'm copying my wfTabs.css which controls our in house custom tabs and the custom .css for radTabstrip I'm trying to create. As you can see from the image I'm attaching - I have all looking the same except the selected tab left image. This is found at tabHeader .current. I tried putting it in SelectedTab class but that doesn't work. I need it to attach to the LI element for selected tab (as I did with the right image) but I don't see a way to do that. Can someone help me fix this.
wfTabs.css:
.tabHeader {
float:left;
width:100%;
/* background:#DAE0D2 url("bg.gif") repeat-x bottom; */
background: white;
font-size:8pt;
line-height:normal;
border-bottom: 1pt solid #CFCFCF;
}
.tabHeader ul {
margin:0;
padding:3px 10px 0;
list-style:none;
}
.tabHeader li {
float:left;
background:url("../images/wfTabs/left_blue.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
.tabHeader a, .tabHeader a:visited {
float:left;
display:block;
background:url("../images/wfTabs/right_blue.gif") no-repeat right top;
padding:3px 10px 3px 3px;
text-decoration:none;
font-weight:bold;
color:#ffffff;
outline:0;
}
.tabHeader a:hover
{
text-decoration:underline;
color:#ffffff;
cursor:pointer;
}
.tabHeader a:focus, .tabHeader a:active
{
outline:0;
text-decoration:underline;
color:#ffffff !important;
}
.tabHeader .disabledTab a
{
color:#ffffff;
cursor:text;
}
.tabHeader .disabledTab a:hover
{
text-decoration:none;
}
.tabHeader .current {
background-image:url("../images/wfTabs/left_grey.gif");
}
.tabHeader .current a {
background-image:url("../images/wfTabs/right_grey.gif") !important;
color:#333 !important;
}
.tabHeader .current a:hover {
text-decoration:none;
}
.tabHeader .markgreen
{
background-image:url("../images/wfTabs/left_green.gif");
}
.tabHeader .markgreen a {
background-image:url("../images/wfTabs/right_green.gif") !important;
color:#ffffff !important;
}
________________________________________________________________________________________________
custom radTabstrip .css:
.radTabDiv {
float: left;
width: 100%;
/* background:#DAE0D2 url("bg.gif") repeat-x bottom; */
background: white;
font-size: 8pt;
line-height: normal;
border-bottom: 1pt solid #CFCFCF;
margin: 0;
padding: 3px 10px 0;
list-style: none;
}
div.RadTabStrip .rtsLI {
margin-right: 2px;
float: left;
background: url("../images/wfTabs/left_blue.gif") no-repeat left top;
margin: 0;
padding: 0 0 0 9px;
}
div.RadTabStrip .rtsUL {
margin: 0;
padding: 3px 10px 0;
list-style: none;
}
div.RadTabStrip .rtsLink {
float: left;
display: block;
background: url("../images/wfTabs/right_blue.gif") no-repeat right top;
padding: 3px 10px 3px 3px;
text-decoration: none;
font-weight: bold;
color: #ffffff;
outline: 0;
}
div.RadTabStrip .rtsSelected {
background-image: url("../images/wfTabs/right_grey.gif") !important;
color: #333 !important;
}
wfTabs.css:
.tabHeader {
float:left;
width:100%;
/* background:#DAE0D2 url("bg.gif") repeat-x bottom; */
background: white;
font-size:8pt;
line-height:normal;
border-bottom: 1pt solid #CFCFCF;
}
.tabHeader ul {
margin:0;
padding:3px 10px 0;
list-style:none;
}
.tabHeader li {
float:left;
background:url("../images/wfTabs/left_blue.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
.tabHeader a, .tabHeader a:visited {
float:left;
display:block;
background:url("../images/wfTabs/right_blue.gif") no-repeat right top;
padding:3px 10px 3px 3px;
text-decoration:none;
font-weight:bold;
color:#ffffff;
outline:0;
}
.tabHeader a:hover
{
text-decoration:underline;
color:#ffffff;
cursor:pointer;
}
.tabHeader a:focus, .tabHeader a:active
{
outline:0;
text-decoration:underline;
color:#ffffff !important;
}
.tabHeader .disabledTab a
{
color:#ffffff;
cursor:text;
}
.tabHeader .disabledTab a:hover
{
text-decoration:none;
}
.tabHeader .current {
background-image:url("../images/wfTabs/left_grey.gif");
}
.tabHeader .current a {
background-image:url("../images/wfTabs/right_grey.gif") !important;
color:#333 !important;
}
.tabHeader .current a:hover {
text-decoration:none;
}
.tabHeader .markgreen
{
background-image:url("../images/wfTabs/left_green.gif");
}
.tabHeader .markgreen a {
background-image:url("../images/wfTabs/right_green.gif") !important;
color:#ffffff !important;
}
________________________________________________________________________________________________
custom radTabstrip .css:
.radTabDiv {
float: left;
width: 100%;
/* background:#DAE0D2 url("bg.gif") repeat-x bottom; */
background: white;
font-size: 8pt;
line-height: normal;
border-bottom: 1pt solid #CFCFCF;
margin: 0;
padding: 3px 10px 0;
list-style: none;
}
div.RadTabStrip .rtsLI {
margin-right: 2px;
float: left;
background: url("../images/wfTabs/left_blue.gif") no-repeat left top;
margin: 0;
padding: 0 0 0 9px;
}
div.RadTabStrip .rtsUL {
margin: 0;
padding: 3px 10px 0;
list-style: none;
}
div.RadTabStrip .rtsLink {
float: left;
display: block;
background: url("../images/wfTabs/right_blue.gif") no-repeat right top;
padding: 3px 10px 3px 3px;
text-decoration: none;
font-weight: bold;
color: #ffffff;
outline: 0;
}
div.RadTabStrip .rtsSelected {
background-image: url("../images/wfTabs/right_grey.gif") !important;
color: #333 !important;
}