Jump to content
Stef's Coding Community
Susie

Superfish menu isn't working in IE

Recommended Posts

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 by Susie

Share this post


Link to post
Share on other sites

*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.

Share this post


Link to post
Share on other sites

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! :rolleyes:

Edited by Susie

Share this post


Link to post
Share on other sites

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 ...:D

Share this post


Link to post
Share on other sites

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. :)

Share this post


Link to post
Share on other sites

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 by BeeDev

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...