By now, I’m sure everyone has choked back a tear or two at the final release of Internet Explorer 9. We immediately started getting support requests asking why their websites look broken in this new ‘revolutionary’ browser (hard to say that with a straight face.) Yes, we are again submerged into Microsoft hell, needing to find fixes for yet another browser. We have done a lot of legwork figuring out the best way to handle supporting this IE9 so we wanted to share the information we have learned to make developing (a little) easier.
How do I run IE9?
First of all, you need to know that IE9 will only work in Vista or Windows 7. It was a very bad decision in my opinion, but it’s reality, so we work with it. My setup is a Macbook Pro 3 GHz with 4 Gigs of RAM. I first installed Windows 7 Professional 64 bit on a new VMware Fusion virtual disc, but it took up way too many resources to run smoothly. Not only that, it locked up my Mac side occasionally for about a minute or two which is unacceptable. I then created a new image using Windows 7 Professional 32 bit and it ran MUCH faster. One would almost say… SNAPPY! It does however take a long time to boot up the disc image at times. I recommend turning off Aero, which is the bells and whistles for the desktop. To do this just right click on the desktop and choose Customize. Click on the Windows 7 Simple theme and you will notice an increase in speed. I plan on turning off indexing as well in the near future to further speed it up.
After running your updates you then open Internet Explorer, but it won’t be IE9 yet. The opening page should have a button to click to download and install IE9. Just follow the steps and you will have a working version of IE9.
First impressions!
At first I didn’t notice much that was different other than a few facelifts to the interface and many more broken websites. Thankfully, Microsoft must have seen this coming so they gave us a fairly nice set of developer tools to fix their mistakes in. All joking aside, it is a much needed and improved toolset. It reminds me a lot of Firebug. You can edit HTML, CSS, view scripts, etc just like Firebug.
But what about HTML5 and CSS3?
While they did add support for a few good CSS3 properties, they still don’t support text-shadow, border-image, multiple columns, gradients, and transitions. It’s a start though! HTML5 has what I consider partial support. ACID Testing scores it as 55/100 while Firefox scores a 98/100. Read more about CSS3 support here and HTML5 support here.
Testing in IE7 and IE8
One other great addition is the ability to choose which browser you are using within IE9. Within the developer tools top menu you will find a dropdown to choose the Browser Mode and Document Mode to view the page in. You can choose browser modes for IE7, IE8, IE9 and IE9 Compatibility Mode. I actually enjoy having IE7-9 in one browser. It saves space and resources.
What about IE6?
Unfortunately, there are still clients out there that want to support IE6. I haven’t yet found a good solution in Windows 7 to view IE6 in, although I have read that you can run Virtual PC and any browser version you want in XP Mode. You can read more about this at http://articles.sitepoint.com/article/ie6-ie7-ie8-win7-xp-mode. Although IE Collection claims to have support for IE6 in Windows 7, it didn’t work for me. The best solution seems to be to have another virtual disk with a stripped down XP running IE6.
UPDATE: Thank you to John who posted a comment on IETester being able to run IE6 in Windows 7. It works great… and fast! I remember using it before, but I didn’t stick with it because the development tools are a little weak, but it does have some. If you could live edit the CSS it would be a solid program. Anyway, this is a great solution for testing IE6 and I’m very thankful for the information.
What do I do if I don’t want to fix my site for IE9?
Luckily, there is a solution that can buy you some time on fixing specifically for IE9 (if you ever want to at all.) There is a line of code that will force your webpage to open as a different version than IE9.
<meta http-equiv="X-UA-Compatible" content="IE=8" >
In your Joomla! template place this directly above
<jdoc:include type="head" />
If you have changed your document mode in the developer tools it may not load the default value so it may still look broken, but it isn’t. Your web page will load as if it is still in IE8. Other choices for forcing IE to load into other modes are:
<meta http-equiv="X-UA-Compatible" content="IE=4"> <!-- IE5 mode --> <meta http-equiv="X-UA-Compatible" content="IE=7.5" > <!-- IE7 mode --> <meta http-equiv="X-UA-Compatible" content="IE=100" > <!-- IE9 mode --> <meta http-equiv="X-UA-Compatible" content="IE=a" > <!-- IE5 mode -->
or you can push it into compatibility mode by using
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
You can read more details about this at http://msdn.microsoft.com/en-us/library/cc288325%28v=vs.85%29.aspx
Conclusion
It is unfortunate that Microsoft still can’t seem to release a decent browser that doesn’t break the appearance of websites. IE8 was so buggy that I used the above code in many sites to force them into IE7 mode. At least the tools to deal with them have improved which offsets the amount of time I’m wasting supporting yet another browser with another set of browser specific CSS. It is too early to tell what specific fixes are needed for IE9, but I have run into some issues that I haven’t found a fix for yet. Usually you can add position: relative or zoom: 1 to fix most issues, but that didn’t seem to do anything to disappearing sections this time around. We’ll let you know when we do find any new fixes. It seems to be issues that need to be patched it future releases. Make sure you have the most recent versions of script libraries, such as Cufon to support IE9.
That sums up my last couple weeks! Let us know if there is anything we missed.
