Hi -
Having an issue getting the active link to remain
"highlighted" on a tabbed menu bar I created. The
page is .aspx and using a referenced stylesheet. As
you'll notice the links are server controls but this
should not affect their CSS style reference, which is
essentially set to the same as the a.hover reference.
Can someone take a peek at the code and see where I
could be going wrong? -also, I tried changing the CSS
style in the code-behind page but don't fully
understand the usage of the CssStyleCollection.Item
Property enough to make it work; I would be interested
in either a pure CSS solution or some nifty code. Oh,
and I can't use the 'set the <body id""> property'
method because the tabbed menu is a section of a
larger page. Thanks, Joe
Below is the code.
The HTML:
<div id="tabs">
<ul id="tabs">
<li>
<A id="linkHome" href="#home"
runat="server"><span>Home</span></A>
</li>
<li>
<A id="linkDN" href="#daily"
runat="server"><span>Daily News</span></A>
</li>
<li>
<A id="linkInq" href="#inq"
runat="server"><span>Inquirer</span></A>
</li>
<li>
<A id="linkReports" href="#reports"
runat="server"><span>Reports</span></A>
</li>
<li>
<A id="linkSale" href="#sale"
runat="server"><span>Sale</span></A>
</li>
<li>
<A id="linkBulletin" href="#bulletin"
runat="server"><span>Bulletin Board</span></A>
</li>
<li>
<A id="linkTools" href="#tools"
runat="server"><span>Tools</span></A>
</li>
<li>
<A id="linkAdmin"
href="#admin"><span>Admin</span></A>
</li>
</ul>
</div>
The CSS:
/* Tabs Navigation */
#tabBottom {
background-color: #26a;
color: #26a;
width: 620px;
height: 8px;
margin: 0px;
padding: 0px;
}
#tabs a {
color: #000;
background: #bfddee
url("assets/images/tabs/left-tab.gif") left top
no-repeat;
font: 14px/14px Arial, Helvetica, sans-serif;
text-decoration: none;
padding-left: 10px
}
#tabs a span {
background: url("assets/images/tabs/right-tab.gif")
right top no-repeat;
padding-right: 10px
}
#tabs a, #tabs a span {
display: block;
float: left
}
/* Commented backslash hack hides rule from IE5-Mac
\*/
#navigation a, #navigation a span {
float: none
}
/* End IE5-Mac hack */
#tabs a:hover {
color: #fff;
background: #26a
url("assets/images/tabs/left-tab-hover.gif") left top
no-repeat;
text-decoration: none;
padding-left: 10px
}
#tabs a:hover span {
background:
url("assets/images/tabs/right-tab-hover.gif") right
top no-repeat;
padding-right: 10px
}
#tabs a:active {
color: #fff;
background: #26a
url("assets/images/tabs/left-tab-hover.gif") left top
no-repeat;
text-decoration: none;
padding-left: 10px
}
#tabs a:active span {
background:
url("assets/images/tabs/right-tab-hover.gif") right
top no-repeat;
padding-right: 10px
}
#tabs ul {
list-style: none;
padding: 0;
margin: 0
}
#tabs li {
float: left;
margin: 0;
padding: 0
}
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
