Member Avatar for Dani

I have an all-CSS drop down menu with a z-index set to 100. However, it still appears behind some form elements and flash advertisements. What can I do to fix this?

Thanks

  • 4 Contributors
  • 8 Replies
  • 130 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by Dani

Dani AI

Generated

Two separate causes are common when a CSS menu refuses to stack above other page content: windowed plugin content (Flash) and native windowed controls (notably <select> in older IE). already hit the Flash path, and correctly flagged the IE/select issue. The practical checklist below covers both and the usual gotchas that make a WMODE change seem ineffective.

A correct Flash embed must set WMODE in both the <object> and the <embed> (or via the params when using SWFObject). Example structure:

<object ...>
  <param name="movie" value="whatever.swf" />
  <param name="wmode" value="opaque" />
  ...
  <embed src="whatever.swf" wmode="opaque" ...></embed>
</object>

Troubleshooting checklist:

  • Confirm the actual delivered embed contains the wmode param in both places. Inspect the live DOM with your browser inspector — many ad networks inject SWFs dynamically and omit wmode.
  • If the SWF is inside an iframe, WMODE in the child frame cannot let parent-page DHTML sit above it. Ask the provider to change the embed or move the menu into the same frame.
  • Try wmode=opaque first; use transparent only if true transparency is needed (transparent can slow rendering and affect focus).
  • Clear caches after changing the embed; some browsers aggressively cache SWF/XML.
  • For IE/select problems, use an iframe shim behind the dropdown or hide/selects while the menu is visible. Libraries like bgiframe (or a simple positioned iframe sized to the menu) were common workarounds in older IE.
  • Check stacking contexts: z-index compares siblings within the same stacking context. Moving the menu to be a direct child of <body> (so its z-index isn’t constrained by ancestor stacking contexts) often fixes unexpected layering.

Note: if unable to edit third-party ad code, the only reliable options are asking the provider to add WMODE or using layout changes (move menu into same container or use a shim).

Recommended Answers

All 8 Replies

Member Avatar for Dani

Update: I just read that z-index only works with elements that have been absolutely positioned. Will give it a go :)

<< update: It appears I already am using position: absolute; for the div I would like to bring foreward. >>

Member Avatar for Dani

Got it working, thanks to this knowledge base article: http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_15523

Issue

A Flash movie in a layer on a DHTML page containing several layers may display above all the layers, regardless of the stacking order ("z-index") of those layers.

Reason

By default, browsers place embedded plug-in content, such as a Flash movie or Java applet, on the topmost layer. In older browsers attempts to place a DHTML layer on top of a Flash layer would fail. Newer browsers add the ability to layer Flash content with DHTML content and in some cases the ability to use transparent backgrounds in the Flash content (see below).

Solution

Make the Flash movie's background transparent using the WMODE tag. This will allow the DHTML layer underneath the Flash movie or layer to appear.

For details on creating a Flash movie with a transparent background refer to How to make a Flash movie with a transparent background (TechNote 14201).

Member Avatar for tgreer

Internet Explorer has had a long-time bug with select elements and z-index. Talk to your mod "Troy" about it, I know he's done a lot of research and has developed some workarounds.

Member Avatar for Dani

Well this seems to have been a Flash problem. It wasn't working right in IE or Firefox before the fix on Macromedia's website (err, Adobe's website).

Member Avatar for martinkorner

Is there two of you, or has cscgal just had a short coversation with herself above? hehe

Only kidding - Glad you sorted it out.

Ive just started with flash and I've realised how much cool stuff you can do with it - I think it's ace!

:lol: Martin :lol:

Member Avatar for DanceInstructor

Hehe :)

Spam! :lol: :cheesy:

Member Avatar for Dani

Hmm ... this still isn't working and I don't understand why. According to this page on Adobe's site:

http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_14201

The background of a Flash movie can be set to transparent. This allows the background color or image of the HTML page that contains the Flash movie to show through and allows the layering of Flash content with DHTML content.

However, the DaniWeb CSS-based menu still renders behind the Flash ad in Firefox. GRRR ... any suggestions?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.