The thing is that there's so much going on with that page that it's hard to track down. If I do:
Code:
<!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.
Bookmarks