Hi,

You may remember my asking about putting a dropdown menu on top of a floatbox display a while back. You recommended trying very large values for z-index. And in fact this worked great - except in IE7 and below. Because of the z-index problems in IE7, when I set the menu in front of the floatbox for all the other browsers, it still goes behind in IE7. I have a container div named menubox that I have set to position:relative; and z-index higher than the menus that are supposed to stay in front of floatbox. This is the most common cure for the z-index problem that I have been able to find. But it doesn't work. But if I bring the z-index for the container div that holds the whole website to a higher number than the menus, it brings the menu on top in IE7 and below, but then when you open a floatbox (in any browser), much of the content of the website sits on top of the floatbox, even though I have set the z-index down to zero on most of the rest of the divs in the site.

Website is www.jbestr.com (I couldn't get the URL tag to work)

I realize that this may be more into general design than floatbox, but I thought I would take a shot here before going elsewhere, 'cause I expect I am going to get "I don't know anything about Floatbox" when I go elsewhere. So anyway, feel free to say 'try somewhere else' if you think it appropriate.

thanks!
Anne

There's not much I can do for you on this one. It's not really a floatbox issue. As I'm sure you're aware, there's a lot of folks struggling with and posting about IE's z-index bugs.

A suggestion though: if you go to other forums looking for assistance, maybe leave floatbox out of the equation - it will just confuse the issue. Put a small test/demo page together that has just the relative menu div and another absolute positioned div as the last element in the body. That's what floatbox is - an absolutely positioned div appended to the body element. You'll have better luck discussing and working with the simplest case.

Here's the most promising sounding solution I came across:
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

Thanks Byron, great suggestions!

Anne

I'm having the same problem with IE AND Firefox. The menu software is Project Seven's Pop Menu Magic. I looked at their website and found the following question and a possible solution.

Quote

I am using PPM 2 in transparent mode and it appears over my floating iframe lightbox Unfortunately I cannot share the development site due to contractual confidential obligations.

Is there a behavior that will permit the the iframe lightbox to float over the PMM2 menu while in transparent mode?

Quote

You will need to raise the z-index for the lightbox, both the overlay div and the presentation div. I could give you the exact style rules but without looking at your actual page it's impossible. Look for the Lightbox overlay and presentation divs, they are usually assigned a class name. Use that clas name to assign a higher z-index, one higher than 999999, for example:

.pp_overlay {
z-index: 99999999 !important;
}

.pp_pic_holder {
z-index:999999999 !important;
}

these class names may (or will) be different depending on which Lightbox solution you are using.

I took a stab at placing this code in floatbox's css file, but with no luck. Can anyone suggest where it might go?

Thanks for any help.

Floatbox's z-indices are set by code, not by css. It is done this way so that boxes can have their stacking order changed when there is more than one non-modal box open. For example, clicking on a non-modal box will bring it to the front of any others.

As of version 5.0.0, there is a zIndex option available which allows you to set the base Floatbox z-index to whatever you need. This defaults to 90000 on all versions up to 5.3.2. As of 5.3.3, the default zIndex setting is 11111111 (that's 8 ones). It was cranked up this high to get above the google translate bar when that's active on a page.

I took a look at a Pop Menu example and it was using a z-index of 999999 - higher than the older Floatbox and lower than the newer releases. If you're using something between 5.0.0 and 5.3.2, set zIndex to 11111111 to be like the later releases and to get above the Pop Menu. Probably set this in options.js. If you're using something prior to 5.0.0, it sounds like time to upgrade.

FIXED!

Just upgrading did the trick. I didn't have to modify anything.

Thanks for looking into the Pop Menu Magic code.