Making IE play nice…still

I came across an issue with IE9 yesterday, while using Twitter Bootstrap. I almost couldn’t believe it, having copied the template from the Bootstrap website, I thought it would be issue free. To add to my exasperation, the bug was in IE9 – the modern browser

At first I simply couldn’t understand what was wrong. Everything seemed to be correct, and then I looked at the IE developer tools. IE was rendering the page in quirks mode! Having used the HTML5 doc type, having not played with the styles in bootstrap, even having removed a few HTML comments I’d added, it was still happening!

Luckily, a guy that I was working with had seen the issue before, and before long he’d found a tag which sorted everything out. Rather than working fine with valid and correct HTML, IE9 needs this <meta> tag:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

Once this had been put into the <head> of the document, everything rendered with the IE9 engine and all was well again. But it is still quite ridiculous to see some hack-like technique being required in any modern browser.

What’s worse is that we won’t be rid of IE9 any time soon. With the release preview of IE10 for Windows 7 only having been made available last month, it’s unlikely there will be a huge rush to upgrade. Especially as IE10 sports Windows 8 like gesture controls for a lot of operations, which will surely alienate most users of the previous browsers.

It seems that this is yet another IE-only hack that we’ll just have to endure for a little while more!

EDIT (09/01/2013): Looks like I may’ve over-looked part of the bootstrap documentation, it seems that this meta tag is indeed mentioned in the “Responsive design” section! Oops!

Useful Links

 Microsoft explaining their different rendering modes

 A stackoverflow question which was answered with this <meta> tag

Javascript: Selecting a range of checkboxes

A quick post about a small snippet of code that I’ve quickly written up, just to see how easily it could be done. It’s a feature that I feel should be on every web app (there are exceptions though). It’s the ability, when dealing with a list of checkboxes (in an email client for example), to be able to select one checkbox and then, while holding shift, select another and for this to then select all those checkboxes in between. To effectively select a range of checkboxes all at once.

This reduces the number of clicks required, in some cases, drastically and is one of those nice little touches which really makes you feel as though the user interaction with a web app has been considered. To make things even better, it’s a very simple feature to implement! I’ve attempted to do it sparingly, but I’m sure it can be condensed even more. And my comments can of course be removed to save space.

Hopefully this will help someone  to add a nice little extra to their web app, just as a final bit of polish. I’ve put it on to Codepen, which means if I’ve made a massive error, someone can fork me and correct it!

You can find my code at http://codepen.io/andrewbridge/pen/qtgcE and it includes a demo of the code working, do try it out! It may be something that’s helpful to you!