While working on a website I encountered a problem some of you are familiar with – flash overlapping any HTML. I found a solution, and I need a little feedback from other people that have a problem with that. For me, it works on Opera 9, Firefox 2 and IE 6. It’s an unusual thing that IE6 got things right from the beginning – kinda not used to that

First – let me explain what I wanted to make in the first place. I have a flash that occupies the top part of the page, but – at the bottom of the flash I wanted a pure HTML/CSS list navigation for easy modification and SEO reasons. Here is the picture, so you can understand me better.

Flash example

Ok, the simplest solution is to make the CSS list navigation below the flash in HTML, and just make it’s margin negative, so it would move up. And then use the wmode=transparent fix, when you import the flash movie in dreamweaver just add another parameter named “wmode” and set it’s mode to “transparent”. That should allow some navigation sub-menus to overlap flash files. A reminder – if there is no background graphic in your flash file it will be transparent if wmode=transparent, so just in case, make a bottom layer and paint it in the color you want. And if you want parts to be transparent just delete the paint. I deleted the paint where the navigation should go, just in case .

Then, just adjust the z-index on your divs, make the navigation div’s z-index higher that flash div’s z-index. I am a maniac and I used z-index: 1000; on the nav hahaha. That should fix the most overlapping troubles, but unfortunately didn’t fix mine

In my case, I don’t use Javascript except the one used to display the flash file(the Dreamweaver feature), my menu is manually made in xHTML/CSS with no drop-downs. So there are no fixes or whatever people use to put content above flash. So – the flash overlapped my navigation div in Firefox and Opera, I could see it (becasue I deleted the white paint in the area) , but I couldn’t click on the menu or see mouse-overs. IE6 worked – can you imagine that

I tried playing with the z-index values over and over again, but it was no use, id didn’t work, even with the wmode fix. Then it came to me, a most stupid solution – which turned out to work! In my HTML code the #flash comes before #nav, it’s a logical thing, but logic seems to work only sometimes. I decided to try a different approach to positioning the #nav. I just made the navigation render before the flash in HTML, and positioned it relatively to move it down in it’s place using: position:relative; top: 393px;/*the height of my flash*/. The menu was right where I wanted it and it worked right, and displayed over the flash?! Of course, because of positioning it relatively, I got 35px of blank space (height of the #nav) where my #nav should have been – on the top of the page, and simply fixed it by giving the #container a top margin of -35px; The blank space disappeared, and all three browsers I have display the same, and display it good.

I just wondered if it would work in other cases, so if someone comes across a problem similar to mine, I would like to have some feedback how my quick fix works in your cases. Thanks for reading, I hope this will help someone