Why is png transparency altered by embedded flash movie?

dugums
dugums used Ask the Experts™
on
I have a 1px x 1px semi transparent background image used as the background for my navigation bar (and for various other items on my page).  When I embed a flash movie into the page, the png's become MORE transparent.  Anybody know why and how I can fix this?

In the attached image the top navigation bar is the appearance without embedded flash video and the bottom shows the issue that occurs after I have embedded the video.


pngproblem.jpg
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Author

Commented:
I have found this to be a common question on forums, but so far cannot locate an answer.  Please help if you know how I can resolve this.  Thanks!
Senior Developer
Commented:
do you have an example link?
most times that i see issues between HTML elements on a page having issues because of embedded flash is due to the "wmode" attribute of the embed code needing to be set to "transparent"

Author

Commented:
Ok, getting closer.  Setting wmode to transparent rectified the problem in firefox, but NOT IE.

The behavior is somewhat different in that the transparency looks fine on most initial page loads (even with flash embedded).  However, if you scroll over the png, the issue returns.

Link without flash (expected look of png in navigation bar and footer):  http://www.ginqo.com/work.html
Link with flash:  http://www.ginqo.net/work.html.

Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Jeremy DaleySenior Developer

Commented:
i can look at it some more, but have you tried just using a background-color and applying opacity to it instead of using a background-image?
Jeremy DaleySenior Developer

Commented:
i'm just seeing some stuff that looks kind of weird to me. obviously IE has issues with this, but pinpointing the cause may not just be from flash... i'm seeing you're embedding the flash with an iframe. do you get the same issue if you put the same embed code that's in that portfolio.html page directly into the index page?

also... using firebug in firefox, in your <div id="contentFrame">, there's some weird top margining that's extending into the contents of your header envelope. i see it has a top margin of -125px. is there a particular reason for that?
Jeremy DaleySenior Developer

Commented:
and lastly... consider using maybe a 10x10, or 20x20 image... a 1x1 is not really a good idea in the first place. yeah it's small in filesize, but it's causing a lot of redraw for the browser. there's a fine line between optimization on the filesize and the rendering, so i usually guess on a happy medium. try even a 50x50, i don't know.
Jeremy DaleySenior Developer

Commented:
yeah... i think changing your image to 30x30 will do the trick. i just tested it with IE8's developer tool, changing the path to a 30x30 png located on my server and it didn't do that funky thing you're seeing.

Author

Commented:
I will try those suggestions and report back.  As far as the margin/page composition issue, I haven't finalized anything yet - so it still has to go through some simplification and fine tuning.  I know negative margins make no logical sense and some people frown on them, but they seem to work OK.

My guess is that your first solution corrected the main problem and now I am just dealing with an IE rendering issue.  Thank you very much for taking the time - I will confirm this is solved shortly!
Jeremy DaleySenior Developer

Commented:
actually, after posting all those possible fixes, i believe your easiest solution would be to simply skip down to my last fix and change your 1x1 shader.png file to a larger size (i.e. 30x30).

Author

Commented:
The larger shader.png does solve the IE rendering problems (setting opacity doesn't work well enough as everything in the container will also be semi-transparent).

The original answer of setting wmode to transparent in the embedded flash is the solution I was looking for.

Thank you very much!

Author

Commented:
The rest of this post may be relevant to those experiencing the same issues - as in my case this solution fixed the issue but also revealed an IE rendering issue.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial