Member Avatar for tapuwa2002

I made page with a jquery plugin and a css dropdown menu. I had to z-index the rotator so that the menu drop down could go over it. but now the plugin nav buttons are not clicking please help guys. Been going round in circles. scratch scratch

  • 3 Contributors
  • 3 Replies
  • 138 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ansaripk

Dani AI

Generated

— the symptom you describe (works in modern browsers, nav stops receiving clicks in IE7 after you adjusted z-index) is a classic IE stacking/overlay issue. and are on the right track about positioning, but IE7 creates unexpected stacking contexts and can leave an invisible element sitting above your controls. Two reliable ways to find and fix it are to (A) identify which element is actually covering the nav and (B) explicitly control stacking/layout for the slider and the nav.

Quick diagnostic and fixes to try (apply temporarily for testing, then refine):

/* diagnostics: outline elements so you can see what's covering the nav */
* { outline: 1px solid #f00 !important; }

/* ensure the nav sits above slide layers */
.slider-nav { position: relative; z-index: 10000; }

/* give the slider container "hasLayout" in IE7 to avoid weird stacking behaviour */
.slider-wrapper { position: relative; zoom: 1; }

Notes and rationale:

  • Use the outlines to inspect in IE7 (or Firebug/Firebug Lite) and find any silent overlay (an element with no background but higher stacking). Often the plugin inserts a capture layer or one of the slide elements ends up above the controls.
  • In IE7 a positioned parent can form a stacking context that prevents child z-index from escaping; moving the nav outside the problematic parent (make it a sibling) or giving the nav its own positioned container with a higher z-index is a robust fix.
  • If the slider ever contains embedded Flash, set the embed/object wmode to opaque/transparent so HTML elements can sit above it.
  • If you only need the menu to overlap while open, raise the menu z-index only when it’s open (toggle with JS) to avoid always elevating it and creating conflicts.

For further reading on stacking contexts and browser quirks see the MDN summary on z-index and the QuirksMode discussion of IE z-index behavior: MDN z-index and .

Recommended Answers

All 3 Replies

Member Avatar for dany12

you can use position:absolute instead of z-index

Member Avatar for tapuwa2002

Thanks for the reply but it seems to not work on IE7 in my flexslider.css I have added the following

/* FlexSlider Necessary Styles
*********************************/
.flexslider {width: 550px; margin: 0; padding: 0;z-index:1;position:absolute;}

And my drop down menu bar z-index:2;
Other browsers it works perfect but not IE7

Member Avatar for ansaripk

If you coded (slider and menu) both as position:absolute then z-index will work. make menubar z-index:200 or some other high value. and if you are positioning the slider as position:absolute then simply remove z-index rule. simply make sure to code menubar position:relative then it should not conflict. If still there is a problem then please send a link to the page so i can check what is going wrong. :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.