sifr3 – cross browser functionality

[doobie]

Hi everyone,

This is the first time I’ve tried to use sIFR. Seems like a great tool, at least until @font-face is a standard.

My problem: sIFR replacement works in IE, but hides the rest of the site. Replacement doesn’t work at all in FF.

Example (still in dev): http://shipkifarm.com/dev If you open in IE7 and FF, you’ll see what I mean.

the sifr-config.js:

Code:

var frscript = {
src: ‘flash/frscript.swf’
};
sIFR.replace(frscript, {
selector: ‘h1’,
css: [
‘.sIFR-root { font-size: 72px; font-weight: normal; color: #9f0000; }’,
’em { font-style:italic; }’,
‘strong { font-weight:bold; color:#333333; }’ ],
wmode: ‘transparent’
});
sIFR.activate(frscript);

the css:

Code:

h1 {
font-weight: normal;
font-size: 64px;
font-family: frscript, papyrus, helvetica;
color: #222;
line-height: 100px;
text-align: center;
letter-spacing: .1em;
word-spacing: .4em;
height: 100px;
margin: 25px 0;
}

and the html:

Code:

Shipki Farm Organics

Any thoughts as to what went wrong???

Many thanks!

-Doobie

[apostrophe]

Remove visibility:hidden from line 42 in the css file:

Code:

.sIFR-active {
font-family:Georgia;
line-height:100px;
visibility:hidden;
}

should be:

Code:

.sIFR-active {
font-family:Georgia;
line-height:100px;
}

[doobie]

That worked beautifully.

Any idea how I can set letter-spacing on the sIFR text? I’ve tried applying the letter-spacing property to a few different id’s and class’s, but no luck.

Thanks for your help!

-Doobie

[doobie]

I’m also not sure how I screwed it all up this time. The sIFR works on the homepage, but none of the other pages ;-(.

-Doobie

[apostrophe]

Been a while since I did anything with sIFR but accordind to the documentation http://wiki.novemberborn.net/sifr3/Styling letter spacing is controlled from the sifr-config.js file.

[doobie]

That’s funny. I tried to add ever unit imaginable… I’m pretty sure I even read through that doc at one point. Thanks for pointing out what should have been obvious.

-Doobie

[doobie]

"doobie" wrote:

I’m also not sure how I screwed it all up this time. The sIFR works on the homepage, but none of the other pages ;-(.

-Doobie

I still can’t figure this one out. Anybody? http://shipkifarm.com/dev

Thanks,
Doobie

[apostrophe]

I can’t quite work out your directory structure but I’m pretty sure it’s an paths issue.

EDIT.
It is definitely the path to the swf in sifr-config.js that’s causing your problem. ‘flash/frscript.swf’ works fine on the home page because it just dives down into the flash folder and grabs the swf, but all the other pages appear to be in their own directories for whatever reason and therefore can’t find the swf.
So I guess there are two things you could try. Either make the path absolute ‘http://shipkifarm.com/dev/flash/frscript.swf’ or create a second sifr-config.js save it as sifr-config1.js alter the path in that to ‘../flash/frscript.swf’ and link to that one in the other three pages.

[doobie]

"apostrophe" wrote:

I can’t quite work out your directory structure but I’m pretty sure it’s an paths issue.

EDIT.
It is definitely the path to the swf in sifr-config.js that’s causing your problem. ‘flash/frscript.swf’ works fine on the home page because it just dives down into the flash folder and grabs the swf, but all the other pages appear to be in their own directories for whatever reason and therefore can’t find the swf.
So I guess there are two things you could try. Either make the path absolute ‘http://shipkifarm.com/dev/flash/frscript.swf’ or create a second sifr-config.js save it as sifr-config1.js alter the path in that to ‘../flash/frscript.swf’ and link to that one in the other three pages.

That makes a whole lot of sense. Thank you very, very much for your help with this. I feel like I should have figured that one out too. Oh well. Glad you are here to help me through ;-)

[Author]

Posts