I’m having the same problems as you guys, but my workaround doesn’t seem to work yet…
I want to replace the .swf for a .gif or .jpg if someone uses FF2 or FF3 on a Mac.
In FF2 the swf dissapears entirely, and in FF3 the div starts to flickr when hovering over the menu-items.
I’m not really a Javascript expert so I don’t know exactly how to achive this.
This is my javascript so far thanks to this post:

function detectMacXFF2() {
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent.indexOf(’mac’) != -1 && userAgent.indexOf(’firefox’)!=-1) {
middle.write(”swf/welcome.gif”);
} else
var so = new SWFObject(”swf/welcome.swf”, “Flash”, “960″, “580″, “6″, “transparant”);
so.addParam(”scale”, “noscale”);
so.addParam(”allowScriptAccess”, “SameDomain”);
so.addParam(”quality”, “high”);
so.addParam(”wmode”,”transparent”);
so.write(”middle”);

With this javascript the .swf dissapears in every browser.
Maybe someone can take a look?

Thanks!

I’ve tried to use z-index settings and transparency settings for flash params, but nothing seems to have effect.

Can anyone help me? Does code that is given on this blog help me and where should I put it?

Thanks, and please help a noob here..

http://www.americanamedia.com/test/holder/photos/photos_new.htm

Thanks a lot.

But the bug was reported to me, by a few people using my code.

In my case, I can not use any sort of scripting, to test for platform.
I am limited to css. (myspace)

Because I had a similar issue in the PC version of Safari, which I was testing for, I resorted to -moz-opacity (using an alpha filter for IE) so that the functionality was completely disabled in all but Mozilla (including FireFox) and IE.
No effect, was preferable to the bug.

Is there a solution, using css only, that will make the opacity work on the PC version of FireFox and NOT do anything on the MAC version of FireFox?

I am playing with some pseudo classes, to see if any are recognized on one platform and not the other.
(This is how I often do browser specific css coding), but I am not finding anything that works here.


function detectMacXFF2() {
var userAgent = navigator.userAgent.toLowerCase();
if (/firefox[\/\s](\d+\.\d+)/.test(userAgent)) {
var ffversion = new Number(RegExp.$1);
if (ffversion < 3 && userAgent.indexOf(’mac’) != -1) {
return true;
}
else
return false;
}
else
return false;
}


Heres a fix:


function detectMacXFF2() {
var userAgent = navigator.userAgent.toLowerCase();
if (/firefox[\/\s](\d+\.\d+)/.test(userAgent)) {
var ffversion = new Number(RegExp.$1);
if (ffversion < 3 && userAgent.indexOf(’mac’) != -1) {
return true;
}
else
return false;
}
else
return false;
}


Notice the addition of return false following the conditional.

Thanks for this great function, saved me a lot of time figuring it out on scratch. Had the same weird bug with opacity on top of flash.

To accomplish this, and since there are several places in the app I’m working on where different opacities are set, I split the rules out into different stylesheets: 1 main file, 1 non-ff2-mac file, and 1 ff2-mac file:

if (detectMacXFF2()) {
// attach the Firefox 2 Mac stylesheet
var CSSFile = ‘ff2_mac.css’;
} else {
// attach the one for everyone else
var CSSFile = ‘non_ff2_mac.css’;
}

var cssNode = document.createElement(’link’);
cssNode.type = ‘text/css’;
cssNode.rel = ’stylesheet’;
cssNode.href = base_url + ‘/stylesheets/’ + CSSFile;
document.getElementsByTagName(”head”)[0].appendChild(cssNode);

This, along with the detectMacXFF2() function definition are wrapped in a small js file. Looking forward to the day when FF2 is obsolete (probably about the time we can all bury our hacks for IE 6), it’ll be a lot easier to clean the code back up.

Thanks much for the tip; saved much time!!!!