Forum Moderators: open

Message Too Old, No Replies

Flash and div layers

         

lsvortex

10:57 pm on Nov 3, 2005 (gmt 0)

10+ Year Member



I have built a nav bar in flash with animated drop down menus. I used the wmode="transparent" to have the menus drop down over the underlying HTML on the page. All seemed fine until I was testing the page in Firefox and I noticed that any links on the HTML portion of the page that the flash div layer (on a higher z-index) overlapped were not accessible. You cannot click on any of of the links that fall in the overlap area. I then put two simple lines of code into an html page to test in both IE and Firefox. IE allows the google link to be clicked while you cannot click the link in Firefox. This basically means drop down menus in flash are useless if they happen to drop down over a link you have on your page. Is there some way to make the following code function in Firefox?

<div id="layer1" style="width: 600px; height: 500px; position:absolute; left:0px; top:0px; z-index:1 "><a href="http://www.google.com">google</a></div>
<div id="layer2" style="width: 600px; height: 500px; position:absolute; left:0px; top:0px; z-index:2 "></div>

whoisgregg

11:11 pm on Nov 3, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



A recent thread [webmasterworld.com] may have some information that will help you.

If not, please post back and we'll see how else we can help. :)

lsvortex

11:23 pm on Nov 3, 2005 (gmt 0)

10+ Year Member



At first I thought this post would be of help but it is really a different issue. It basically boils down to if you have two layers in Firefox that overlap each other but the top layer is transparent in spots you still cannot click on links in the lower layer while in IE you can click on the lower layer links. Is there some way that any one knows to get Firefox to behave like IE on this issue. Take the two simple lines of code and try them it seems you should be able to click the link in either browser. I have even tried it on Firefox 1.5 RC1 which fixed tons of layer issues and it still does not work like IE. I have read all the CSS docs I can find and I can't figure out what the standard should be.

Richard_N

8:09 am on Nov 4, 2005 (gmt 0)



Personally I would never use flash in this way.... firstly the menus will be inaccesible to devices without flash (PDA's, phones) or the disabled with screen readers. Secondly search engine will not pick up the links (flash file) and spider the site correctly.

There are a few good CSS/XHTML compliant dropdown menus about which IMO would be a better option. Flash was never really meant to be used this way, the wmode=transparant takes a lot of processing power to render and massively slows down a pages loading. Again using DHTML layer stacking seems largely deprecated if CSS/XHTML is used correctly.

My advice (although probably not what you want to hear) is drop the flash menus for some CSS based ones and loose the div stacking.