Member Avatar for JerieLsky

I have a problem concerning with tables and object.
I actually have a menu:
*Home
*About Us - Profile|Developer
*What's New?
*Features and Amenities - Enjoy life|Site Development Map|Image Gallery|Testimonials
*Reserve Now
*FAQ

So under "About Us" menu it contains submenus: Profile|Developer. So when i point my cursor to "About Us" the submenus pops-out, now below the menu is an <object> or a flash animation, so the problem now is the submenus cannot be seen because of the <object>. The submenus are actually now placed at the back of the <object>. Can anyone help me now on this problem? I tried using the z-index but it doesn't work.

  • 2 Contributors
  • 3 Replies
  • 102 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by JerieLsky

Dani AI

Generated

This thread demonstrates the typical cause and fix: the plugin (Flash/SWF) is drawn as a windowed element above the page, so ordinary CSS z-index on HTML elements does not win. pointed this out and confirmed the fix worked. The notes below cover what to check next, common pitfalls, and a couple of simple fallbacks.

Checklist and things to verify

  • Confirm the embedded asset is a Flash/SWF. The window-mode parameter affects Flash only; PDFs, QuickTime, etc. can behave differently.
  • Make sure the Flash is actually being rendered inside the page stacking context (some embed generators only output one kind of tag and miss the needed setting).
  • Ensure your menu has a positioning context: z-index only works on elements that are positioned (relative/absolute/fixed). If the menu or one of its ancestor elements forms a new stacking context (CSS transform, opacity < 1, or a positioned ancestor with a z-index), move the menu outside that context or raise its stacking context appropriately.
  • Prefer the opaque window mode when you do not need transparency — it is usually faster than transparent.

Small CSS / JS fallbacks
Use positioning and a high z-index on the nav. If the plugin still overlays, hide it while the submenu is visible as a pragmatic fallback.

#nav { position: relative; z-index: 1000; }
#nav .submenu { position: absolute; z-index: 1100; }
var flash = document.getElementById('myFlash');
var nav = document.getElementById('nav');
nav.addEventListener('mouseover', function(){ if (flash) flash.style.visibility = 'hidden'; });
nav.addEventListener('mouseout',  function(){ if (flash) flash.style.visibility = 'visible'; });

Longer term: Flash is deprecated and unsupported in modern browsers. For future-proofing, replace SWF animations with HTML5/CSS/Canvas/SVG or lightweight solutions such as Lottie so overlays and accessibility behave predictably. Test changes in several browsers and check the DOM with dev tools to confirm the parameters and stacking contexts are applied.

Recommended Answers

All 3 Replies

Member Avatar for Airshow

JerieLsky,

I think this is the same problem as the one reported here.

After a bit of research I found a completly "unguessable" solution ....

There's an indication that swfs can be forced into the DOM as per regular html elements such that they will obey css z-index. Default behaviour is to sit on top of everything else regardless of z-index.

Try inserting these special attributes into your object/embed tags:

<object .....>
.....
<param name="wmode" value="transparent">
.....
</object>
<embed ..... wmode="transparent" .....><object .....>
.....
<param name="wmode" value="transparent">
.....
</object>
<embed ..... wmode="transparent" .....>


This proved to be good in IE, FF and Opera.

There's a working example .

Airshow

Member Avatar for JerieLsky

So am I still going to set the z-index of my table to a certain value? Cuz i tried inserting the attributes that you gave still the submenu tables are behind the <object>.

Member Avatar for JerieLsky

Oh!! My bad!! It works, i just missed something. Whew! that was fast and helpful. Thanks alot! You solved my problem. :d

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.