Browsing articles tagged with "IE-6-compliance Archives | april.holle.blog"
Nov
25

Blue Beanie Day: Celebrate Web Standards

Celebrate web standards by donning a blue beanie Monday, November 25 and while you’re at it, take a picture and post it to the flickr group. This event was brainstormed by Facebook group formed around Designing With Web Standards. The book was written by Jeffrey Zeldman who is well known for his and talks around the world regarding standards compliance. See his two cents on the event.

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!

Oct
10

Print Style Sheets and ASP.Net Themes

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.

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…