problems with z-index in firefox

[soulmachine]

This is my first post to the forum, so hello to WebDeveloper.com :) I'm good with HTML. I'm very new with CSS which I agree is more efficient for style and layout. I'm pretty sure this is a question for this forum, sorry if not.

Now to my question, which I hope I ask sufficiently.

I have 3 objects layered on a website index page. An image, and 2 flash objects. I have them positioned where I want them, and they layer over each other as desired. The image is meant to be the bottom layer, which has worked fine. The two flash files, however, are layered incorrectly in Firefox, however it is displaying fine in IE. ("example1.swf" displays behind "example2.swf" in Firefox, when it should be vice-versa "example2.swf" should display behind "example1.swf").

My relevant CSS code is as follows:

.image-pos {
position:absolute;
left:-30px;
top:-16px;
z-index:1
}
.example1-pos {
position:absolute;
left:315px;
top:260px;
z-index:2
}
.example2-pos {
position:absolute;
left:570px;
top:275px;
z-index:3
}


and here are the HTML objects I am positioning:


<img class="image-pos" src="images/main.jpg" alt="..." border="0" width="593" height="600" />

<table class="example1-pos">
<tr>
<td>
<script src="scripts/javascripts/call-example1.js"></script>
</td>
</tr>
</table>

<table class="example2-pos">
<tr>
<td>
<script src="scripts/javascripts/call-example2.js"></script>
</td>
</tr>
</table>

If you're wondering why I called my flash from external javascript file, I did it because it gets rid of new activation box that is displayed around flash files in IE. If there is a more efficient way to do this please do say, I would appreciate it. Also, and more importantly, how can I get these flash files to layer correctly in Firefox.

I hope I didn't break any rules with this post I am new here.
Thanks for your time,

Jeremy

PS: I am going to be needing a navigation menu system for this site. I would like the menu to be smooth, sleek, and contemporary. Any quick advice, or guidance to your favorite reference material on this, would be appreciated.

[WebJoel]

I do not beleive that there is an easy way to 'layer' FLASH. It's tricky and unpredictable, if at all possible. I read here not too long ago something to the effect that FLASH is akin to 'z-index;infinity'. That is to say, you can't put anything 'above' it, because it will always be 'one up' still.
Someone more familar with FLASH might re-post the link that explains this better.

[Bog Zaicev]

use iframes :eek:

[soulmachine]

WebJoel: I can see where you may be right. Thanks for the heads-up on that. ;)

--

I'm going to wait (maybe a couple of days) to see if anyone has a solution that can make this work, or a workaround. During that time, I'll also be trying to find a more efficient way do display my flash art.

Thanks again :D

[soulmachine]

use iframes :eek:

Use iFrames where and for what reason? Your solution is too blunt. :confused: I do not understand. Please elaborate, if you don't mind.

Thanks for the reply ;)

[Bog Zaicev]

Use iFrames where and for what reason? Your solution is too blunt. :confused: I do not understand. Please elaborate, if you don't mind.

Thanks for the reply ;)
my english is very poor :(

You can put flash into iframes, so it should layer correctly in Firefox. :rolleyes:

[felgall]

Putting the flash into iframes will allow you to set the iframes to the appropriate zIndex that you require in all browsers except for Opera (which does the same thing with iframes as most browsers do with flash and puts them on top of everything else).

The only real solution is to make sure that the two flash objects never overlap as there will always be situations where you can never predict which one will be on top.

[soulmachine]

Awesome.

Bog Zaicev & felgall :: Thanks for you suggestions!

Great first experience on this forum.

------
edit: Also, I've decided to NOT layer flash. It's too unpredictable, and after a night of sleep and waking up to view my progress, I realized it was too cluttered looking anyway.

Thanks again ;)