MRMcGovern.com

Previously, I wrote about Firefox and all of the great add-ons there are to help you develop websites faster and easier. These are all great to get you started and on your way to a great looking website, but any web developer knows that once you get past your initial HTML draft and open your page in Internet Explorer you are going to run into problems. So how do you get your pages to display correctly in Internet explorer?

First, before we get to the good stuff, we’ll just review the basics of what many web developers do to solve these cross browser compatibility issues.

Conditional Comments

One of the most common ways to get your design to display correctly in Internet Explorer is to use conditional comments. Conditional comments are just HTML comments that contain IF statements, these comments are placed in the page, and the IF statements are only read by Internet Explorer.

First, create a new CSS document and name is ie.css. Once this is done, we will need a way to link the CSS file, only if the page is being displayed in Internet explorer, so we’ll add a conditional comment.

    <!--[if IE]>
	<link rel="stylesheet" type="text/css" href="css/ie.css" />
    <![endif]-->

If you want to make a different stylesheet for different versions of Internet explorer you can specifically identify which version of Internet Explorer the comment is intended for.

    <!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="css/ie6.css" />
    <![endif]-->

You can even make conditional comments that affect any version of IE before a certain version, after a certain version and more by using lt, lte, gt or gte in the comment.

lt = Less Than
lte = Less Than or Equal To
gt = Greater Than
gte = Greater Thank or Equal To

For example, if I made a stylesheet intended for Internet Explorer versions 7 and older I would use the comment:

    <!--[if lte IE 7]>
	<link rel="stylesheet" type="text/css" href="css/lteIE7.css" />
    <![endif]-->

One little hack you can do if you get stuck on issues between different versions of IE is make the newer version emulate an older version of IE. This is also done a meta tag in the head like the example below.

<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />

Enough of the basics, lets talk about tools to help you get the job done.

Multiple IE’s

Multiple IE’s is a great tool developed by Tredosoft that allows you to install multiple versions of Internet Explorer on your computer. This program gives you the much needed capabilty of having two versions of Internet Explorer to test your pages in. Unfortunately Multiple IEs is no longer maintained, but can still be downloaded. It will only install versions 6 and older on your computer (you can choose which of these you want to install), and allow it to run along side version 7 OR version 8, not both.

Xenocode

Xenocode.com is a great website that hosts tons of applications that can be run right from the web, without installing them on your computer. Xenocode has Internet Explorer 6, 7, and 8, Firefox 1, and 2, Safari and more. Xenocode also has alot more than just browsers, and even allows developers to upload their own applications for anyone to use.

IE NetRenderer

As you may have seen in my post about Firefox add-ons there is a useful web application called IE netrenderer. IE NetRenderer allows you to either right click your page, and choose to render in IE 6, 7, or 8 (if you have the firefox plugin), or type in your web address directly into thier web form at http://ipinfo.info/netrenderer/.

The less desireable aspects of IE NetRenderer include the fact that it only takes a screen shot of the page as seen in IE, and perhaps even less desireable than that is the fact that NetRenderer only takes a screen shot of the viewable area. If the web page scrolls either down or accross, you will not see the parts of the page which you would have had to scroll to.

These are all very useful tools, some are older than others and some are more useful than others depending on what platform you are developing on. Conditional comments are my cross browser bomb squad, I would not be able to do what I do in twice the amount of time without them. My personal favorite is Xenocode when developing on a windows machine and NetRenderer when on Mac.