Making your website compatible for different versions of Internet Explorer should still be top priority.

Browser usage trends are constantly changing, and Google Chrome usage has recently increased at the expense of Internet Explorer.
However, there is no doubt that most people still use IE, in spite of the fact that most web developers simply hate it.

cross browser compatibility

One of the problems in IE compatibility is that your site may look entirely different in IE7 when compared to IE8 or IE6, therefore, there is no choice but to test each version separately (bummer huh?! I know..).
You cannot have a stand alone installation of all three versions on the same operating system, but there are some workarounds.

The most reliable solution is to to have IE8 installed, and then have 2 more virtual machines, one with IE6 installed and the other with IE7 installed.
However, this solution is somewhat complicated, and there are alternatives that are much easier and straight forward.
The most popular IE emulator is ietester, but there is another one which I personally prefer – iecollection.

During the installation of iecollection, you can choose which versions of IE to install. The most reasonable selection at this point would be IE6, IE7 and IE8.
In addition, you can select to install IE developer toolbar that let’s you debug HTML and CSS as well as to change CSS style properties on the fly. Don’t expect it to be FireBug, it’s not, but I still recommend using it.

Using IE developer toolbar in iecollection

Recently, I have decided to integrate Google Custom Search in my blog.
During the integration, I noticed that IE displays the default Search button instead of my styled button (take a look at the image below). As you may know the reason for this, is that IE does not know the CSS opacity property.
Therefore, to make the default button transparent (so the styled one below it will be visible), I had to use a different CSS property – filter:alpha(opacity=0).

To style elements for IE using the IE developer toolbar:

  1. Click on View menu and select Explorer Bars.
  2. Select IE Developer Toolbar. The toolbar will appear at the bottom of the screen.

ie8 in iecollection

  1. Click on the Select Element By Click icon.
  2. Select the element you want to change style for.
  3. You can see that the relevant HTML tag is selected in the left pane.
  4. Set the css style properties for that element in the middle pane.

IE developer toolbar

Even if you are not a web developer, but you own a website or a blog, I recommend to install iecollection and check how different pages of your site look like in different versions of IE.

Which tools do you use to test your site in different versions of IE? Is your website compatible with IE6? Which browser do you like the most?

Additional resources

Topics:   | | |