Hello folks,

I have a nagging issue regarding a superfish menu installation. Intermittently, the submenus will drop down and appear behind a front page slideshow (rokslideshow). I've tried to go through the CSS to find the relevant Z index tags for both the slideshow and the menu, but it still happens from time to time. Granted, a page refresh fixes it every time, but some of the folks using the site go into paralysis when it happens and that's that. I can't dependably reproduce the issue to know for sure if it's fixed. Seems to happen if the page has been loaded in a browser for a long period of time, say, over night, then when I come back to it the menus appear behind the slideshow images.

Anyone have any sage advice regarding this? Thanks very much for any help, it will be greatly appreciated!

Matt

Hey Matt, do you have a link to share with us? Also, what browser are you noticing this in?
Seeing the site would help diagnose this one a lot faster.

Cheers,
Jason.

Thank you so much for the quick reply, Jason! It appears to happen on all browsers, cross platform. I've seen it on the latest Safari and Chrome, and I know PC users on a variety of operating systems have encountered it as well, so I don't think it's browser specific.

The URL for the site is: www.livengoodplanet.com

The issue pertains to the main menu and the large slideshow on the front page.

Thanks again!
Matt

Hi Matt,

I just can't replicate it here. It all works fine for me.

Nice use of Zengrid BTW, I like it!

Thanks for having a look, Seth, that's the same issue I keep coming up against. It's not only intermittent, but also rare! Pros and cons to that..

Thanks for the props, Zengrid is just awesome. A real swiss army knife template!

Yeah, I love ZGF myself, using it for everything now!

Sorry, but it is real hard to nail an issue when you can't see it! I don't have any suggestions for that I'm afraid....

Hi Guys

I'm having the same issue (although I cant see it happening on yours!)

Is www.bishboshbecca.co.uk/final any better an example?

Any z-index ideas?

Thanks

Fran

Brian,

Found your problem and have a suggestion...

In your JB Slideshow everytime the images cycle through, it adds to the image's z-index by +1. So if you let the page just sit for about 15/20 minutes the Slideshow z-index value will grow past 100 (this is the z-index value you have for your drop-downs). At this point your drop-downs fall behind the Slideshow!

Solution: By default, ZenGrid uses images for it's drop-downs so what you can do is increase the z-index value to 1000. This is more of a work-around then a fix but at least with this, it will take over an hour for the Slideshow images to cycle up to a z-index value of 1000!

Ed

Fran,

In order for your drop-downs to stay in front of your Slideshow, you'll need to use background images and not a #color call. By default, ZenGrid uses background images for the drop-downs to establish their color. If you read my post to Brian, you'll get a better understanding of what is happening and a solution (work-around). FYI: z-index has no effect on 'background: #color'. Only when the background is using a URL image within the CSS.

Ed

Ed-

Thanks a million!

Matt

Matt,

Your most welcomed and sorry for addressing you as 'Brian' in my reply... My bad!

Ed

Hi Ed

Thanks for the reply,

"ZenGrid uses background images for the drop-downs to establish their color" but I was unaware I have changed this default since installation?

Where is it controlled from as I have not altered the menu.css

Fran

Hi Fran,

Actually, as you are using the pre-ZGF Zen template, it is a bit different.

I think that this was the default situation for this template, which was really intended to just provide a skeleton for you to flesh out (you have done a great job BTW). As such, there are no background images on the menu drop-downs.

The resolution should be as simple as creating an image to use as the drop-down background (even a small repeating image) and setting that as the background image. Then give it a high (1000) z-index value to ensure it always shows above the slideshow.

You can do that in this rule, theme.css:

#nav li ul {background: #fff;border: 1px solid #ddd;border-width: 0 1px 1px 1px}

Hi Seth

I've just decided to attack the menu suggestion you gave me, but I must be a complete idiot because I cannot for the life of me get it to show in front of the slideshow.

I have created a small image, loaded it to the image directory, changed the css as directed to show the image as a background url and....I've got it wrong somehow. Its now transparent when un-hovered over, lilac when hovered over (which is great) and still appears behind the slideshow!

Can you enlighten me as to how I'm messing this up?

Thanks

Fran

Actually looks liek slideshow is missing a z-index value for this rule:

Setting it to 1 will fix this.

Thanks for spotting it.

Anthony

Awesome, thank you so much guys!!!

Dammit, I was looking all over and didn't spot that!! Sorry Fran...

Thanks Anthony!