2

The website: http://club16.abcguide.com/

The drop down menu items appear behind the Flex slider in IE 8 for the client, and IE 7 in my compatibility tester.

Help is appreciated in regards to this, thanks!

Klikster
  • 1,154
  • 12
  • 24

3 Answers3

4

Unless the z-index is explicitly set for positioned elements, IE7/8 will give the positioned element a z-index of 0.

Add position: relative; z-index: 99999; to #navigation-wrap to ensure it has a z-index greater than the other elements on the page. This will ensure it stays on top.

shaunsantacruz
  • 8,903
  • 3
  • 19
  • 19
  • I've added them to the #navigation-wrap div, however they aren't showing up in IE? I'm starting at them in FireFox though.. this is the same issue I had with Danjah's solution.. – Klikster Feb 15 '12 at 00:07
  • I'm not seeing the changes to #navigation-wrap on the site you provided? I added position: relative; z-index: 99999; via IE DEV tools as an inline style and verified that it works in IE7/8 – shaunsantacruz Feb 15 '12 at 00:12
  • Disregard my last comment, it's working now. Thank you very much. :) – Klikster Feb 15 '12 at 00:18
2

.flexslider has position:relative; but no z-index CSS property, if you add z-index:1 to that container, and then position:relative; and z-index:2; to any one of your suckerfish menu containers (I added it to ul.menu in IE debug tools), the menu will then be positioned atop the slider.

danjah
  • 2,939
  • 2
  • 30
  • 47
0

For future readers, if you have a CSS gradient on your navigation, early versions of IE will have trouble with drop downs.

Smashbox
  • 15
  • 3