dugums
asked on
Why is png transparency altered by embedded flash movie?
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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.
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?
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?
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?
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.
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.
ASKER
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!
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!
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).
ASKER
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!
The original answer of setting wmode to transparent in the embedded flash is the solution I was looking for.
Thank you very much!
ASKER
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.
ASKER