Sat, 2010-12-11 05:40
I'm having issues trying make the .active link that's within the blue background be white. I currently have it setup so when you hover over the links it displays white no problem. But I can't find a way so that if I'm on a cetain page the link color stays white with the blue background. I've tried everything I can think of, but I've had no luck. I am fairly new to CSS and would appreciate any kind of advice.
This is the code that I'm using in the style sheet.
.left-block ul li { font-size:0.8em; list-style-type:none; background:url(../images/left-block-list-item-bg.gif) bottom repeat-x; position:relative; } .left-block ul li:hover, .left-block ul li.active { background:#00739B url(../images/left-block-list-item.png) bottom repeat-x; font-weight: bold; color: #FFF; } .left-block ul li a:link { color:#333; text-decoration:none; display:block; padding:8px 0 10px 30px; } .left-block ul li a:visited { color:#333; text-decoration:none; display:block; padding:8px 0 10px 30px; } .left-block ul li a:hover { color: #FFF; text-decoration:none; display:block; padding:8px 0 10px 30px; } .left-block ul li a img { position:absolute; top:8px; left:8px; }
This is the HTML code I'm using on my web design.
<div class="left-block"> <h3><div class="left-block-header-inner">MAIN MENU</div></h3> <ul> <li><a href="" title="">My Calls</a></li> <li class="active"><a class="active" href="">Phone Setup</a></li> <li><a href="" title="">My Account</a></li> <li><a href="" title="">Add Minutes</a></li> <li><a href="" title="">International</a></li> <li><a href="" title="">Support</li> </ul> </div>
Thank You! I hope someone is willing to tackle my question.
Mon, 2010-12-20 12:09
#1
Then try styling a.active
Then try styling a.active rather than the li.active? Perhaps you have an overridding property at work? Like the ruleset for a:link