HTML on top of Flash

It is pretty easy to place HTML on top of Flash. Or at least I though so.
In order to allow HTML content to be written on top of Flash content, you must apply the “wmode=opaque” (or “wmode=transparent“) parameter to the Flash, like this:

    pluginspage="<a href=""></a>"

Or if you use jQuery you can apply the wmode parameter like this:

<script type="text/javascript" language="javascript">
  $jQuery(document).ready(function() {
      src: '/flash/myflash.swf',
      allowscriptaccess: 'always',
      width: 800,
      height: 200,
      expressInstall: true,
      wmode: 'transparent',
      allowFullScreen: true,
      flashvars: { somevars }
    { version: 8 }

This should do the trick. But in a recent project I ran into the problem that my DHTML top menu which rolls over my top Flash was rendering fine on top of the Flash, but some HTML that was placed further down on my page was not. If i ran my page in IE8, my top menu HTML rendered on top of the Flash, but the other HTML ran below. In IE7 both worked fine.

Here is the trick: if your CSS does not have the position:relative style on the DIV (or span or UL or whatever) that contains the HTML to render on top of the Flash, the HTML will be rendered below.

This is my original CSS:

div.secondary-column {

This is my modified CSS that allows my HTML to be rendered on top of the flash:

div.secondary-column {

The solution is simple, yet it took me hours to find…


About briancaos

Developer at Pentia A/S since 2003. Have developed Web Applications using Sitecore Since Sitecore 4.1.
This entry was posted in .net, General .NET and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.