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

[phino]

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.

FYI - It works fine on Firefox and IE. I have yet to try Safari.

Browser Version: Google Chrome Version 29.0.1547.66 m

[jscheuer1]

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:

<iframe width="560" height="315" src="//www.youtube.com/embed/o6FwyADPBjQ?wmode=transparent" frameborder="0" allowfullscreen></iframe>

If there's already a ? in the URL, use &wmode=transparent instead.

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.

[phino]

The banner ad one has been done (screenshot provided below) this is our sports section and it displays over the video and the ad.

sorry i didn't mean to say parameter, i meant to say the string. i've tried both of those and it didn't solve it. i tried to examine the code on the working page but everything matches up just fine.

thanks!

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

[phino]

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!

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.

[phino]

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?

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.

[jscheuer1]

The thing is that there's so much going on with that page that it's hard to track down. If I do:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>
<div style="position: absolute; top: 0; left: 0; width: 100px; height: 800px; background: red;"></div>
<iframe src="http://embed.newsinc.com/Single/iframe.html?WID=2&VID=25108654&freewheel=91082&sitesection=sesunsentinel&height=267&width=400" height=267 width=400 frameborder=no scrolling=no noresize marginwidth=0px marginheight=0px></iframe>
</body>
</html>

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.

[phino]

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.

[phino]

Hey so I came across this one.

ul#root li ul.level2 {
	cursor:pointer;
	max-width:100%;
	position:absolute;
	height:auto;
	left:-9999px;
	top:26px;
	width:980px;
	display:block;
	margin-top:0;
	}

when i remove left: -9999px, everything displays on top of the video now except for Home and News (provided screenshots)

[phino]

found the issue! jscheuer1, you were definitely pointing me in the right direction about the menu animation. i found it in the CSS

-webkit-transition:opacity .2s ease-out;
-webkit-transition-delay:0;
-moz-transition:opacity .2s ease-out 0;
-o-transition:opacity .2s ease-out 0;
transition:opacity .2s ease-out 0
}

apparently google chrome doesn't take too kindly to CSS3 transitions. when i edited the portion to a .0 s transition opacity, it worked perfectly! thanks for your help!