?
Solved

CSS Menu Sprite - Hover Issue

Posted on 2009-04-26
4
Medium Priority
?
1,802 Views
Last Modified: 2012-05-06
I seem to be having issues with my CSS menu sprite. I have the "up state" working fine but the "hover state" doesn't seem to work. I created the sprite based on a tutorial found here:
http://net.tutsplus.com/videos/screencasts/exactly-how-to-use-css-sprites/

Not sure what I'm doing wrong. Any suggestions?
HTML
<ul id="main-nav">
	<li id="nav_home"><a href="#">Home</a></li>
	<li id="nav_about"><a href="#">About Us</a></li>
	<li id="nav_news"><a href="#">News</a></li>
	<li id="nav_events"><a href="#">Events</a></li>
	<li id="nav_factstats"><a href="#">Facts & Stats</a></li>
	<li id="nav_resources"><a href="#">Resources</a></li>
	<li id="nav_presentations"><a href="#">Presentations</a></li>
	<li id="nav_multimedia"><a href="#">Multimedia</a></li>
	<li id="nav_kids"><a href="#">Kids</a></li>
</ul>
 
 
CSS
 
/* MAIN NAV */
 
#main-nav 	{width: 960px; height: 45px; position: relative; background: url(style/images/nav_en.png); margin: 0; padding: 0;}
#main-nav li	{float: left;}
#main-nav li a 	{position: absolute; display: block; height: 45px; background: url(style/images/nav_en.png) no-repeat; margin: 0; padding: 0; text-indent: -9999px; top: 0; overflow: hidden;}
 
 
/* MAIN NAV - UP STATE */
 
li#nav_home a 		{left: 0; width: 76px; background-position: 0 0;}
li#nav_about a 		{left: 76px; width: 108px; background-position: -76px 0;}
li#nav_news a			{left: 184px; width: 76px; background-position: -184px 0;}
li#nav_events a		{left: 261px; width: 92px; background-position: -261px 0;}
li#nav_factstats a		{left: 351px; width: 140px; background-position: -351px 0;}
li#nav_resources a		{left: 491px; width: 122px; background-position: -491px 0;}
li#nav_presentations a 	{left: 613px; width: 149px; background-position: -613px 0;}
li#nav_multimedia a	{left: 762px; width: 121px; background-position: -762px 0;} 
li#nav_kids a			{left: 883px; width: 77px; background-position: -883px 0;}
 
 
/* MAIN NAV - HOVER STATE */
 
li#nav_home a:hover 		{background-position: 0 -50;}
li#nav_about a:hover 		{background-position: -76px -50;}
li#nav_news a:hover		{background-position: -184px -50;}
li#nav_events a:hover		{background-position: -261px -50;}
li#nav_factstats a:hover		{background-position: -351px -50;}
li#nav_resources a:hover	{background-position: -491px -50;}
li#nav_presentations a:hover 	{background-position: -613px -50;}
li#nav_multimedia a:hover	{background-position: -762px -50;} 
li#nav_kids a:hover			{background-position: -883px -50;}

Open in new window

nav-en.png
0
Comment
Question by:Adam
  • 2
4 Comments
 
LVL 43

Accepted Solution

by:
David S. earned 2000 total points
ID: 24238111
All of those "-50" need to be "-50px". Units are required for non-zero numerical values except for the line-height and z-index properties.
0
 
LVL 19

Expert Comment

by:v2Media
ID: 24238125
In your css rules for the hover state, you can only omit 'px' from 0 values. The hover css is being ignored because you have not given unit measurements.

li#nav_about a:hover            {background-position: -76px -50;}

Must be:

li#nav_about a:hover            {background-position: -76px -50px;}
0
 
LVL 19

Expert Comment

by:v2Media
ID: 24238131
[no points for my posts]

srry krav - wasted time saving a test file before troubleshooting
0
 
LVL 1

Author Comment

by:Adam
ID: 24238488
Awwww man! Can't believe I missed that. You know when you've been staring at something for a really long time...anyway, thanks for the help!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

850 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