Hover, Pressed and Active States Not Showing for 1 Button In Nav Bar

Question

I have a CSS-sprite-based Apple-themed navigation bar, which you can view here:

http://www.marioplanet.com/index.asp

Now, for some reason, I cannot tell why, there appears to be a problem in the hover, pressed and active states of the "Home" button. For some reason, it just appears static.

This file, http://www.marioplanet.com/css/nav.css

Which has this code:

/* GLOBALHEADER */
#globalheader { width: 671px; height: 37px; margin: auto; position: relative; z-index: 100; }
#globalheader #globalnav { margin: 0; padding: 0; zoom: 1; width: 100%;}
#globalheader #globalnav:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#globalheader #globalnav li { display: inline; }
#globalheader #globalnav li a { float: left; width: 103px; height: 37px; text-indent:-1000em; overflow: hidden; background-image:url(/images/globalnav/wanzart.png); _background-image: url(/images/globalnav/wanzart.png); background-repeat: no-repeat; }
#globalheader #globalsearch { background-image: url(/images/globalnav/wanzart.png); _background-image: url(/images/globalnav/wanzart.png); background-repeat: no-repeat; }

/* BUTTONS */
#globalheader #globalnav li#gn-home a { background-position: 0px 0px; }
#globalheader #globalnav li#gn-catalog a { background-position: -103px 0px; }
#globalheader #globalnav li#gn-about a { background-position: -206px 0px; }
#globalheader #globalnav li#gn-contact a { background-position: -309px 0px; }
#globalheader #globalnav li#gn-media a { background-position: -412px 0px; }

/* OVER STATES */
#globalheader #globalnav li#gn-home a:hover { background-position: 0px -37px; }
#globalheader #globalnav li#gn-catalog a:hover { background-position: -103px -37px; }
#globalheader #globalnav li#gn-about a:hover { background-position: -206px -37px; }
#globalheader #globalnav li#gn-contact a:hover { background-position: -309px -37px; }
#globalheader #globalnav li#gn-media a:hover { background-position: -412px -37px; }

/* PRESSED STATES */
#globalheader #globalnav li#gn-home a:active { background-position: 0px -76px; }
#globalheader #globalnav li#gn-catalog a:active { background-position: -103px -76px; }
#globalheader #globalnav li#gn-about a:active { background-position: -206px -76px; }
#globalheader #globalnav li#gn-contact a:active { background-position: -309px -76px; }
#globalheader #globalnav li#gn-media a:active { background-position: -412px -76px; }

/* ON STATES */
#globalheader.home #globalnav li#gn-home a:hover { background-position: 0px 0px !important;}
#globalheader.catalog #globalnav li#gn-catalog a { background-position: -103px -114px !important; }
#globalheader.about #globalnav li#gn-about a { background-position: -206px -114px !important; }
#globalheader.contact #globalnav li#gn-contact a { background-position: -309px -114px !important; }
#globalheader.media #globalnav li#gn-media a { background-position: -412px -114px !important; }

/* GLOBAL SEARCH */
#globalsearch {width: 156px; height: 37px; position: absolute; top:0; right: 0; background-position: 100% 0; background-repeat: no-repeat; text-align: center; border-width: 0px; }
#inputString{background: url(/images/globalnav/searchform.png); padding: 1px 20px 0 20px; width: 113px; height: 20px; margin-top: 7px; border: none; outline: none; }

Is probably where the problem lies.

I have been playing around in Google's DevTools (basically FireBug) to try and isolate the problem, but I'm not having any luck.

The selectors for the "Home" button's states appear accurate.

And the source image (http://marioplanet.com/images/globalnav/wanzart.png) has the actual states, so this isn't the problem..

Answer 1

Remember when you style hyperlinks and their different states it is important to have the styles in this order:

':link' or just 'a' then
':visited' then
':hover' then
':active' then

Easy way to remember the order -> LoVe HAte

So try reordering your CSS code per button, instead of by states.

Also your button CSS is way too specific IMO. If you're using IDs, assuming that they are unique on the page, which they should be, you can safely target them directly.

Answer 2

Your rule here just under /* ON STATES */ is what's causing it:

#globalheader.home #globalnav li#gn-home a:hover { background-position: 0px 0px !important;}

Since you're at the home screen, you're #globalheader looks like this:

<div id="globalheader" class="home">

so unlike the others, the #globalheader.home selector is getting applied here, overriding all hover states. Either remove this rule, or change it to be background-position: 0px -37px which is probably what's intended...that home isn't hoverable, while you're on the homepage.