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!

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 a Facebook Developers Garage? It’s an opportunity for developers, marketers and any one else to learn more about Facebook, Facebook applications, marketing through Facebook applications, building applications and everything in between. Highlights of the event include a presentation by Dave Morin of Facebook on Platform and a detailed look at the evolution of the Red Bull Roshambull application by Nate Warner of Red Bull. Seating is limited to the first 150 that RSVP to this event, so if you have interest be sure to get in early! Click here to RSVP

Date: Wed, Nov 14th, 2007

Time: 6-9 PM

Location:
Tempe Center for the Arts,
700 W. Rio Salado Parkway,
Tempe, AZ

Agenda:
6:00 pm - Networking & Refreshments
6:30 pm - Keynote Speaker: Dave Morin, Facebook
7:15 pm - Marketing Facebook Applications – Chris Johnson, Terralever
7:30 pm - Application Presentation: ‘Roshambull’ presented by Nate Warner, Red Bull
7:40 pm - Facebook Application Development, presented by Scott McAndrew & Joel Neubeck, Terralever
7:50 pm - 5-minute Apps and Ideas mini-presentations (If interested, contact one of the Event Admins)
8:30 pm - Live Social Networking
9:00 pm - Let the afterparty begin (location TBD)

Terralever has recently finished a flash application addition for Couture Book that allows the user to personally design they’re own one off luxurious photo book. The books feature hand-bound stitching as well as a slue of personalized options such as torn page edges and photo framing. These books are a great way to showcase personal photography, special moments in your life, or as family keepsakes.

The flash appilcation we’ve created allows the user to pick cover options, upload photos, select personalized options, review their book and then purchase. The usability of the application makes this so easy anyone could create they’re own personalized photo book. Also, the page display for the review of your book includes turning and shadows to make you feel as if you’re really flipping through your creation, so you know what you’re getting before you buy.

Couture Book and some of the application highlights was recently showcased on Fox 10, check out the video clip. After you see it, go pull those photos out from under the bed or out of the closet and make your very own Couture Book.

I’ve been researching printable style sheets, and came up with an issue on Terralever.com. How to make the theme stylesheets have a media type!

So I did some side research and came up with the most common answer out there: set an @media type in the css file itself. Read an article regarding @media type.

There was also an interesting article by the same author regarding how to define a particular load order.

This works GREAT for print stylesheets, but what about when we want to do IE6 specific styles? What then! If you’ll notice, when you set a theme, the stylesheet it populates at the end of the header tag, which would overwrite any specific stylesheets we would reference above it.

If we declare themes in the @ page declaration using StyleSheetTheme instead of just Theme the document is then populated with the css stylesheets at the beginning of the head declaration instead of at then end. More information regarding this and other theme and skin information. This would allow us to create javascript that would check for browser type/version and specify additional stylesheets for these versions if required.