Collecting the Internet So You Don't Have To

We work on the Internet. As such, we are constantly consuming information. Believe me, there is a lot of it out there. Sometimes we even forget things unless we write them down. Our blog covers everything from web standards to the muppets, php to comic books, music and everything else that we find interesting. Leave us a note when you drop by.

Flash, CSS z-index and Internet Explorer

Technology
Ross McDowall
Ross McDowall Senior Web Developer
Visual Lizard
work
1 (204) 957-5520 ext:151
toll-free
1 (888) 237-9559
url
http://www.visuallizard.com
Ross McDowall Fearless Dwarven Warrior

The newest browsers understand how to combine flash and css. The issue of flash always rendering on the top level has been addressed sufficiently, and can now be displayed like any other element by using proper css code.

Except for Internet Explorer.

We came across an issue where our HTML / CSS popup menus were appearing behind a flash object in IE 6 & 7. According to standards, the css and html were correct. This is what we discovered and how it was fixed.

Internet Explorer reads flash in a different manner than the other browsers. Where Firefox, Safari and Camino understand and render the <object> tag with its parameters, Internet Explorer doesn’t acknowledge the <object> tag, and prefers the <embed> tag instead. So while we index items properly in CSS, when it comes to flash, we have to make specific exceptions for flash in Internet Explorer. Follow these rules for proper z-indexing in all browsers.

  • z-index the tag in which the flash object is contained.
  • set <param name="wmode" value="opaque" />
  • for Internet Explorer set the <embed> tag wmode="opaque" !! Important !!
  • set Internet Explorer stylesheet specific z-index style for the flash embed

Someday Internet Explorer will catch up with standards. Until then we will need to remember these little quirks and how to fix them.

Update:

I received an email from Arnie this morning asking for some clarification on what was written above.

Arnie asks, "In Ross’ Blog 226, he shows how to fix IE’s problem with Flash and the z-index. He doesn’t specify the z-index values; am I right to assume that the div holding the swf should have the lowest z-value on the page so that everything else will appear above it if they overlap?"

In response to Arnie’s question, the assumption that the containing div should have the lowest z-index value is correct. The general rules for z-indexing still apply. The issue that we are sorting out with Internet Explorer requires the embed tag to also have a z-index. As for z-index values, this is always relative to your own CSS and HTML construction.

If you have any other solutions or quirks please let us know. Thanks for reading.