IE 6 bug, looks like peekaboo

IE 6 Only

I have encountered something similar to peekaboo at the link below. A dropdown menu is hiding behind form elements.

I've tried everything I know of to no avail so I need to learn something new.

I would appreciate it if you'd share your thoughts and experiences on this issue.

Once again, the bug is in IE6 only.

http://www.youranimalstuff.com/mm5/merchant.mvc?Screen=CTGY&Category_Code=DOG

 

Just a guess but maybe try setting a z-index

 

I'm surprised IE7 isn't doing this too. There are possibly two things going on, but unfortunately I think it's the bad one.

There is an IE bug involving z-index where everything starts at 0 or 1 instead of "auto" thus a high z-index on submenus does nothing until the high z-index is moved to the parent instead. Stomme IE.

However it's more likely to be the IE layer thing. IE starts the page like everyone else, position: static having z-index of 0, but Flash and form controls get "redrawn" starting at a whole new level. So no matter how high you z-index that submenu, it can never move up to the next "level" so never above the form controls.

Paul O'Brien says the only way to truly get around this, if you don't change the layout of the page, is something called an iFrame shim. iFrames also start on a new "level" and thus could push a copy of the submenus up above the form controls. I've never used one, I'm allergic to frames, but Stu Nichols has done one and possibly Paul has too, though I'm sure Stu's is quite large code-wise. Google "iFrame shim". There are a few of them out there.

When I had hover-spans getting covered up by checkboxes in IE, I rearranged the page as much as I could (actually, moved the spans and changed their size and shape to fit the new position) as all that work was easier than dicking with frames.

 

Move the select box elsewhere, or stick an iframe under the dropdown. The latter can be hard-coded or apply with JS (like Stomme already said, there are more than a few solutions out there).

 

I got the iframe shim to work by putting it next to the TD instead of the TABLE where I first tried it.

I needed a general solution because dropdown menus will encounter all sorts of forms on ecommerce websites. Changing the layout is almost never an option.

Thanks for sharing! It was a big help.

I wonder, could an iframe shim be used to layer some CSS on top of a Flash movie? Hmmm...

 

Heh, yeah, the iFrame is also used for Flashes too. Like I said, IE starts both iFrames and Flash in a new "layer". Why z-index doesn't usually help-- but with Flash, always try wmode="transparent" on your params and the highest z-index you can FIRST since iFrame is extra bs clogging up your page if you can get away with something else as above.

 

Stu Nichols cooked a very tight javascript that eliminates all extra HTML except the iframe tag and uses no CSS. Solves peekaboo for all circumstances as far as my tests show. Says he'll post it on his site soon.

 

Hmm, so those without Javascript get...? Just to keep them in mind. Otherwise, if it makes your code leaner, more power to you. And as far as I know, this isn't peekaboo. It's more of IE's (specifically coded) layering and z-index calculating thing. I know that iFrames were very purposely made to make a "new layer" in IE5.5 (or was it IE5.0?).