My CSS menu pops up UNDER the Flash applet. Help!
January 20, 2005 8:44 PM   Subscribe

CSS/Flash Filter: I'm working on a mockup for a new company website, and I'm not particularly experienced with Flash. The page that I'm working on has a CSS generated menu that when it pops up, comes up under the flash applet. Please excuse the poor coding...
posted by jackofsaxons to Computers & Internet (7 answers total)
I'm going to deduce that you're testing in IE/PC. Assuming that, your problem lies in the fact that IE has a hard time placing anything over "active" elements, the most frequent troublemakers being Flash movies, IFRAMEs and SELECTs.

In my experience, IE is the only browser that has this problem (your menus show up over the Flash in Safari, for what it's worth).

If you visit and mouseover the left nav to activate the flyouts, you'll see the most common fix: Any active elements disappear, then reappear.

I've heard tell of a graceful fix for this, but I have yet to see it, and don't know what it entails. Until I find it, I either make stuff disappear, or position things so they don't conflict.
posted by o2b at 9:12 PM on January 20, 2005

I'm no CSS expert, but I'm learning. For starters your first tag (the DOCTYPE) is wrong, if you are using CSS. I recommend reading and understanding this A List Apart article. Once you understand that browsers have two modes of rendering pages, you'll want to make sure you are telling it to be in the right mode with the DOCTYPE.

Once you have that right, try doing CSS validation on your page. The validator will tell you where you are having CSS code errors.

Finally, quality CSS help will probably be more likely to come from a nice group like the CSS-Discuss mailing list. I recommend subscribing now.

I'm on a Mac right now and I'm not seeing any menu (or any Flash) in either Safari or Firefox. Good luck!
posted by spock at 9:13 PM on January 20, 2005

wmode="transparent" will cure your ills for most people... forget about menus and flash on mac/ie

thats some slow loading shizzle - even on broadband....

posted by specialk420 at 10:15 PM on January 20, 2005

I'm using Firefox (on a PC) and the menus go under the Flash. So it's not just IE.
posted by grumblebee at 10:25 PM on January 20, 2005

Flash uses a different rendering method to the rest of the HTML page - that includes your vanilla HTML, any generated by Javascript, anything funky done with CSS.

Flash is always, and unfortunately, on top of the "normal stuff", which doesn't provoke a problem in most sites, but when you start using DHTML to move and show objects the issue gets ugly.

As Flash is outside of the "normal stuff", you can't even put it in a layer and then hide the layer, so really there's no alternative but to be careful never to overlap your DHTML objects and your Flash movies.

There are similar problems with form fields (inputs, select lists etc.) and CSS, however as these are part of the HTML itself, you can put them in a hidable layer.

Sorry for the downer.
posted by NinjaPirate at 2:27 AM on January 21, 2005

Actually, Flash can be made to respect layering.

First, set a wmode attribute in your object tag...
<param name="wmode" value="opaque" />
(and do something similar for your embed tag)

Then wrap a div around the whole of the object tag and set the z-index to something lower than the stuff you want to overlap it...
<div id="foo" style="position:relative; width:800px; height:200px; z-index:1">
posted by sad_otter at 8:37 AM on January 21, 2005

z-index is quite useful, but be aware of which browsers support it, partially support it and don't support it at all. Choosing/recognizing which browsers you are going to support and which you are going to leave behind is actually the first design decision one should make. All other choices will be predicated upon that.
posted by spock at 12:02 PM on January 21, 2005

« Older Free Plugin or Filter for Audio Hijack to Reduce...   |   What's going on with this car's starter?! Newer »
This thread is closed to new comments.