Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   [SOLVED] .swf in header widget area not displaying in correct order (http://forum.bytesforall.com/showthread.php?t=5953)

bplazar Feb 19, 2010 02:30 PM

[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

lmilesw Feb 20, 2010 12:33 PM

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.

bplazar Feb 23, 2010 02:36 PM

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

lmilesw Feb 23, 2010 07:42 PM

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.

juggledad Feb 24, 2010 05:21 AM

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

lmilesw Feb 24, 2010 06:22 AM

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.

juggledad Feb 24, 2010 07:26 AM

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

bplazar Feb 24, 2010 08:30 AM

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

bplazar Feb 25, 2010 12:50 PM

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

lmilesw Feb 25, 2010 02:29 PM

What is the code you are using for the embed?

bplazar Feb 25, 2010 04:18 PM

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>

lmilesw Feb 25, 2010 06:40 PM

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.
HTML Code:

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

Then you add this CSS
HTML Code:

#header-container {position: relative; z-index: 0;}
Some places I found to read about this are here, here, and here.

bplazar Feb 25, 2010 08:35 PM

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

lmilesw Feb 25, 2010 10:54 PM

I love it when things work. Yay


All times are GMT -6. The time now is 09:38 PM.

Powered by vBulletin® Copyright ©2000 - 2022, Jelsoft Enterprises Ltd.