Member Avatar for hindu times

Hi there,

I'm currently building a storefront for the following site: www.rjthompsonmusic.com/store/store2

I'm having a little trouble with the z-index of the dropdown menu (when you hover over HOME of MUSIC in the store).

I've set the z-index of the menu to 1000 which works fine in IE8, Safari, FF, and Chrome, but it still displays behind part of the images below in IE7 and earlier, and Opera.

Any help would be awesome.

(ps. you need to close the blue instructions box before you'll be able to see what I mean)

Many thanks.

Edited by pritaeas because: Removed link.
  • 3 Contributors
  • 4 Replies
  • 233 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by Arkinder

Dani AI

Generated

Likely cause: the dropdown is being trapped by another stacking context created by the positioned description boxes over the product images. This fits ’s observation (only the description areas obscure the menu) and builds on ’s validation point: malformed CSS or unclosed comments often produce unexpected positioning. In IE7 (and some older Opera builds) z-index is scoped to a stacking context created by the nearest positioned ancestor, so a very large z-index on the submenu alone won’t help if an ancestor of the images has its own stacking context sitting above the nav.

Quick checklist to reproduce and confirm

  • Inspect which ancestor of the description boxes has position set (relative/absolute) and any non-auto z-index.
  • Check for filters/opacity or CSS that forces hasLayout in IE (these can create stacking contexts).
  • Use developer tools (or temporarily outline positioned elements) to see element rectangles and DOM order.

Concrete fixes (safe, incremental)

  • Give the nav’s highest positioned ancestor a top z-index so the whole nav sits above other stacking contexts:

    /* create a top stacking context for the nav */
#nav-wrapper { position: relative; z-index: 10000; }
#nav .ddcontainer { position: absolute; z-index: 10001; }

  • If the description boxes form their own stacking context, lower them instead of relying on a massive submenu z-index:

    .product .description { position: relative; z-index: 1; }

  • Remove the submenu from problematic ancestors by appending it to body (keeps it out of other stacking contexts). Reposition on open/resize:

    var $menu = $('#nav .ddcontainer');
$menu.appendTo('body').css({ position:'absolute', left: $menu.offset().left, top: $menu.offset().top });

IE6/7 notes

  • Forcing hasLayout (e.g., zoom:1;) on relevant containers can change behavior — use sparingly and only to test results. Watch for CSS comments/errors as suggested; validators often reveal unclosed comments that break parsing.

Attempted to fetch the live page and screenshot but the requests timed out; the guidance above is derived from the thread description and common IE7 stacking-context behavior.

Recommended Answers

All 4 Replies

Member Avatar for Arkinder

I don't see what you're talking about in Opera, and I don't have IE. I'll look at this more later when I have access to a PC. Could you possibly post a screen shot of the problem?

Regards, Arkinder

Member Avatar for hindu times

Sure, no problem. Fixed it in Opera, but still have a problem in IE7 and earlier:

www.rjthompsonmusic.com/img/store_img/menu_z_index_error.jpg

Edited by pritaeas because: Removed link
Member Avatar for Kraai

I can see what you mean in IE 7. I'm just guessing here, but it seems that it is only the description area on top of the pictures below the drop down menu that are obscuring the menu list, and not the pictures themself?

If so, it may help to re-position those descriptions maybe to the bottom part of the pictures.

Member Avatar for Arkinder

Start with fixing all of your CSS errors. Copy and paste the CSS here. You will see that at the bottom of the page a valid form of your code is spit out. You have 30 HTML errors too, but none of them are affecting the page.

In IE6 something is overextending the li and/or the a - causing the ddcontainer to go down into your images. I think it may be from a lot of your comments not being ended in your CSS.

Since the boxes over the images are positioned relatively and the ddcontainer is positioned absolutely, they are both removed from the normal flow of the page, and will be listed from the bottom up in the order they are written. Putting your navigation after the images/boxes in your HTML is a possible fix. However, it will require reposition the navigation back to it's original place.

Or as Kraai said, you could simply move the boxes elsewhere. Regardless, there would still be an inconsistant "height" issue.

Regards, Arkinder

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.