If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Google Chrome CSS Drop Down Menu behind Flash Ad / iFrame Video

Having an issue with a drop down menu that displays behind the flash banner ad and a video that's in an iframe. I've tried the z-index and could not resolve it. I've even tried the wmode opaque and transparent parameters and was unable to be successful in resolving this. Any help would be greatly appreciated please.

You might not be able to resolve the banner ad one. It depends upon how much control you have over it.

When you say a video that's in an iframe, is that an iframe video, like from YouTube? If so there is no parameter for wmode, but it can be set in the query string of the URL of the src attribute of the iframe, example:

The same (or similar, if it's an embed tag) could be done with the banner ad, if you can change the code for it. Generally its code is in an iframe that gets written to your page by a script that's on the server of whoever is placing the ad there, so is beyond your control. You can attempt to alter it using javascript, but that may be impossible. The best course of action would be to put the menu below the ad.

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

I'm curious how you fixed the banner (it's not fixed here in Chrome). The banner ad is something you might not really be able to fix. I've seen where, because the ads rotate, that sometimes it's OK, and other times the menu (in this case) or whatever, falls behind it, depending upon which ad is being displayed.

I tried the video on a separate page, and it falls behind an absolutely positioned element in Chrome. So it's probably just a z-index issue. However, I've been looking for a while now and cannot see which element or elements need their z-index values adjusted.

I will probably look some more, if I find anything, I will let you know.

Thanks! Yeah the banner one kind of threw me at a loop as it worked on one page and then not on the main page. I have been searching for a few days for elements with the z-index adjustments and couldn't come up with anything as well.

Greatly appreciate it. Thanks again!

Originally Posted by jscheuer1

I'm curious how you fixed the banner (it's not fixed here in Chrome). The banner ad is something you might not really be able to fix. I've seen where, because the ads rotate, that sometimes it's OK, and other times the menu (in this case) or whatever, falls behind it, depending upon which ad is being displayed.

I tried the video on a separate page, and it falls behind an absolutely positioned element in Chrome. So it's probably just a z-index issue. However, I've been looking for a while now and cannot see which element or elements need their z-index values adjusted.

I will probably look some more, if I find anything, I will let you know.

ok so i was able to figure out how to get it over the banner. it's applied to the div, z-index: 90 (just went with a high number for now).

now the menu shows above the banner but behind the video and right cube ad. i have a feeling, now that i gave the div a z-index, all div's are taking that z-index which makes the video (which sits in an iframe within a div) above the menu still. hopefully i didn't confuse anyone. but thoughts?

Originally Posted by jscheuer1

I'm curious how you fixed the banner (it's not fixed here in Chrome). The banner ad is something you might not really be able to fix. I've seen where, because the ads rotate, that sometimes it's OK, and other times the menu (in this case) or whatever, falls behind it, depending upon which ad is being displayed.

I tried the video on a separate page, and it falls behind an absolutely positioned element in Chrome. So it's probably just a z-index issue. However, I've been looking for a while now and cannot see which element or elements need their z-index values adjusted.

I will probably look some more, if I find anything, I will let you know.

In Chrome, the red absolutely positioned div is over the iframe. So it pretty much has to be the z-index. Now z-index can be set in either style on the page, in a stylesheet, or inline for the element, or via javascript. If an element has a parent with z-index, it inherits that z-index and cannot go lower that that z-index, but can go higher. The element itself or its parent from which it's inheriting the z-index must have position absolute, or relative, otherwise it has no z-index. If it has position fixed, it will show over everything regardless of z-index. Even with items without z-index or with the same z-index, items later in the markup will show over items earlier in the markup as long as the latter or both items are positioned as mentioned.

So there are a lot of items (elements) to look through to find the one(s) controlling the z-index for the drop down and for the iframe.

One option might be to use javascript to append the drop downs to the body and give them an insanely high z-index, and position absolute, then it should work. They would have to be positioned properly though after having being taken out of the flow of the page. jQuery can be used to do all that, if it comes to that.

But it's just possible that there's some other issue. And I notice that in Chrome, if I mouse over the trigger for a drop down and then mouse away, and then mouse over again before the little dark bar beneath the trigger has had a chance to move away, the drop down now covers the iframe. So it's possible that simply using a timeout or otherwise changing the order in which things occur in the menu script (sun-sentinel.com/hive/javascripts/menu.js) might take care of it.

Oh, and since we're on the topic of javascript, there are tons of javascript scripts associated with the page. It would be a good idea to cut down on them. I see two or more versions of jQuery, as well as Prototype/Scriptaculous. In theory only one version of jQuery should be required and anything that uses Prototype/Scriptaculous replaced by an equivalent script that uses jQuery. If that were done, the page should load faster, perhaps much faster. As it is now, the page takes a long, long time to load. This probably is also due to other things than the scripts involved, like so much ads and Flash.

That fact, the length of time it takes the page to load (way more than 8 seconds, seems close to a minute), makes working with it and troubleshooting it very time consuming. Each time a change is made, you really need to reload the page to see if it has had a beneficial effect. Some things can be tested in the console/developer tools (F12 in Chrome), but to be certain, a reload is required.

Last edited by jscheuer1; 09-06-2013 at 05:14 PM.
Reason: spelling, more info

The Following User Says Thank You to jscheuer1 For This Useful Post:

jscheuer1, thank you very much for your assistance and help. i will go ahead and track it down. and i agree with you, there is so much going on that it's really hard to find the issue but we are heading on the right track. i'll go ahead and dig deeper and provide an update as soon as i complete it. thanks again and let me know if any other updates come along from your end.