Superfish drop down menu, how to fix z-index in ie6 and ie7?

views:

674

answers:

+1 Q:

Superfish drop down menu, how to fix z-index in ie6 and ie7?

I am using the superfish plugin for jquery here: clicky

it works fine in all modern browsers FF,Safari, Chrome, IE8

but it seems like the z-index is not working in ie6 and 7

you can see the menu is appearing, but being cut off by the elements below it.

I have tried adding a z-index everywhere I can think of but nothing seems to fix this.

How can I fix this?

Thanks!!!

Using superfish with IE you should use the bgiframe plugin. From the superfish FAQ:

Does the Superfish plugin work with any other plugins?

Yes – here are a few useful plugins that you may wish to add to your menu:

...

4. BgIframe. Another plugin you may need is Brandon Aaron’s bgIframe plugin. This will solve the Internet Explorer bug described in the ‘bgIframe’ example on this site. 90% of people will not need this (yes I made up that statistic).

cletus 2010-04-01 15:24:34

Hi thanks, I added the bgi script to my page, but it still didn't change anything. Thanks.

John Isaacks 2010-04-01 15:34:41

Well I also added this: #header { z-index:2; } #main_area {position:relative;z-index:1;}Which fixed it. Thanks.

John Isaacks 2010-04-01 15:53:01

I have a feeling it was my "position:relative" suggestion that fixed your problem, not the BGIframe plugin.

David Murdoch 2010-04-01 16:00:44

@David yes sorry, I switched my accepted answer :)

John Isaacks 2010-04-01 16:03:39

+1 A:

I don't have IE6 handy right now so I can test for you.

You could try adding "position:relative" to the elements you are applying z-index to.

David Murdoch 2010-04-01 15:27:15

its happening in ie7 also.

John Isaacks 2010-04-01 15:34:07

I find that also sometimes a custom ie-only stylesheet and adding the rule "zoom: 1" to either the menu elements or the ones that it's going over combined with z-indexes solves the issue.

dalbaeb 2010-04-01 15:54:29

John Isaacks 2010-04-01 16:30:00

haha, thanks, I'll test in IE7 in a sec I'm not even sure where my IE6 laptop is; I did away with testing in IE6 about 6 months ago. You should check out [Stop Living In the Past](http://www.stoplivinginthepast.com/)

David Murdoch 2010-04-01 16:51:50

add position:relative;z-index:9; to the li.superfish_double_line class.

David Murdoch 2010-04-01 16:59:27

Yes that fixed it, You are awesome my friend!

John Isaacks 2010-04-01 17:07:56

feel free to +1 my comments. :-)

David Murdoch 2010-04-01 20:52:58

ansaurus

tags:

views:

answers:

Superfish drop down menu, how to fix z-index in ie6 and ie7?

Does the Superfish plugin work with any other plugins?

related questions