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.
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:
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.]