CSS background not changine on :active

[cs.punk]

Anyone know why?

 

        ul#menu {
width: 528px; margin: 0px auto;
list-style: none;
}

ul#menu li { display: inline; }

ul#menu li a {
display: block; float: left; height: 60px;
background-image: url(/nav.jpg); text-indent: -5000px;
}

ul#menu li a.home {
width: 132px; background-position: 0 0;	
}

ul#menu li a.home:hover {
width: 132px; background-position: 0 -60px;	
}

ul#menu li a.home:active {
width: 132px; background-position: 0 -120px;	
}

 

<div class='menu-bar'>
<ul id="menu">
<li><a href="/index.php" class="home">Home</a></li>
</ul>
</div>

 

CSS isn't really my specialty so any help would be appreciated.

[jacko310592]

if i remember correctly, the pseudo-class of ':active' only has an affect after the time the user clicks a link to the time it takes to show the new page.

 

keeping this in mind, is it possible that the :active class is working but your internet connection is loading the page too fast for you to see the change?

 

to check this, instead of left clicking on the link, hold the left click down and see if the background then changes

[cs.punk]

Uhm yes I do 'click and hold' and usually it shows (i mean with other CSS I have written) but for some reason it does not?

[jacko310592]

which web browser are you using?

[cs.punk]

Opera 10.10. Tried it on firefox, same thing?

 

Its on subby.buzzbye.co.cc if you wanna have a look.

 

(only looking at the 'first' home button)

[jacko310592]

had a look at your site, and i could not see any 'home' link?

 

 

[cs.punk]

So sorry made a typo its subby.buzzbyTe.co.cc thanks for your help hey.

[jacko310592]

You had two extra curly brackets within your CSS code, below is the working code:

 

<style type="text/css"> 
ul#menu {
width: 528px; margin: 0px auto;
list-style: none;
}

ul#menu li { display: inline; }

ul#menu li a {
display: block; float: left; height: 60px;
background-image: url(/nav.jpg);
text-indent: -5000px;
}

ul#menu li a.home {
width: 132px; background-position: 0 0;	
}

ul#menu li a.jokes {
width: 132px; background-position: -132px 0;	
}

ul#menu li a.games {
width: 132px; background-position: -264px 0;	
}

ul#menu li a.random {
width: 132px; background-position: -396px 0;	

}

ul#menu li a.home:hover {
width: 132px; background-position: 0 -60px;	
}

ul#menu li a.home:active {
width: 132px; background-position: 0 -120px;	
}
</style> 

 

best regards

 

 

EDIT:

infact, the code you origionally posted was correct, its the CSS code on your site which has the extra curly brackets.

[cs.punk]

You had two extra curly brackets within your CSS code, below is the working code:

 

<style type="text/css"> 
ul#menu {
width: 528px; margin: 0px auto;
list-style: none;
}

ul#menu li { display: inline; }

ul#menu li a {
display: block; float: left; height: 60px;
background-image: url(/nav.jpg);
text-indent: -5000px;
}

ul#menu li a.home {
width: 132px; background-position: 0 0;	
}

ul#menu li a.jokes {
width: 132px; background-position: -132px 0;	
}

ul#menu li a.games {
width: 132px; background-position: -264px 0;	
}

ul#menu li a.random {
width: 132px; background-position: -396px 0;	

}

ul#menu li a.home:hover {
width: 132px; background-position: 0 -60px;	
}

ul#menu li a.home:active {
width: 132px; background-position: 0 -120px;	
}
</style> 

 

best regards

 

 

EDIT:

infact, the code you origionally posted was correct, its the CSS code on your site which has the extra curly brackets.

 

Ah I see what happened my original problem was the two extra curly braces, but when i copied my source to here i removed some other stuff and in the process cleaned it up . Thanks for you help man.

[jacko310592]

i see, well atleast its working now.

and no problem cs.punk