Slashdot menu a current dont work

[Niclas]

Hi

My CSS don´t works in slashdot menu

I cant get this code to be active:
div.sdmenu div a:current {
background : #FF6600;

What could be wrong??

Best Regards
Niclas

[rangana]

I guess there is no current pseudo-class in CSS

Could you show us all your codes, or better a link

..Or you might wish you nave your div a current class..and use it later:

#sdmenu .class{background:#ff6600;}

[Niclas]

div.sdmenu {
width: 180px;
font-family: Arial, sans-serif;
font-size: 11px;
padding-bottom: 10px;
color: #fff;
}
div.sdmenu div {
background: url(../images/menu/title.gif) repeat-x;
overflow: hidden;
}
div.sdmenu div:first-child {
background: url(../images/menu/toptitle.gif) repeat;
}
div.sdmenu div.collapsed {
height: 25px;
}
div.sdmenu div span {
display: block;
padding: 5px 25px;
font-weight: bold;
color: white;
background: url(../images/menu/expanded.gif) no-repeat 10px center;
cursor: default;
border-bottom: 0px solid #ddd;
text-decoration: none;
}
div.sdmenu div.collapsed span {
background-image: url(../images/menu/collapsed.gif);
}
div.sdmenu div a {
padding: 2px 10px;
background: #EEEEEE;
display: block;
color: #000000;
text-decoration: none;
}
div.sdmenu div a.current {
background: #ff6600;
}
div.sdmenu div a:hover {
width: 160px;
background: #316AC5 url(images/menu/linkarrow.gif) no-repeat right center;
color: #fff;
text-decoration: none;
}
div.sdmenu #red a:hover {
background: #E4001B url(icons/menu/linkarrow.gif) no-repeat right center;
color: #fff;
text-decoration: none;
}

http://www.dynamicdrive.com/forums/s...light=slashdot

[rangana]

Where's your HTML

..and it is'nt a:current, but a.current

[Niclas]

Hi Rangana

Here is the HTML code with links to an Iframe (main target), I have work a few hours without success
I have big problems to get the "current" background colors to mark the active links.. as you could see the code seems to be in original mode, so I really don´t understand why this function are available in the script.

http://www.strovelstorp.nu/demo/demo.html

Best Regards
Niclas

[rangana]

Add the highlighted in your sdmenu.css

div.sdmenu div a.current, div.sdmenu div a:active
{
background: #ff6600;
}

This works perfectly in IE, but not with FF.
For browser compatability, change your JS in the head of your start.html to

<script type="text/javascript">
	var myMenu;
	window.onload = function() {
		myMenu = new SDMenu("my_menu");
		myMenu.init();
		myMenu.speed = 3;
		myMenu.remember = true;
		myMenu.oneSmOnly = true;
		myMenu.markCurrent = true;
		myMenu.collapseAll();
		
	var accept=document.getElementById('my_menu').getElementsByTagName('a');
		for(var start=0;start<accept.length;start++)
	{
	accept[start].onclick=function() 
	{
		for(var start=0;start<accept.length;start++) 
		{
			accept[start].style.background='#eee';
			{
			this.style.background='#f60';
			}
		}
	}
	}	
	};
	</script>

See if it aides

[Niclas]

Hi Rangana

Many thanks for your support, together we will solve this problem.
There is a bug in IE (a:active), not Firefox who courses this problem!
But I have solve this problem with following code:

div.sdmenu div a.current, div.sdmenu div a:focus, div.sdmenu div a:active {
background: #316AC5;
color: #FFFFFF;

Now to another problem Rangana, I have two different a.current colors in my sections, is it possible to have a second div a.current into my CSS, one red and one blue??

Finally Rangana for your comments about "browser compatability" a get "Syntax error" when copy and paste the JS code into head of start.html

Niclas

[Niclas]

Following code works in both IE and FF:

div.sdmenu div a.current, div.sdmenu div a:focus, div.sdmenu div a:active {
background: #316AC5;
color: #FFFFFF;