sIFR 3: fixfocus: true?

Question

hi,

i'm after a way to remove the outline focus that firefox applies to my page: http://www.bevelite.com.au/test

i've read that applying the following will fix this but can't seem to apply it to my code:

sIFR.replace(movie, {fixFocus: true});

my code:

sIFR.replace(univers47cl, {
selector: 'h1.test',
wmode: 'transparent',
css: [
 '.sIFR-root { font-size: 20px; font-weight: 100; color: #000000; text-transform: uppercase; line-height: 20px; margin: 0 0 15px 0; padding: 0; }',
 'a { text-decoration: none; }',
 'a:link { color: #000000; text-decoration: none; }',
 'a:hover { color: #000000; text-decoration: underline; }',
]
});

sIFR.replace(univers47cl, {
selector: 'h1',
wmode: 'transparent',
css: [
 '.sIFR-root { font-size: 20px; font-weight: 100; color: #00b9f2; text-transform: uppercase; line-height: 20px; margin: 0 0 15px 0; padding: 0; }',
 'a { text-decoration: none; }',
 'a:link { color: #00b9f2; text-decoration: none; }',
 'a:hover { color: #00b9f2; text-decoration: underline; }',
]
});

can anyone see where i could apply this to me code?

(sIRF documentation here > http://wiki.novemberborn.net/sifr3/)

Answer 1

If you are referring to the dotted outline on active links it can be removed like this:

a {
   outline:0;
}

Answer 2

Mathew Taylor's answer above is probably more accurate but your question is where to put that snippet in. Also, note in your snippet you had an extra trailing comma in your array 'css: []', you should watch out for those because they will get you in IE

sIFR.replace(univers47cl, {
    selector: 'h1.test',
    wmode: 'transparent',
    fixFocus: true,
    css: [
            '.sIFR-root { font-size: 20px; font-weight: 100; color: #000000; text-transform: uppercase; line-height: 20px; margin: 0 0 15px 0; padding: 0; }',
            'a { text-decoration: none; }',
            'a:link { color: #000000; text-decoration: none; }',
            'a:hover { color: #000000; text-decoration: underline; }'
    ]
    });

sIFR.replace(univers47cl, {
    selector: 'h1',
    wmode: 'transparent',
    fixFocus: true,
    css: [
            '.sIFR-root { font-size: 20px; font-weight: 100; color: #00b9f2; text-transform: uppercase; line-height: 20px; margin: 0 0 15px 0; padding: 0; }',
            'a { text-decoration: none; }',
            'a:link { color: #00b9f2; text-decoration: none; }',
            'a:hover { color: #00b9f2; text-decoration: underline; }'
    ]
    });

Answer 3

The fixFocus option has to do with actual focus on the Flash movie. I believe you should add object { outline: 0; } to get rid of the focus border Firefox has started to display for some reason.

Answer 4

The only thing that worked for me, in Firefox 3.5:

.sIFR-flash:focus{outline: none;}

Other browsers (I tested latest Opera, Chromium, IE) don't seem to have that issue. It's not related to link elements but to the Flash object.