Fixing IE

Tweet

Anyone who has experimented with CSS driven, standards compliant design techniques will know that the greatest challenges are posed by the most widely used browser: Internet Explorer for Windows. With it’s dodgy box model, missing support for CSS2 selectors and absent core properties such as min-width and max-width many intelligent CSS techniques just aren’t worth using.

This is a well documented problem. Attempts in the past have been made to remedy some of IE’s weaknesses, usually revolving around using Javascript to replicate some of the missing features. Dave Shea collated some of these in his recent piece on side-stepping IE; key examples include max-width support using expression: and whatever:hover for adding :hover support to non-link elements.

These are valuable tools, but wouldn’t it be nice if there was a single solution that brought IE up to the standard of other modern browsers? Thanks to Dean Edwards, there is: IE 7, a cheekily titled package of IE bug fixes that covers missing CSS2 selectors, min/max width and height properties and even adds support for the HTML element. It’s implemented as a single 28KB CSS file which can be linked in at the top of any page.

It’s hard to say if the implementation method is a gnarly hack, a stroke of genius or a combination of the two. Dean’s notes on how it all works are certainly worth checking over. Of course, with even the compressed package weighing in at 27 KB the size to functionality trade-off certainly needs careful consideration, although a properly configured web server should result in the magic stylesheet being loaded once and cached for future page visits.

At any rate, something like this is long overdue.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • kat

    there’s a download link on the right hand top corner of that page jb007!

    i find that this fix although it cuts down on personal work (ie making seperate css sheets specifically for MSIE) is not a very reliable solution as it requires the person browsing your site to have javascripting enabled. a lot of people that have a computer don’t know much about them, and get scared by scripting security warnings and thertefore, by defalt do not have it enabled on there browser… i mean if they did know much about computers and the web, would they still use MSIE as there default browser anyway??

    I like dean edwards idea; i have the scripts on my server; but there are other hacks around this problem which still do validate under w3c validation, and don’t require the use of javascripting enabled in your website’s user’s browser.

    Great work dean, just got to educate the world now (or perhaps get Microsft pull there fingers out their behinds–if thats possible!)…

  • http://www.numbera.com/ dalangalma

    It should be easy enough to just pick and choose the fixes that you need, reducing the 28K hit on your server.

  • Chris Vincent

    Dalangalma called it. This is really going to revolutionize our CSS use, I would think.

  • Chris Vincent

    Indeed, you can choose which fixes to keep. Also, under updates, it turns out he’s managed to cut the file size down to 10k using his JavaScript packer.

  • Adam Rice

    Even without the packer, removing leading spaces, comments, and blank lines (the work of a few GREPs) cuts it to about 14 KB and keeps the code legible.

  • Ben Meadowcroft

    Perhaps the user could just set it as their custom style sheet (available in IEs accessibility options). It would work for any site then!

  • http://www.chadbishop.com frostproof

    wtf- The site is down due to excess traffic, and looking for a mirror. :(
    I am so MAD.
    :D J/K

    This does look very cool, an dI cam very interested in getting my hands on this. Can someone PM me, and maybe send via E-mail. IE meeting CSS standards. What a concept!

  • Scott Johnson of Feedste

    Hi Simon,

    Can I suggest that you might want to blog a link from your personal blog to each of your columns when you post one? I always miss your columns since I think “Simon the Guy” not “Simon the Columnist” (yes I should just subscribe to your column (looking for the feed now) but I can’t be the only one.

    Awesome stuff by the way.

    Thanks
    Scott

  • http://www.fantasygaa.ie jb007irl

    The Download link on http://dean.edwards.name/IE7/intro/ does not work. Is there another place where I can download this?

  • JML

    The source is posted on Dean’s site. Just click on the src breadcrumb. If you look at his my page you will see that he has stroked out “available for download” . You will also find his compressor both as an online app and available to download.

  • Pingback: SitePoint Blogs » Blog Archive » cssQuery(): query the DOM with CSS selectors