Superfish menu isn't working in IE

[Susie]

I am really hoping someone who is good with javascript/jquery can help me out of this bind. :|

 

I just discovered that Internet Explorer is not showing the 3rd level of the menu.

 

 

http://tinyurl.com/cr2wmr (very much a work in progress)

 

 

I believe it's a js issue and not a css one. I've removed all js/jquery except the menu stuff and the problem still exists. I'm not sure what to do now. I know it should work because the examples on the superfish site do.

 

Ideas?

 

Edit to add: I just pulled up my test page that I made before integrating the CMS and they don't work there either!! How did I not see this?! Anyway, maybe there will be some clue here because it's the only js/jquery involved. http://tinyurl.com/r5bm7s

Edited May 25, 2009 by Susie

[shelfimage]

*untested in IE*

 

I tested in FF using web dev and firebug. A minor rearrangement and rewrite of the CSS in

 

/*** Essential styles - Superfish menu (Setting the positions for the list elements etc.) ***/

 

 

.nav, .nav * {
   margin:0;
   padding:0;
   list-style:none;
}
.nav li {
   float:left;
   position:relative;
   z-index:99;
   font:14px "Times New Roman", Serif;
   text-transform:uppercase;
}

.nav a {
   display:block;
}

   /* ---- 2nd tier --- */
   .nav li ul {/* 2nd tier hide */
       position:absolute;
       top:-999em;
       width:15em;
   }

   .nav li:hover ul, .nav li.sfHover ul { /* 2nd tier open */
       left:0px;
       top:2.2em;
   }
   .nav li ul li {
       text-transform:none;
       opacity:.93; /* FX/Opera/Safari/Chrome */
       -ms-filter:"alpha(opacity=93)"; /* IE8 */
       filter:alpha(opacity=93); /* IE6/IE7 */
   }
   .nav ul li {
       width: 100%;
   }

       /* --- 3rd tier --- */
       .nav li li ul, .nav li li ul { /* 3rd tier hide  */
           top:-999em;
       }
       .nav li li:hover ul, .nav li li.sfHover ul { /* 3rd tier open */
           left:15em;
           top:0px;
       }

 

Minor jQuery chage:

 

 

Probably not a big difference but I'm just posting what I use and usually works. I think the main difference will be the CSS.

[Susie]

Thanks so much, John. Unfortunately, it didn't work. I'll keep playing with it....

[Susie]

Well, I figured out the problem. I found it when I wiped out my code and tried to rebuild. Everything was working fine until I added this bit for a neat transparent effect:

 

opacity:.92; /* FX/Opera/Safari/Chrome */
-ms-filter:"alpha(opacity=92)"; /* IE8 */
filter:alpha(opacity=92); /* IE6/IE7 */

 

THIS is what was making the 3rd level links not work. I am really sad about that because the transparent effect is neat. Do you guys know of a way to make it work? I'm going to have to do some more googling....

 

Man, I spent most of yesterday and then this whole evening on this!

Edited May 26, 2009 by Susie

[Susie]

Okay, so it's not going to work. At all.

 

http://groups.google.com/group/jquery-en/browse_thread/thread/793beed03a12db04

[PicnicTutorials]

What if you apply the opacity filters to the ul class="nav" instead of the li's? The li's should still be transparent....

[BeeDev]

Just an idea, but have u tried using a transparent PNG for ur background? And you can apply IE Png Fix to that background maybe ...

[Susie]

Thanks, Eric....that doesn't work either.

 

BeeDev, I may do just that. I've never had very good luck with the PNG fixes, but I can always try.

[BeeDev]

http://code.google.com/p/ie7-js/

 

This may help you even if little bit.

 

it's a javascript library developed by Dean Edwards I haven't used it in Production before, but apparantly it makes IE5 and IE6 behave like a standards compliant browser, and it corrects Transparent PNGs, fixes a lot of Javascript & CSS issues associated with the browsers.

 

Note: Use conditional comments to load this JS only on lower than IE8.

Edited May 29, 2009 by BeeDev

[Susie]

BeeDev, thanks for the info. I will take a look!