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

[zm15]

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

[MultimediaGuy]

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

#fadeshow1{
position:relative;
left:90px;
z-index: -1;
border: 1px solid;
}

When I comment this out - it works in FF

[jscheuer1]

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:

#fadeshow1{
position:relative;
left:90px;
z-index: -1;
border: 1px solid;
}

so you'd have:

#fadeshow1{
position:relative;
left:90px;
border: 1px solid;
}

[zm15]

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?

[jscheuer1]

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:

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

[zm15]

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:

#main, #main * {
position: relative;
z-index: 10000;
}

BAM! it worked! Thanks a million!

[zm15]

#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?

[jscheuer1]

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

[zm15]

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.

[jscheuer1]

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.