title: NavBar Display Different Chrome/Firefox
body: <p>I am facing a strange problem where the a navbar I have created is displaying differently in Chrome than Firefox. Here is a screenshot of each. Firefox is displaying it correctly:</p>
  
  <p><img src="https://i.stack.imgur.com/X9Oqe.png" alt="Firefox Navbar"></p>
  
  <p>While the background colors are getting lost in Chrome:</p>
  
  <p><img src="https://i.stack.imgur.com/ikjYj.png" alt="Chrome Navbar"></p>
  
  <p>I have created a fiddle <a href="http://jsfiddle.net/Nick_B/5axap/13/" rel="nofollow noreferrer">here</a>, but the problem is not apparent when viewed on the jsfiddle site using Chrome. In the live Chrome browser, the <code>body</code> declaration over-rides the definition for the navbar, even though <code>z-index</code> is used.. Any ideas on how to solve this strange issue? Im using an old version of Chrome right now (21.0.1180.90), trying to insure backwards compatibility. Thanks for your ideas!</p>