There are sometimes when I truly wonder if designers and developers have it out for me.

Take for instance, the ASP .Net 2.0 login control. The designer wants it to look one way, however the .Net login control call only gives you so many options for style and layout. What is a front end architect to do?!

Thankfully, I’ve been blessed with the knowledge of the view as template option in Visual Studio 2005. The “view as template” option allows you to expand the normal login control code to a more complete view including the table that incapslates all the labels and text boxes.

To get to this magic option, do the following:

  1. open the page with the login control you want to expand
  2. view the page in design view
  3. select the little black arrow to the right side of the control on the page
  4. select ‘view as template’ in the drop down
  5. switch back to the code view and skin to your hearts desire

sIFR 3.0 Inline

October 26, 2007

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!