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…

Get HTML from page

This piece of code have followed me since 2003 and I have used it several times. It simply retrieves the text from a URL and returns it as a string. The code is usefull for reading RSS feeds or getting HTML from pages. I even used the code to stress test a certain page on my website.

public string GetPage(string url, NameValueCollection headers)
{
  try
  {
    string ret = "";
    System.Net.WebRequest myRequest = System.Net.WebRequest.Create(url);
    myRequest.PreAuthenticate = true;
    myRequest.Method = "GET";
    if (headers != null)
      myRequest.Headers.Add(headers);
    System.Net.WebResponse myResponse = myRequest.GetResponse();
    try
    {
      Stream stream = myResponse.GetResponseStream();
      StreamReader streamreader = new System.IO.StreamReader(stream);
      ret = streamreader.ReadToEnd();
      return ret.Replace("\x00", "");
    }
    finally
    {
      myResponse.Close();
    }
  }
  catch (Exception ex)
  {
    throw new Exception("Could not get HTML from " + url + ": " + ex.Message, ex);
  }
}

Calling the code is very easy:

GetPage("http://www.pentia.dk", null);