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:

<embed
    height="200"
    width="800"
    allowfullscreen="true"
    wmode="transparent"
    expressinstall="true"
    type="application/x-shockwave-flash"
    src="/flash/myflash.swf"
    pluginspage="<a href="http://www.adobe.com/go/getflashplayer">http://www.adobe.com/go/getflashplayer</a>"
    flashvars="somevars">
</embed>

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

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

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 {
  float:left;
  width:265px;
}

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

div.secondary-column {
  float:left;
  width:265px;
  position:relative;
}

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

Firefox only prints first page of contents

It seems that there is a bug loose from the dawn of Firefox that disables printing of other pages but the first one on certain websites. Several solutions have been suggested, but none of them worked for me.

Then I approached the problem rationally. I simply disabled all style sheets, then added the style elements one by one until the print failed. I found the problem in the folllwing .CSS code:

.ThreeColumn .ContentBlock
{
    float: left;
    width: 440px;
    padding: 10px 20px 20px 20px;
    background-color: #FFFFFF;
    overflow: hidden; /* here is my problem! */
}

The problem is the overflow:hidden. When this attribute is set, Firefox only prints the first page. Maybe Firefox interprets the overflow:hidden as a command to hide text when overflowing to another page in the print?

Anyway, I removed this attribute and my page printed nicely.