ie6 css fixer/automating the tedious

published on:
April 06, 2009
comments

This week the ie6 debugging series is coming to its conclusion, and if you've been reading between the lines you might already have an idea of what to expect. Last week's article contained a string of typical ie6 bugs and fixes. The common ground between them is that all these fixes are virtually harmless, and predictable. And thus, they can be automated. Presenting today, the IE6 CSS Fixer: starter kit!

If you don't really care about the dos and don'ts of this tool, you can find the IE6 CSS Fixer in the new tools section. But I advise you to read through this article first to get a good idea of what this tool is supposed to do.

how it came to exist

Some time ago a colleague of mine was doing some ie6 debugging work. He explained to me he'd started off by running through the main css file, filtering all the pos:rel statements and applying a zoom:1 to each one he encountered. So I told him there were several other ie6 fixes like that. The word "script" hit the table and exactly one day later the first prototype of the IE6 CSS Fixer was finished. To our surprise, it worked remarkably well, and we were holding a tool that had partly automated one of the biggest issues of css development for the last couple of years.

scope

First of all, it is very important to realize the scope of the tool we've made. It's never been and never will be our goal to make a tool that fixes all ie6 css bugs with just one single click. Also, it's not a tool that outputs clean, lean css code and provides you with the minimum amount of fixes needed for your site to work in ie6. The IE6 CSS Fixer is a bulk tool, applying known fixes to each potentially harmful element it encounters, forcing ie6 to behave like other browsers do.

If you like a clean ie6 css fix file, this tool is probably not meant for you. If you like to run through templates to manually fix the bugs in ie6, you'll probably be irritated by the excessive code this tool generates. If you care about the file size of your ie6 css file, you'd better think twice before using this tool.

But, if you think ie6 is becoming less and less of a priority but still needs support, the IE6 CSS Fixer is a valuable asset in your ie6 debugging work. It gives you a base css that fixes a good deal of problems and tries to introduce as little new problems as possible (and if it does, it warns you). It's the ideal tool for beginning and professional cssers alike to get a good head-start when fixing up ie6 while trying to save time and money.

how tot use

The use of the tool is quite simple. The IE6 CSS Fixer works on a main css which ideally contains no browser-specific fixes. Before you submit the file you select the fixes you want applied, after that it starts to analyze every css rule it finds and applies a fix if needed. The output is a new css file that contains all the fixes, grouped by type and potential harm. You can choose to generate the fixes for inclusion is a separate ie6 fix file or prepend them with the * html hack for inclusion into your main css file.

the future

The IE6 CSS Fixer is still in alpha phase. It's nothing more than a vamped up prototype right now, but even so it already does what it is supposed to do. Future updates will include the possibility to upload your main css and download the result css as separate files.

Additional intelligence will be built in to avoid the chance harmful side effects (zoom:1 on inline elements) and I am sure bugs will pop up once it's in full use. Also, we hope to add new bug fixes if they meet the criteria for our tool.

Of course, all outside help is appreciated. If you have any suggestions, ideas or remarks, be sure to let us know and we'll do our best to improve the IE6 CSS Fixer for you.

conclusion

So that's about it. You should know by now what to expect of the IE6 CSS Fixer: starter kit. It's a handy tool that solves a great deal of ie6 issues with one single click, but a miracle solution to all your ie6 problems it ain't. As long as you can live with that (and with the less than optimal output), feel free to rejoice and to let the ie6 debugging burden slip a little.

Presenting once more, the IE6 CSS Fixer: starter kit!

Comments

Danny

comment number
date
April 07, 2009 11:32

Brilliant! Thanks to all the guys who helped to build this tool. We'll surely be using it over here.

Niels Matthijs

comment number
date
April 07, 2009 16:54

Good to hear! We've been testing it on some projects ourselves and it proved to be quite the time saver (on the other hand, we haven't been able to curse so much ... with reason that is).

Anyway, good to see you're still keeping the web ideology strong!

Oliver Northam

comment number
date
June 18, 2009 11:58

I had a 'head on desk' moment once I had realised that my site looked fine in IE7, Firefox and Chrome- but looked utterly pants in IE6. Found this tool, ran it, everything is fixed! Fantastic!

You guys are geniuses! Cheers.

CAAS

comment number
date
June 03, 2010 09:30

The ie6 debugging series has helped me a lot and I haven’t missed a single post in this series. I am very glad as the series is going to conclude and so that means by reading this last too post I became a complete genius who knows everything about the error fixing and debugging in ie6. I am a web designer and so all these articles in this series helped me a lot and I became a start in front of my colleagues as I fixed many errors that they have made. I will be very thankful to you for that. I liked this conclusive post too.

psychologue belgique

comment number
date
August 22, 2010 22:04

microsoft should stop it right now, we are all fed up with it!!!

bwin

comment number
date
September 03, 2010 07:26

Interesting post, thanks for all information I have very useful.

betclic.fr

comment number
date
November 30, 2010 13:36

Excellent article, thanks for sharing.

PE Teacher Course

comment number
date
July 13, 2011 11:10

It's been a while since the new version 0.7 was released of the IE6 CSS Fixer, And too good to hear that haven't abandoned further development of their tools.

penis extenders

comment number
date
March 23, 2012 11:19

The output is a new css file that contains all the fixes, grouped by type and potential harm. You can choose to generate the fixes for inclusion is a separate ie6 fix file or prepend them with the * html hack for inclusion into your main css file...

<a href="http://www.cheappenisextenders.com/">penis extenders</a>

العا

comment number
date
June 13, 2012 15:22

microsoft should stop it right now, we are all fed up with it!!!

* required fields

Leave your data
Leave a comment