title: Hover, Pressed and Active States Not Showing for 1 Button In Nav Bar
body: <p>I have a CSS-sprite-based Apple-themed navigation bar, which you can view here:</p>
  
  <p><a href="http://www.marioplanet.com/index.asp" rel="nofollow noreferrer">http://www.marioplanet.com/index.asp</a></p>
  
  <p>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.</p>
  
  <p>This file, <a href="http://www.marioplanet.com/css/nav.css" rel="nofollow noreferrer">http://www.marioplanet.com/css/nav.css</a></p>
  
  <p>Which has this code:</p>
  
  <pre><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; }
  </code></pre>
  
  <p>Is probably where the problem lies.</p>
  
  <p>I have been playing around in Google's DevTools (basically FireBug) to try and isolate the problem, but I'm not having any luck.  </p>
  
  <p>The selectors for the "Home" button's states appear accurate.</p>
  
  <p>And the source image (<a href="http://marioplanet.com/images/globalnav/wanzart.png" rel="nofollow noreferrer">http://marioplanet.com/images/globalnav/wanzart.png</a>) has the actual states, so this isn't the problem..</p>