sIFR 3.0 Inline
Recently we’ve completed four sites for Civigroup Companies. Within those sites you’ll notice several instances of sIFR (flash replacement text) inline with content. This is no easy task for sIFR text.
While trying to accomplish this feat of magic, I spent quite a bit of time researching different aspects of sIFR and how it works with CSS to understand how to make this work properly and of course, all while being cross browser compliant! So, in order to perhaps save someone else the time and hassle of trying to figure out the magic equation, I figured I’d share my experience.
Step 1: set the sIFR class on a span tag where you want the text to be.
<span class="h1inline" style="width: 325px;">Heritage. Commitment. Vision.</span>
Notice the width style attribute, this is required to make sure safari does not include extra space behind the span and before the rest of the copy.
Step 2: set the attributes in the sIFR-screen.css sheet to make it an inline block element along with the rest of your styles.
height: 25px;
display: inline-block;
overflow: hidden;
Notice the display: inline-block; this is also a safari required attribute.
Step 3: Tune height if necessary in the sifr-config.js
tuneHeight: '-5'
This will help if you plan no not only having your sIFR text inline, but also a link. I was having difficulties with the underline of the hover state being cut off by the flash doc.
And viola you have sIFR text inline!
filed under 
Loading ...
November 6th, 2007 at 9:19 am
do you think you’ll be able to apply this to inline list elements as well?
November 7th, 2007 at 9:52 am
Norman,
I saw your post on the Textdrive Forum, check out the following example of sIFR inline in a list. I also included a zip file of the files for easy download and examination.
Let me know if you need any additional assistance.
November 7th, 2007 at 10:08 am
[…] sIFR 3.0 inline post was mentioned by Mark Wubben, in the TextDrive forums for sIFR yesterday, in response to […]
June 5th, 2008 at 9:09 am
Hi,
that looks very nice, although it seems your example could be a pixel lower on Firefox 2 on the mac.
Anyway, I might have a go at this, thanks for sharing.