Results 1 to 4 of 4

Thread: Ultimate Fade-in slideshow IE7 zIndex issue with SuperFish dropdown navigation.

  1. #1
    Join Date
    Dec 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-in slideshow IE7 zIndex issue with SuperFish dropdown navigation.

    1) Script Title: Ultimate Fade-in slideshow (v2.4)

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

    3) Describe problem: Fadeshow works great in all other browsers, but am having a z-index issue with IE7 when combining the fadeshow with SuperFish CSS dropdowns: http://users.tpg.com.au/j_birch/plugins/superfish/

    I've modified the z-index for the superfish css, but am still having the issue in ie, as if its ignoring my z-indexes.

    url of everything going wrong:
    http://www.six-twentythree.com/tempo...wco/index.html

    any advice would be appreciated!

  2. #2
    Join Date
    Dec 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Been playing with this some more and still cannot get it to work in IE7 with SuperFish.
    Any help would be greatly appreciated!

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,941
    Thanks
    43
    Thanked 3,193 Times in 3,156 Posts
    Blog Entries
    12

    Default

    OK, on the temporary/ywco/index.html page, as of this typing there are at least several problems. But to 'just get it working', all you need to do is add:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Athens YWCO Camp | An ACA Accredited Girls Camp in the North Georgia Mountains</title>
    <style type="text/css">
    #headerbg {
    	position: relative;
    	z-index: 10000;
    }
    </style>
    <link href="_includes/style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" media="screen" href="_includes/superfish.css" />
    <script type="text/javascript" src="_inclu . . .
    Or add it's property/value pairs to this selector in styles.css:

    Code:
    #headerbg {position: relative; z-index: 10000; margin: auto; height: 155px; background-image: url(../images/headerbg.png); background-repeat:  no-repeat; background-position: top center;}
    I would suggest the latter.

    Now, on to some of the other problems, and only as relates to this menu. This is not being executed and causes an error in IE's status bar:

    Code:
    <script> 
     
        $(document).ready(function(){ 
            $("ul.sf-menu").superfish(); 
        }); 
     
    </script>
    because $ hasn't been defined yet - jQuery isn't added until after this script.

    And even if jQuery comes before, the slideshow puts jQuery into noConflict mode and the inner $ won't be defined once the document is ready, and the default superfish arrows will get added. So change this section:

    Code:
    <link href="_includes/style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" media="screen" href="_includes/superfish.css" />
    <script type="text/javascript" src="_includes/rollover.js"></script>
    <script type="text/javascript" src="_includes/superfish.js"></script> 
    <script> 
     
        $(document).ready(function(){ 
            $("ul.sf-menu").superfish(); 
        }); 
     
    </script>
    
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="_includes/fadeslideshow.js">
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    ***********************************************/
    
    </script>
    to:

    Code:
    <link href="_includes/style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" media="screen" href="_includes/superfish.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="_includes/rollover.js"></script>
    <script type="text/javascript" src="_includes/superfish.js"></script> 
    <script> 
     
        jQuery(document).ready(function($){ 
            $("ul.sf-menu").superfish({autoArrows:  false}); 
        }); 
     
    </script>
    
    
    <script type="text/javascript" src="_includes/fadeslideshow.js">
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    ***********************************************/
    
    </script>
    There could still be other issues with the page, and there is one minor problem with this menu in IE 7 and 8. That's because the fade in of the superfish now works, and that doesn't work well in IE 7 visa vis losing the anti-aliasing (Clear Type) of the text displayed and in IE 8 for the same reason, except that IE 8 is able to recover from that once the menu fades in completely.

    We can work around that if it bothers you. But I thought you would want this much for now.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Dec 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    John,
    all these fixes helped immensely.
    thanks!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •