Browsing articles tagged with "sIFR-inline Archives | april.holle.blog"
Nov
7

Mentioned on TextDrive: sIFR as List Navigation

My sIFR 3.0 inline post was mentioned by Mark Wubben,  in the TextDrive forums for sIFR yesterday, in response to Norman’s request for sIFR 3.0 in a list format for navigational use. I had a little time this morning, so I created an example of sIFR 3.0 used in a list as navigation. You can view the example page here, or download a zip of the files. The css code is the exact same as the inline example, I just needed to set the class on the list item and set the inline style width. 🙂 Enjoy!

Oct
26

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!

What is this?

This little blog happens to be the personal ramblings of one April Holle - I'm female, outspoken, webbie, a community evangelist, and Principal of Made Better Studio. Check out the about section for more info.

What People Are Saying…