Grow your CSS skills. Land your dream job.

sifr3 – cross browser functionality

  • # May 28, 2009 at 2:02 pm

    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:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




    Shipki Farm Organics

    Any thoughts as to what went wrong???

    Many thanks!

    -Doobie

    # May 28, 2009 at 2:37 pm

    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;
    }
    # May 28, 2009 at 3:15 pm

    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

    # May 28, 2009 at 3:32 pm

    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

    # May 28, 2009 at 3:34 pm

    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.

    # May 28, 2009 at 3:37 pm

    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

    # May 28, 2009 at 5:10 pm
    "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

    # May 29, 2009 at 5:34 am

    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.

    # May 29, 2009 at 10:05 am
    "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 ;-)

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".