Ie dropdown positioning

when you view this page in internet explorer, you’ll notice that the Services dropdown is hidden by the video. how do i get it to appear in front of the video like it does in other browsers?

please advise. thanks in advance.

Simply adding the following to your <object> element should fix it.

<param name="wmode" value="transparent" />

i just put that in place but its still not working. any ideas?

here’s the code:

				<div class="video">
					<object width="450" height="290"><param name="wmode" value="transparent" /><param name="movie" value=""></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="450" height="290"></embed></object>

I seem to recall that wmode “opaque” did a similar job with less tax on the browser.

But I also remember people saying the only thing that ever works with IE (at least older IE) is the iframe shim. You could google around for that a bit. This is one of the more recent mentions of it I’ve found:

This has to do with what IE apparently does (or did, not sure if this is still true of 9/10) with Flash objects (and used to do with form elements like <selects>): instead of merely giving these elements a higher z-index, IE actually creates a whole new “window” for them. That is why you can z-index your menu to the moon and never be able to cover the Flash: your moon-sized z-index is still only affecting the other, lower “window” and so can never touch the Flash “window”. The iframe however also gets another “window” and so you can fake things covering it with one of those. A dirty, nasty hack.

When I last faced the Enemy, there was a select element under a dropdown menu in the header. The choice then was, iframe shim, or try to shuffle the submenu and select around until they didn’t hit each other. I chose the latter.


You need to add wmode=“opaque” to the embed tag also as that’s what IE uses.

	<embed wmode="opaque" src="" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="450" height="290"></embed>

But I also remember people saying the only thing that ever works with IE (at least older IE) is the iframe shim.

The iframe shim is only needed for ie6 :slight_smile:

In the case of the <select>, in IE7 I couldn’t prevent it popping out on top even with setting the z-index on the dropdown’s ancestor. IE8 was freshly out at the time and didn’t show the issue. I assumed IE7 was “windowing”.

There could be many things that IE7 didn’t like but the most likely explanation (as you suggested) was a positioned parent making the section “atomic” and thus its children are not able to escape. (The article you linked to above missed some key points in that IE7 and under should give positioned elements a z-index: of auto but in error they apply a z-index of zero thus confining the children forever. When an element has a z-index of auto then it effectively has no z-index similar to non positioned elements - except that the fact that because its positioned the browsers will raise it on top of on positioned elements anyway).

IE7 will hover over selects ok as this very old demo shows (excuse the ancient code :)).

Of course it could be a million other bugs like the fact that positioned elements don;t actually work unless you have them in haslayout mode so that could have a been a culprit also. Oh how I miss these old “haslayout” discussions :slight_smile:

this worked in the IE9 i have installed on my computer. thanks! i dont have IE8 or IE7 to check them there.