Page 1 of 2 12 LastLast
Results 1 to 10 of 18

Thread: Ultimate Fade In Slideshow v2.0 Firefox and Internet Explorer Problems

  1. #1
    Join Date
    Sep 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Ultimate Fade In Slideshow v2.0 Firefox and Internet Explorer Problems

    1) Script Title: Ultimate Fade In Slideshow v2.0

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

    3) Describe problem: This script seems to work fine for me in IE 7, but not in firefox. If you open the link in both, and mouse over the large changing pictures - not the menus on the left, you will notice the small black line on the bottom of the pictures with a text description - This only works in IE, and not in firefox. I'm trying to figure out why, any thoughts?

    The link: http://landmarkmg.com/beta/homepage/...G_EXAMPLE.html

  2. #2
    Join Date
    Sep 2009
    Posts
    8
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    The problem is the CSS tag you have - it seems to be conflicting -

    Code:
    #fadeshow1{
    position:relative;
    left:90px;
    z-index: -1;
    border: 1px solid;
    }
    When I comment this out - it works in FF

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That's right. Particularly the z-index. With a z-index less than 0, there is no hover registered when the mouse moves over the images. Just get rid of it:

    Code:
    #fadeshow1{
    position:relative;
    left:90px;
    z-index: -1;
    border: 1px solid;
    }
    so you'd have:

    Code:
    #fadeshow1{
    position:relative;
    left:90px;
    border: 1px solid;
    }
    - John
    ________________________

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

  4. #4
    Join Date
    Sep 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    yea, hmm i discovered that too, but then the menu's go behind the pictures, when i delete the z-index (in firefox).
    Any thoughts on how to remedy that?

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Instead of lowering the z-index of the slideshow, which effectively puts it underneath the the body element, raise the z-indexes of the menus, ex:

    Code:
    #main, #main * {
    position: relative;
    z-index: 10000;
    }
    Notes: This is in addition to your other existing styles for #main. You may not need to use as intense a style as this, but it certainly takes care of the issue. As long as it doesn't cause any other problems, it's fine. If there is a problem let me know.
    - John
    ________________________

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

  6. #6
    Join Date
    Sep 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    Instead of lowering the z-index of the slideshow, which effectively puts it underneath the the body element, raise the z-indexes of the menus, ex:

    Code:
    #main, #main * {
    position: relative;
    z-index: 10000;
    }
    BAM! it worked! Thanks a million!

  7. #7
    Join Date
    Sep 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post

    Code:
    #main, #main * {
    position: relative;
    z-index: 10000;
    }
    so real quick, i'm kind of a noob here, what is going on in this code?
    looks like anything inside the 'main' div is affected, but why not put this insude the original 'main' div css?

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I placed it separate, because you are correct - it affects the div with id 'main' and all its children. We probably don't want the children to be assigned other properties of main like float:left; and width: 90px;.

    Now as to what it does - it positions them all relatively - absolute, fixed, or relative position is required for a z-index to take effect, but fixed and absolute would probably have undesirable effects. I chose to set the container and all its children because this is required by some browsers, or at least the child and its parent if you catch my drift, this ensures that, though if you wanted to write out more styles you might be able to be more precise/selective - this is only required if the approach I've used causes a problem, usually it doesn't. 10000 is a very high z-index but may be required to overcome some of the z-indexes of the images in the show which can go at least as high as 1001, perhaps higher. In case you don't know, z-index governs where an element appears in relation to others when they are both in the same spot - its z axis 'stacking'.
    - John
    ________________________

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

  9. #9
    Join Date
    Sep 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the great explanation!

    Now for a fun question - i've been pulling my hair out all day trying to get this one to work. How can i make the menu boxes and the picture box have rounded corners?

    I've updated the page:
    http://landmarkmg.com/beta/homepage/...G_EXAMPLE.html

    I've been trying to use jQuery Rounded Corners, but it is conflicting with the mootools driven menus.

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    This is really a separate issue. I will point you in what I consider to be the right direction (a css only solution), but if you want more help, please open a new thread in either the css or javascript forums. Feel free to post here with a link to your new thread so I will know to at least have a look at it, though there certainly are others who can help in such matters. However, if you choose to use javascript for this - even if you don't - it would be a good idea to pick one and only one script library for scripts on your site.

    That said, I would Google:

    rounded corners css

    I have used:

    http://www.spiffycorners.com/

    and one other one I cannot seem to locate at the moment. But the techniques for these (they are so popular) keep proliferating. So it is always a good idea when implementing this to have a look at whatever the latest techniques may be.
    Last edited by jscheuer1; 09-28-2009 at 09:25 PM. Reason: fix minor typo
    - John
    ________________________

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

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
  •