20Aug 2008
A handy little project ...
Just to, ironically, show how far behind I am of current web design trends and projects, I'd like to post about something cool I found today.
I've been working on a project for my new boss to implement a ribbon-styled (think Office 2007) navigation system for our intranet homepage. The problem was that a 2-columned layout ate up far too much real estate on our pages. The left column being used for second-level "drill-down" navigation and the right for displaying content. A ribbon-styled navigation system allows you to free up all that space so you have plenty of room for displaying all sorts of data.
Well, this particular ribbon is supposed to work identically to Office's implementation. This includes the fade-in hover effects on the highlighting bars. No problem with modern browsers. Just use some simple CSS and some quick jQuery action and you're good to go. Unfortunately, 95% of our users are all stuck on IE6. That means no native support for alpha-transparencies in PNGs, no hover effects on anything but anchor tags and no full support of CSS selectors.
The way the ribbon system was initially styled works perfectly in IE7, FF2 and 3, but fails miserably in IE6. After putting hours into finding a solution, I was about to call it quits and just create a separate stylesheet for IE6. Did a bit more searching before giving up and came across a mention on Veerle's Blog of an awesome JavaScript library that causes IE5 and 6 to mimic common behaviors of IE7.
Written by Dean Edwards, this simple library fixed about 99% of the issues I was having with cross browser compatibility. He currently hosts the project on Google Code and is quite easy to implement.
Just place the following in your HTML:
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
The only inconvenience for me was to rename all my transparent PNG images to include the suffix of '-trans' before the extension. So, for instance, awesome-wow.png has to be renamed to awesome-wow-trans.png for the alpha-transparency hack to work.
Aside from a slight image flicker when the page first loads, this thing works perfectly.
Yes, I am fully aware this thing has been out for close to a year now, but I've never had issues with IE6 that were serious enough to necessitate the need to search for such a robust solution.
Kudos, Dean!