HTML/Div Layering over Flash and Transparent Background with Windowless Mode

To lay HTML elements such as a DIV over a Flash object, the Flash object must be embedded with windowless mode. Setting the mode to windowless also allows the web page to show an image or a background through the Flash object embedded on the page. The only drawback with using windowless mode is performance. Most of the time the difference in performance would not be noticeable. However, if performance was a top concern then alternate designs should be considered.

To set the mode to windowless or transparent, the "wmode" parameter should be set to "transparent" as follows. The way the mode is changed depends on the browser. On IE the OBJECT tag is used. On Firefox the EMBED tag is used instead. To accommodate for all browsers use SWFObject or put the EMBED tag inside the OBJECT tag right before "</OBJECT>".

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
WIDTH="550" HEIGHT="400" id="objectId">
<PARAM NAME=movie VALUE="flashfile.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<param name="wmode" value="transparent">
</OBJECT>

<EMBED src="/support/flash/ts/documents/myFlashMovie.swf"
quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400"
NAME="embedId" ALIGN="" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"
wmode="transparent"></EMBED>

Using my favorite way of embedding flash, SWFObject:

<script type="text/javascript">
   var so = new SWFObject("flashfile.swf", "objectId", "400", "100%", "8", "#336699");
   so.addParam("quality", "high");
   so.addParam("wmode", "transparent");
   so.write("flashelement");
</script>

For more information there is a TechNote about this from Adobe.

Internet Explorer (IE) Conditional Comments

It's rather common that the same CSS styles are rendered differently among different browsers. Many times there is a difference between the way Netscape/Mozilla/Firefox browsers interpret CSS code and the way IE does. Opera seems to fall on either side depending on the property. Another problem that often arises is that different Javascript code must be written for different browsers.

Now with Javascript, unlike CSS, it's easy to check the type of browser and execute different code accordingly as I've explained before. However, it's sometimes more desirable to include different Javascript files depending on the browser especially when there is code that is specific to only IE. One viable solution for this is using the IE conditional comments.

Using IE conditional comments, one can include Javascript, CSS, and HTML that is only parsed if the user browser is IE or if it's not IE. If it is IE, you check even further and include the code if browser is a specific version of IE.

There are two types of conditional comments. One is called "downlevel-hidden," which is only parsed by IE because it uses special IE syntax. The second is called "downlevel-revealed," which is ignored by IE and parsed by everything else because it's not a standard HTML comment.

The downlevel-hidden syntax is as follows:

<!--[if IE]> Javascript/CSS/HTML <![endif]-->

As you can see the downlevel-hidden syntax uses standard "<!-- ... -->" HTML comment syntax.

Now the downlevel-revealed syntax is:

<![if !IE]> Javascript/CSS/HTML <![endif]>

Here we don't have the two dashes "--" after the "!" and before the ">".

The difference between downlevel-hidden and downlevel-revealed is that downlevel-hidden is parsed by IE when the condition is true and is never parsed by other browsers. Downlevel-revealed is always parsed by other browsers and is parsed by IE only when the condition is satisfied. So in both cases IE selectively executes but in downlevel-hidden other browsers never see the code and in downlevel-revealed they always parse it.

Here are some examples of what can be done with conditional comments from MSDN

<!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->
<![if !IE]><p>You are not using Internet Explorer.</p><![endif]>

<!--[if IE 7]><p>Welcome to Internet Explorer 7!</p><![endif]-->
<!--[if !(IE 7)]><p>You are not using version 7.</p><![endif]-->

<!--[if gte IE 7]><p>You are using IE 7 or greater.</p><![endif]-->
<!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]-->
<!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]-->

<!--[if true]>You are using an <em>uplevel</em> browser.<![endif]-->
<![if false]>You are using a <em>downlevel</em> browser.<![endif]>

<!--[if true]><![if IE 7]><p>This nested comment is displayed in IE 7.</p><![endif]><![endif]-->

Some of the CSS differences I've noticed is that the opacity property has no effect in IE but it works in Firefox and Opera. When word-wrap property with value of "break-word" is applied to hyperlinks (anchors) in Firefox, it does nothing but it works on IE and Opera.