I made a website that works great cross-browser, except on old Internet Explorers. What process should I follow to get it to work on old IE's?

Question

I've created a website that displays perfectly on Chrome, Firefox, Safari, and Internet Explorer 8 (minus the rounded corners on IE8). The website's coded entirely in vanilla CSS and HTML, with no javascript formatting or Flash.

It's recently come to my attention that the website is completely mangled on Internet Explorers 6 and 7.

I'd love to be able to just ignore them, but browsing over to the marketshare numbers, Internet Explorer 7 is still far too large to ignore. I'm considering ignoring Internet Explorer 6.

What process can people recommend that I follow now to get my website working on Internet Explorer 7, with an added bonus if it works on Internet Explorer 6? I see things that are misaligned or missing, how should I debug the issue?

I see lots of sites when I search on Google that talk about specific site design elements, and in those discussions they mention if there are quirks in IE. However, I haven't seen any sites that talk about if you've already got a website that works everywhere but quirky old IE, what you should do to figure out how to fix the problems.

Answer 1

Usually, during development, a site is checked regularly in all versions of each browser that need to be supported - so each issue is found in turn. I'm not aware of any site that gives the process in reverse - How can it when you don't know what's wrong?

The only thing you might be able to do is pass it through a validator to check if the inividual tags are understood by ie7 - but that wouldn't help with valid tags/attributes which produce buggy results in the browser

Answer 2

I would recommend conditionally included CSS files. This will enable you to build CSS files that correct any style issues for IE 6 and 7. For example, you could include the following after your site's CSS:

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

More information on this approach is available at: http://www.webdevout.net/css-hacks#conditional_comments-css_hack

As for figuring out what the issue is, I would recommend the IE developer toolbar as a good tool for figuring out why an element is rendering the way it is in a certian version of IE. [Essentially it will tell you the styles that it has applied, you can then figure out what style to create in your conditionally included CSS file to correct it.]