Hello,
I'm having some problems with a website when is viewed with Opera:
http://ifhim.ceafax.org/main.php

If you see it in Opera, you'll notice that the images (that is a slideshow javascript) are superimposing over a flash menu with transparency (in order to see the images), that you'll see correctly in IE and FF.

I wanted to make the site lighter, so I decided not to add the images of the main page in the flash movie (I know that maybe there's a better way to do what I'm trying to do entirely in Flash, but...), the code of the slideshow is here:
http://ifhim.ceafax.org/_scripts/slideshow.js

The slideshow script is used like this in the website:

<script type="text/javascript">
<!--
new fadeshow(fadeimages, 750, 250, 0, 6000, 1, "R")
-->
</script>

And after that, I added the flash object like this:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="750" height="250" align="middle"
style="position:absolute; width:750px; height:250px; top:282px;">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="_flash/menu.swf?lang=fra" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="_flash/menu.swf?lang=fra" quality="high"
wmode="transparent" bgcolor="#ffffff" width="750" height="250"
align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

I'm adding this to the object tag:
style="position:absolute; width:750px; height:250px; top:282px;"

That is working fine in FF and IE like I said before, but I don't know why in Opera the images superimpose over the Flash movie.

I've tried adding a <div style="position:absolute; width:750px; height:250px; top:282px;"> to the slideshow script, but is not working in that way...

I don't know if this is entirely a problem with Opera, or there's something wrong in the code , but any suggestions or workarounds are welcome!!

I would suggest you get rid of the <embed> tag and use one of the methods listed in this stickie:
http://www.webmaster-talk.com/html-f...audio-web.html

Why are you using position: absolute anyway ?

Thanks for the link, I'll check it out and try it.

Originally Posted by LadynRed

Why are you using position: absolute anyway ?

I tried position:relative but then (I think due the use of the slideshow script), the images appear above the flash menu, like this on the site in question:

-------------------
[FLASHLOGO]
-------------------
[IMAGES]|
[FLASHMENU]
-------------------
content
content
-------------------

*(-------: divides each cell of a table)

I forgot to say that both the slideshow and the flash menu are in the same cell of a big table (that is the structure of the site).

I don't know if there's another way to put a flash animation over a image in the same position (and the issue that the images are showed by a slideshow .js script)

Why position it at all ?? The flash movie is inside a table cell.. no point in positioning it at all.. it will sit in that table cell.

Originally Posted by LadynRed

Why position it at all ?? The flash movie is inside a table cell.. no point in positioning it at all.. it will sit in that table cell.

Because what I need is this:

Flash movie over the slideshow images

But in Opera what I see is this:

Slideshow over the Flash movie

the only way that I can accomplish what you see in the first image, is by using position:absolute, when I try position:relative, this happens in all browsers I use (FF2, IE7 & Opera9):

Slideshow first, Flash movie second, in the same cell

I've searched a little more, and I found out that there's a z-index property I added that to the style attribute in the <object> tag:

style="position:absolute; width:750px; height:250px; top:282px; z-index: 1;"

The problem now is that this works ok, until the last picture of the slideshow appears, and then the Slideshow overlaps over the Flash movie once again... right here: http://ifhim.ceafax.org/main_test1.php

Then I decided to do this:

[01] Add a <div> tag for the Slideshow with a z-index:1:

<div style="position:relative;  z-index:1;">
<script type="text/javascript"><!--
new fadeshow(fadeimages, 750, 250, 0, 6000, 1, "R")
--></script>
</div>

I tried adding only z-index:1, but I think that property only works if postion is present...

[02] Changed the z-index property of the <object> tag from 1, to 2, then the Flash movie is always one level higher than the slideshow:

style="position:absolute; top:282px; z-index:2;"

I also deleted the width:750px; height:250px; in the style atribute.

[03] I think is working fine in Opera now:
http://ifhim.ceafax.org/main.php

What worries me now is how compatible this z-index property is with old browsers... but, that's all I can do for now. I'll try now to try the other method to add the flash movies. BTW, thanks a lot for responding LadynRed!

Z-index is supported in ALL browsers, that's not an issue at all.

Z-index does only work for elements that are positioned with relative or absolute.

I was going to tell you that you needed the z-index, but you figured it out on your own Good job !

Is it necessary to use it at all? Because most times when I see people using that, I feel it needs to be renamed 'position:absolutely-pointless;'

Originally Posted by Angelosanto

Is it necessary to use it at all? Because most times when I see people using that, I feel it needs to be renamed 'position:absolutely-pointless;'

That's the only way I found out how to do this:

Flash movie over the slideshow images, both in the same position (x,y)
Top layer flash.
Bottom layer slideshow images.

I don't know if by other method this is possible... but without using Flash to load the images. If I added the images to the SWF movie, I wouldn't have this problem on any browser.

I tried using position:relative in both the flash movie and the slideshow, but then, like I said, this was the result:

Slideshow first, Flash movie second, in the same cell

And I think position:absolute could be useful, for example for some nice flash transparent stuff that you could add to a simple html website, without messing around to much with the original layout, but I guess is a matter of how each person designs a website.

For one thing, using Flash as the ONLY way to navigate a site is a very bad idea. Using Flash to build an entire site is even worse, especially if you want the search engines to index your site.

If you're going to use flash for navigation, then ALWAYS make sure you have a text version too. SE spiders can't follow links inside flash, so your inside pages will not be 'found' and will not get indexed. Flash-only navigation is also very inaccessible to people who might be using text-only browsers and assistive technology - like a screen reader.

Considering that you have to stack your elements, position absolute and/or relative with z-indexing is about your only choice here.

Originally Posted by LadynRed

For one thing, using Flash as the ONLY way to navigate a site is a very bad idea. Using Flash to build an entire site is even worse, especially if you want the search engines to index your site.

Thanks for the suggestion, I'll try to add a sitemap or a html navigation at the bottom.
Is true, an only Flash website looks nice, but is not functional if you want people to find you.