CSS in ASP page

[Sushmitha]

Please help me, this is really bugging since a week.

I have a code that says:

<DIV CLASS ="SLIDETABS">
<ul id="solutionstabs" class="tabs">							
							<li ><a href="#" title="Solution Overviews" rel="solutions1" ><span>Solution Overviews</span></a></li>							
							<li ><a href="#" title="Implementation Accelerators"  rel="solutions2" ><span>Implementation Accelerators</span></a></li>							
							<li ><a href="#" title="Customer Success Stories" rel="solutions3" ><span>Customer Success Stories</span></a></li>						
							</ul></DIV>

If i use the DIV tag class 'slidetabs' the asp apge doesnt pick the styles of this class instead it takes only from the class'tabs.
Both classes are on the same style sheet...please help...

----my style sheet:

#slidetabsmenu {
float:left;
width:100%;
margin-left: 0;

line-height:25px;
border-bottom: 0px solid gray;
font: bold 12px Verdana;
}

* html #slidetabsmenu{ /*IE only. Add 1em spacing between menu and rest of content*/
margin-bottom: 0em;
}

#slidetabsmenu ul{
float:left;
list-style-type: none;
margin:0;
margin-left: 0px;
padding:0;
}

#slidetabsmenu li{
float:left;
display:inline;
margin:0;
padding:0;
}


#slidetabsmenu a {
float:left;
background:url(images/tab-left.gif) no-repeat left top;
margin:0;
padding:0 0 0 9px;
text-decoration:none;
}

#slidetabsmenu a span {
float:left;
display:block;
background:url(images/tab-right.gif) no-repeat right top;
padding:3px 14px 3px 5px;
font-weight:bold;
color:#3B3B3B;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#slidetabsmenu a span {float:none;}
/* End IE5-Mac hack */

#slidetabsmenu a:hover span {
color: black;
}

#slidetabsmenu #current a {
background-position:0 -125px;
}

#slidetabsmenu #current a span {
background-position:100% -125px;
color: red;
}

#slidetabsmenu a:hover {
background-position:0% -125px;
}

#slidetabsmenu a:hover span {
background-position:100% -125px;
}
/* ######### CSS for metashade Tabs. Remove if not using ######### */

.tabs{
/*padding: 3px 0;*/
margin-left: 0;
margin-top: 0;
margin-bottom: 0;
list-style-type: none;
text-align: left;
font-size:12px;
width:100%;
line-height:25px;

}

.tabs li{
float:left;
margin-bottom: 0;
padding: 0;
margin-left: 0px;
display:inline;
text-align: left;
line-height:25px;
}
.tabs ul{
float:left;
list-style-type: none;
margin:0;
margin-left: 0px;
padding:0;
text-align: left;
line-height:25px;

}

.tabs li a{
float:left;
text-decoration: none;
margin-bottom: 0;
padding:3px 14px 3px 5px;
font:bold;
text-align: left;
color: #2d2b2b;
background:url(images/tab-right.gif) no-repeat right top;
border-bottom-color: white;
line-height:25px;
}

.tabs li a:visited{
color: #2d2b2b;
text-align: left;
}

.tabs li a:hover{
float:left;
text-decoration: none;
background:white;
}

.tabs li a.selected{ /*selected main tab style */
float:left;

border-bottom-color: white;
background:white ;
text-align: left;
}

.tabs li a.selected:hover{ /*selected main tab style */
text-decoration: none;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}

/* ######### CSS for Inverted Modern Bricks II Tabs. Remove if not using ######### */

.modernbricksmenu2{
padding: 0;
width: 362px;
border-top: 5px solid #D25A0B; /*Brown color theme*/ 
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.modernbricksmenu2 ul{
margin:0;
margin-left: 10px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

.modernbricksmenu2 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

.modernbricksmenu2 a{
float: left;
display: block;
font: bold 11px Arial;
color: white;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
background-color: black; /*Brown color theme*/ 
border-top: 1px solid white;
}

.modernbricksmenu2 a:hover{
background-color: #D25A0B; /*Brown color theme*/ 
color: white;
}

.modernbricksmenu2 a.selected{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/ 
color: white;
border-color: #D25A0B; /*Brown color theme*/ 
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}

/* ######### CSS for Indented CSS Tabs. Remove if not using ######### */


.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
}

.indentmenu ul{
margin: 0;
padding: 0;
float: left;
/* width: 80%; width of menu*/
border-top: 1px solid navy; /*navy border*/
background: black url(indentbg.gif) center center repeat-x;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid navy; /*navy divider between menu items*/
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
background: black url(indentbg2.gif) center center repeat-x;
}


.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}

[DrBunchman]

Hi Sushmitha,

Welcome to Bytes.com! I hope you find the site useful.

Please don't forget to wrap your code in CODE tags - it makes your posts much easier to read - and please read the Posting Guidelines if you have not done so already.

I don't see a class called SLIDETABS in your style sheet but I do see one called tabs - could this be the problem?

Also please note that for strict XHTML document types class and id names can be case sensitive to I would avoid naming them in upper case just to keep things simple.

Dr B