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!

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.

More Fuel To Burn IE6

August 31, 2007

I know we all hate IE6 right now, but I thought this was a good article. Let me know what you guys think.

http://bludice.com/6-reasons-why-ie6-must-die/

Project Management Software

August 27, 2007

So we’re still on the market for a good project management software… I stumbled across this lil treat while reading the comments on Smashing Magazine’s article regarding Project Management.

 I give you activeCollab, a basecamp type site, that is completely free and open source. However, we would have to have a PHP hosting environment to put it on. Food for thought tho.

Book Summary:

Much has been written about mobile devices. Much has been written about developing websites for the so-called “standards era” of the web. However, little has been written about the two colliding. This book aims to fill that void.

I think this would be a very interesting read for our department. Knowing that Chris, Andy, and Scott are all very interested in getting into and being able to market mobile websites to our client, I think this need will be in our very near future.

The book isn’t available yet, slated to come out August 28th, but I’ll definately pick up a copy and let you know if it’s everything I thought it would be.🙂

Discussion Points Part 1

August 24, 2007

Here are some links to read to start some discussions.

Web Typography

More Typography

Tripoli

CSS Frameworks

Printing Web Pages

SEO

Follow

Get every new post delivered to your Inbox.