IE7, The Script

I was having dinner with friends last week, and one of them, another HTML monkey, told me about a fantastic JavaScript you could conditionally attach to IE6 to make it behave like IE7 (and well, now IE8). After the previous week’s headaches with the absolutely positioned elements next to floating ones, I said if this script works as advertised, why the hell hasn’t anyone told me about it before now?

So I’ve been giving it a shot with my new BlueTrip framework installed, and, well, it’s not manna from heaven. In fact, all the main problems I have with IE6 aren’t fixed with the IE8.js or IE7.js. One of the subsidiary scripts (to recalculate the box model) made IE6 and IE7 crash. On top of not fixing the major problems in IE6, it also breaks what I’ve already fixed, and I don’t want to hack fix a hacked fix.

In all, I put the conditional for IE7 to use the IE8.js script — even though the effect is fairly minor and causes a redraw burp — but I left IE6 the way it is. Honestly, at this point, knowing the hacks already, and having to use a conditional stylesheet anyway (for Peekaboo bug, 3-pixel job, etc. that don’t get handled by the script), it’s just easier to do it manually. Makes sense now why I’ve never heard anyone else hawk this “solution.”

On second thought, considering the redraw burp, I may as well take it off for IE7, too.

I knew it sounded too good to be true.

---

What the script does fix:

• Fixed positioning
• Maximum and minimum width and height
• Many selectors previously unsupported are now supported 
• IE6 will support alpha transparency for png images both as background and foreground images – but see next

And my brief testing concluded that the max-/min-height support didn’t really work either. I’m not sure about the rest since I try not to use those.

Grids and CSS Frameworks

Last year, I finally decided it was time to start designing on a grid. Imagine that! Using a design grid for websites. In the old days of two- or three-column layouts, you didn’t really have to worry about that.

But today, it’s all about Web 2.0 (whatever that means to you), and static grids are so ’00s-y. To take advantage of everyone’s bigger LCD monitors, you have to explore different column layouts, often within the same page.

So, with the latest project, I’ve designed the site on a 16-column grid (using Nathan Smith’s 960 template).

The big trick, though, is to make the markup and CSS not a complete pain in the ass.

My strengths don’t exactly include planning or coding; I’m too fly-by-the-seat-of-the-pants to carefully think all the way through something really complex. So I’d started laying out the templates for the site with my gonzo more-or-less best practice styling (there are many opinions on what constitutes “best practice,” and I find compromise is usually required to get the job done — never mind that it already takes 10-20% more time to debug for IE6).

A couple weeks ago, I discovered the Blueprint CSS Framework, and from there, the BlueTrip Framework. Thank Zeus for clever style monkeys.

I’ve adapted their 24-column grid for my 16-column grid, and added a few other customised layout options. I’m still scratching my head over padded columns inside boxed divs, as well as equal-height column borders, but those are stories for another day.

Today, I just wanted to thank the Blueprint and BlueTrip folks. Cheers!