Huge problem in css nav (showing beneath page elements) 1

[Maven4Champ]

All,

I have an urgent situation that I have tried to resolve with no success. We are going live with our new site (developed in the Joomla CMS software) and I have all my css in the following file:

http://www.nflspot.com/dev/templates/js_nflspot/css/template_css.css

The site can be found here:

http://www.nflspot.com/dev/

As you notice, in IE and FF the nav drop-down menus show BENEATH all the elements such as the tabbed browsing, headline photo, etc.

I have tried using positioning and z-index attributes but nothing seems to work for me. Any ideas of how I could resolve this through css to make the sub-menus consistently appear over (on top) of the other page elements...

 

[Vragabond]

Give your #header z-index. 2 will be enough, no need to go sky high.

This happens because z-index determines z positions between sibling elements. That's why all the elements inside header were below all the elements inside the #content-container (the latter appears later in the code which makes it higher on the z plane). Giving elements inside the #header a high z-index number has no effect because it only refers to relationships inside the #header element (which in your code always appears below the content).

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[Maven4Champ]

That makes PERFECT sense. I was trying to do it at the menu level instead the menu is wrapped by the header div and class so that fully makes sense now. And it appears to be working in older versions of IE as well.

Thank you so much and REP to you!