[jQuery] Re: Superfish animation problem in ie

[slooodge]

Hi Joel,

sorry for stealing this thread...
I seem to have a very similar Problem, but I have read this thread
over and over again and still don't get it right.

I have used superfish in two different navigations on the same page.
Here's the page http://www.eyeculture.de.
Everything works fine in all browser except ie7... In the lower
navigation I get an error and the fadeIn does not work.
The strange thing is that when I switch of Javascript the lower
navigation works (without the effects of course) but the top
navigation does not?

I really hope you can help me out, cause I have been trying very long
now..

AND thank you so much for this wonderful plugin!!!

Here is my CSS for the topnavigation:

#border-top ul#nav {
        list-style: none;
        font-size:110%;
}

#border-top ul#nav li {
        position : relative;
        float : left;
        line-height : 18px;
        width: 90px;
        background-color: black;
}

#border-top ul#nav li ul.sub {
        list-style: none;
        font-size:100%;
        display: block;
        position : absolute;
        top: -999em;
}
#border-top ul#nav li:hover ul.sub,
#border-top ul#nav li.sfHover ul.sub {
        position : absolute;
        top: 22px;
}
#border-top ul#nav li a {
        height: 20px;
        text-align: center;
        display : block;
        width: 90px;
        w\idth : 88px;
        color : white;
        text-decoration : none;
        border : 1px solid black;
}
#border-top ul#nav ul.sub li a {
        border-left: 1px solid white;
        border-right: 1px solid white;
        border-top:none;
        border-bottom:none;
}
#border-top ul#nav ul.sub li.last a {
        border-bottom:1px solid white;
}
#border-top ul#nav li a:hover{
        color:#FF7300;
}





Here the CSS for the lower navigation:

ul#subnav {
        list-style: none;
        font-size:110%;
}

ul#subnav li {
        position : relative;
        float : right;
        padding-left:3px;
        padding-right:3px;
}

ul#subnav li ul {
        list-style: none;
        font-size:100%;
        position : absolute;
        bottom: -999em;
        right:0px;
        background-color:black;
        border-top:1px solid white;
        border-left:1px solid white;
        border-right:1px solid white;
        padding:10px;
}
ul#subnav li:hover ul,
ul#subnav li.sfHover ul {
        position : absolute;
        bottom: 20px;
}

ul#subnav li ul li{
        text-align:right;
        float:none;
}
ul#subnav li ul li.pad{
        padding-top:10px;
}
ul#subnav li ul#styleswitch li{
        width:40px;
}
ul#subnav li ul#impressum li{
        width:96px;
}
ul#subnav li ul#impressum li a{
        color:#FF7300;
}
ul#subnav li ul#impressum li a:hover{
        color:white;
}


And my Jquery:

$(document).ready(function(){
/*      Hauptnavigation   */
                $("ul#nav")
                        .superfish({
                                animation : { height:"show"}
                        })
                        .find(">li:has(ul)")
                                .mouseover(function(){
                                        $("ul", this).bgIframe({opacity:false});
                                })
                                .find("a")
                                        .focus(function(){
                                                $("ul", 
$("#nav>li:has(ul)")).bgIframe({opacity:false});
                                        });

/*      Subnavigation           */
                $("ul#subnav")
                        .superfish({
                                animation : { opacity:"show"}
                        })
                        .find(">li:has(ul)")
                                .mouseover(function(){
                                        $("ul", this).bgIframe({opacity:false});
                                })
                                .find("a")
                                        .focus(function(){
                                                $("ul", 
$("#subnav>li:has(ul)")).bgIframe({opacity:false});
                                        });


/*      Kontrast        */

   $("a.on").toggle(function(){
     $("span").addClass('contrast');
   },function(){
     $("span").removeClass('contrast');
   });


/*      Fade-In

   $("#index").hide();
   $("#webdesign").hide();
   $("#seo").hide();
   $("#reference").hide();
   $("#kontakt").hide();
   $("#index").fadeIn(500);
   $("#webdesign").fadeIn(500);
   $("#seo").fadeIn(500);
   $("#reference").fadeIn(500);
   $("#kontakt").fadeIn(500);

*/
   $("#text").hide();
   $("#text").show('slow');

});