My superfish menus function great in IE and Firefox as much as I have tested them. However, if I add my website URL to the list of those domains considered to be within my 'local intranet' in the IE security settings, then my Superfish dropdown menus are displayed behind the page. I have used css to change the z-index and the menus work under every other condition, just not in the situation described above.

Thanks for any help.

Comments

webservant316’s picture

webservant316 commented

I went through the IE security settings for 'Internet' and 'Local Intranet' and customized the 'Local Intranet' to match the 'Internet' settings and the result is still the same. Superfish works on my website with 'Internet' security, but if I add my website to the 'Local Intranet' list, then the Superfish dropdowns are hidden behind the page.

webservant316’s picture

webservant316 commented

ok more information. I see the same problem on another workstation running IE, but apparently not related to the security settings, because my website it not listed under 'Local Intranet' on that machine. Hmmm, what is causing this? How do I even debug the problem.

mehrpadin’s picture

mehrpadin commented

Hey Jeff,

May I see the site? you can email the URL.

webservant316’s picture

webservant316 commented

I just emailed you the link, thanks!

webservant316’s picture

webservant316 commented
Title: drop down behind page in IE when website domain listed under local intranet security settings » Superfish drop down falling behind the page in IE
Priority: Normal » Major

I changed the css z-index on the #header to 2 and #main to 1 as suggested in your private message to me with no effect. On one of the problem machines I unistalled IE8, reinstalled IE8, and also uninstalled a number of IE browser toolbars and now the superfish menu works! I'm glad it works, but no real satisfying answer to the specific problem.

However, my IE8 browser at home still has the problem of the superfish drop down falling behind the #main page div. Also another user complained of the same. Wow I need to get this problem solved.

Changing the title and priority to major because this problem is larger than the intranet security settings in the browser and my site is unused for users that have the problem. Not sure what is causing the problem.

webservant316’s picture

webservant316 commented

more information. when running IE8 if I switch to 'compatibility view' my superfish menu dropdowns fail and are hidden behind the page. if I switch out of compatibility view then all is well again!

why is this and can it be fixed?

webservant316’s picture

webservant316 commented

I see that compatibility view allows IE8 to simulate older IE browser versions. So perhaps Superfish 6.x-1.8 does function well in IE7 and IE6.

mehrpadin’s picture

mehrpadin commented

Phew! finally got some time to dig deeper! here is it:

#header-blocks {
  position: relative;
}

Change it to position:static; and voila! now you just need to redo your header blocks CSS - for IE6 at least - so they don't move.

Additionally, you may want to add something like this too, which overrides that .block ul padding.

#block-superfish-1 ul {
  padding: 0;
}
webservant316’s picture

webservant316 commented

thanks for helping me to understand the IE6 problem. I guess IE6 interprets the CSS absolute positioning wrongly or differently. I need to specify the 'containing block' so that I can use absolute positioning of the superfish menu and other header objects, so made the #page the containing block with

#page {
position: relative;
}

Since the page contains the #header and the #main somehow it all worked out.

Thanks again,

Jeff

webservant316’s picture

webservant316 commented
Status: Active » Closed (works as designed)

status solved. css issue with zen theme and my design goals, not a superfish problem.

ailgm’s picture

ailgm commented

For the benefit of anyone else who might read this thread ... I had a similar problem, where a drop-down superfish menu was appearing behind content in an Adaptive Theme in IE7.

mehrpadin was kind enough to investigate and recommend the following solution:
#main-content has a "position:relative" (layout.css line #134) if you disable it (simply remove the line #132 altogether) the drop-down appears over the orange div, I don't know why! it doesn't make sense at all since the #header also has a position:relative which means that adding some z-index should fix the issue blabla but it does not!

It resolved the problem.

Thank you again mehrpadin.