Flash wmode not really transparent in Firefox

[jamiller]

So my Flash navigation in Firefox isn't really transparent. I mean, everything below the flyout navigation appears just fine and in this sense it is transparent. But I have some links there that cannot be clicked in Firefox, works great in IE7. I'm using swfobject with an addParam("wmode", "transparent");

Anybody else ever have this problem? I'm pretty sure I can make a workaround with JavaScript but I'd really rather not do this if at all possible.

Thanks

Jeff

[BLiZZaRD]

When Flash is on top it has focus, and all other things (in this case) below it are in a sense disabled. You will need to place the Flash behind the other links.

If you don't know how I will help you :D

[jamiller]

I thought I could solve this problem with some JavaScript but as it turns out there is no way for the script to know if the links have been rolled over because the Flash is, and is always, on top. So your help would be greatly appreciated :)

[BLiZZaRD]

Sure, no problem. Do you have a link to the infected page so that I can give you specifics?

[jamiller]

http://evol-interactive.com/ihsolutions/test.php

I just uploaded the files that mattered. Hopefully you'll be able to figure it out.

Btw, I really appreciate the help!

[BLiZZaRD]

Okay.. looking.. and I assume you are speaking of the black recangle under the pop out nav, yes? That shouldn't be black but instead show the content that is under it?

[jamiller]

Not completely sure what you mean but the fly-out flash nav goes over the rectangle on the left with the links, Overview, Benefits, Features, etc. They work great in Internet Explorer, but not in Firefox.

[jamiller]

Okay, I see what you mean now. Yes, the black box under the nav should be black. And the wmode works correctly because the Flash nav is something like 300 px tall so you are able to see everything under the nav. Except in Firefox you aren't able to click on a link that resides under the flash. See what I mean now?

[BLiZZaRD]

okay here is what I am seeing:

in IE:
http://img255.imageshack.us/img255/9915/inieve5.th.png (http://img255.imageshack.us/my.php?image=inieve5.png)

and in FF:
http://img122.imageshack.us/img122/4426/inffnr9.th.png (http://img122.imageshack.us/my.php?image=inffnr9.png)

It seems to work fine in FF but not show the nav in IE at all...

Now, if I understand your original question correctly you can't click on the left vertical menu when the top horizontal menu is being hovered over... which I have to ask.. why is that a problem? If I hover over the top nav I don't want to click the left nav.. ??

[jamiller]

Ok well I see you're using IE6 which I haven't done any testing in as of yet. In IE7 it works great.

And my original question is that I cannot click on the left vertical menu at all, even if the mouse isn't over the nav because the nav with a transparent background is positioned over the horizontal links to the left. Which is why I made this thread's title, "Flash wmode not really transparent in Firefox." It's transparent in the fact that you can see through it, you just can't click on anything below it. If you rollover those vertical links in Firefox, nothing happens. If you rollover them in IE, you'll see the background change and you should be able to click on it, although the link is only a hash atm.

See what I mean now?

[BLiZZaRD]

I think the problem is CSS based (possibly JS based) and not with the Flash or the SWFObject. From what I see your doing the embedding correctly, but testing in 5 different browsers showed 5 different pages. That's not a Flash issue.

I will continue to look and see what I can do, but I would post in the CSS thread pointing to this one asking for help from that angle (I will look at CSS as well).

If you have valid mark up and correct coding it should be the same in all (major) browsers. THEN if it didn't work I could feel better saying it was Flash's fault. But right now I don't think so.

[jamiller]

Right, it's not a Flash problem but it wouldn't be a problem without Flash so I posted here. The problem is the way the different browsers treat the wmode of Flash. I've searched the globe trying to find an answer to my problem but the only answer I've been able to find is that there isn't an answer. I'm going to look into maybe doing this another way which is something that I really didn't want to do...

If you find out anything be sure to let me know! I'll also post something if I find the answer.

[BLiZZaRD]

About the only other rectify I ever used is to use Z-index to place the Flash behind the menus.

I don't use transparency in Flash either so I am not effected by this FF issue. (Netscape doesn't handle transparency well).

Maybe you can use both and together is you redesign the layout, or have the Flash fly out nav fly up instead of down... design around the "flaws" so to speak.

[byvisual]

hi,
your main problem is that the wmode param doesnt mean that the full size div which holds the flash file is not there. therefore the browser will always take it that you r hovering over the same div.

as blizzard said:
the z-index can be a solution. and work around it in the design.


i would also suggest the following css code on your div which will adjust the hght of the div whenever it is rollover. and shrink back on rollout.
that will solve the problem of not being able to click on the left nav.


<style type="text/css">
<!--
#flashNav {
position:absolute;
width:800px;
}
#flashNav {
padding-top:50px;
}
#flashNav a {
display:block;
height:50px;
width:800px;
}
#flashNav a:hover {
height:300px;
}
-->
</style>

throw that in your header and give the div holding your flash content an id = flashNav . that might solve your problem.


...ByVisual...