[SOLVED] .swf in header widget area not displaying in correct order
 

I used the Add New Widget area to add a .swf to show on top of my header. It looks great except when it sits on top of the background overlay for my NexGEN Gallery images. I have tried to fix this with z-index but I either have the wrong CSS or it is not a z-index problem.

The problem can be seen for example when you click on the pictures in this page: http://www.daisytwist.com/bounce-houses/

Once the picture is open, you will need to scroll to the top of the page to see the .swf in the header on top of the background overlay.

Any ideas?:o
bplazar

I would be curious to know if there is a solution to the swf problem as well. You could of course just create several header images with a different text in each one and then set the rotation to 1 or 2.

Hi Larry,

The .swf itself is actually working just fine. If you need me to point you in the right direction on how I got it there in the header I'd be glad to tell you what I did. My problem is the stack order of the .swf is incorrect with the NEXTGen Gallery background overlay.

Anybody have any ideas? Please help!!
Beth

Beth... My poor communication... The problem I was referring to IS the stacking problem. I've run into that in the past and blown by it as I haven't found a solution. I fiddled around with the CSS on your site via Firebug with no luck. That's why I mentioned the different header images with different text. That indeed takes care of the z-index issue but isn't as pretty. I'm hoping someone can come up with a solution.

I'm not seeing any flash - did you remove it?

I still see it jd. Its fading text in the header. If you just go to the home page and then click on one of the images you will get an overlay for the image but the area where the flash is shows above the overlay.

I'm not seeing it in Safari or firefx on the mac

Interesting, I took my z-index out of the .swf container definition in my css because I didn't think it was doing anything and apparently it was doing something for safari - at least on the Mac.

I put the z-index back now and it seems to work correctly on the Mac with Safari - but the stack order is still incorrect on the PC with the other browsers (Firefox, IE, Chrome, Opera).

B

Juggledad or Larry - any new ideas since I've fixed the Safari z-index issue?

What is the code you are using for the embed?

This the code I put in the text widget:

<div id="header-container" width="550" height="101">
<param name="movie" value="http://www.daisytwist.com/wp-content/themes/atahualpa/images/header.swf">
<embed src="http://www.daisytwist.com/wp-content/themes/atahualpa/images/header.swf" width="550" height="101">
</embed>
</object></div>

It looks like you're missing an opening <object> tag. If that doesn't take care of the issue here are some things I found while searching out this issue. You first would wrap your embed in a div which you did. The following is the "possible" code. I am not a code guru so you may have to fiddle but maybe it will work out of the box.
Then you add this CSS Some places I found to read about this are here, here, and here.

Woot Woot!!! THANK YOU LARRY!!!! I added all of the the code changes you suggested. z-index:0 didn't work - I lost the .swf - but z-index:1 did the trick!!!

YAY Larry!!! THANK YOU!!!!

Beth

I love it when things work. Yay