?
Solved

CSS rollover/click images not working

Posted on 2012-09-18
6
Medium Priority
?
372 Views
Last Modified: 2012-09-19
Hi Experts,

I'm banging my head against a wall trying to figure out WHY what I'm doing isn't working.

I'm basing my work on an example found here: graphical-css-rollover-menu

I have created my .png 128 x 512 (it is 4 images 128 x 128 stacked vertically.)

the css i'm using is here:

/*
*	Setup
*/

ul.cssmenu {
	list-style: none;
	padding: 0px;
	}

.displace {
	position: absolute;
	left: -5000px;
	}

ul.cssmenu li {
	float: left;
	}

ul.cssmenu li a {
	display: block;
	width: 128px;
	height: 128px;
	background: url('../../images/home_menu.png');
	}


/*
*	Normal Links
*/

ul.cssmenu li.home a {
	background-position: 0 0;
	}

/*
*	Hover Links
*/

ul.cssmenu li.home a:hover {
	background-position: 0 -128px;
	}

*/
/*
*	Clicked Links
*/

ul.cssmenu li.home a:active {
	background-position: 0 -256px;
	}

/*
*	Selected/Active Links
*/

ul.cssmenu li.home a.selected {
	background-position: 0 -384px;
	}

Open in new window


and the html is

<ul class="cssmenu">
                <li class="home">
                	<a href="#" title="Home">
                    	<span class="displace">Home</span>
                    </a>
                </li>
            </ul>

Open in new window


Now here's the problem

the image displays image[0] as it should.

on mouse-over, it displays image[1] as it should. (a:hover works)

on mouse click - the image doesn't display image[2], it stays at image[1] the hover image.

if the class is set to "current", the image displays image[3] as it should.  so the only thing that is NOT working is the a:active

This displays image[3], the 4th image as it should.
<ul class="cssmenu">
                <li class="home">
                	<a href="#" class="selected" title="Home">
                    	<span class="displace">Home</span>
                    </a>
                </li>
            </ul>

Open in new window



his example, at the end of the ink provided, works perfectly for me.

I have looked through all of my css files to see if there is something that is overriding it, but i can't find anything.

the only other instances of a:hover are un-related to this class - their contents are below, they are all in the same file as the css code above. and no other css files use a:active

a:hover, a:active {
	text-decoration: none;
}

#footer a:hover, #footer a:active {
	
}

#navcontainer a:active {

}

Open in new window


I know it has to be something simple but I'll be darned if I can see it.

What am I missing?
0
Comment
Question by:sgaggerj
  • 2
  • 2
  • 2
6 Comments
 
LVL 13

Expert Comment

by:Andrew Derse
ID: 38411655
Can you post the image you are working with too?
0
 
LVL 13

Assisted Solution

by:Andrew Derse
Andrew Derse earned 400 total points
ID: 38411669
Here's my test of it and it worked perfectly...
test.zip
0
 
LVL 45

Accepted Solution

by:
Chris Stanyon earned 1600 total points
ID: 38413985
These are the sort of problems you'll kick yourself for later on :)

You've got a duff comment line in your css, so the rule is being ignored:

*/ <- this shouldn't be here
/*
*      Clicked Links
*/

ul.cssmenu li.home a:active {
      background-position: 0 -256px;
      }
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:sgaggerj
ID: 38414184
Thanks for both responses.

I need to clean up my css (and remove that) and retry.

I ended up redoing all the icons to two images per, so I'll need to re-run them as 4 again and try it.

Bear with me for a day or so.

Thanks guys!
0
 
LVL 1

Author Comment

by:sgaggerj
ID: 38414903
Ok, so i decided to go back to the two-image state and scrap the 4 images.

@NUKIT - thanks for helping verify that I'm not going crazy and the code IS working properly.

@ChrisStanyon - yep, that was the problem! I knew it was something stupid simple.  I don't know how many times I saw that extra */ and my mind went 'end comment' without realizing there was no 'begin comment'.

Thanks again!
0
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38415674
We all need a fresh pair of eyes sometimes :)
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
Strategic internal linking is often considered an SEO power technique, especially for content marketing. Do you need to hire an SEO agency to optimize you internal linking? No, this article will help you understand the basics of internal linking and…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question