List of CSS features not supported by IE6

Question

I just finished slicing and coding a very nice table-less css template for my website, all the time I was testing with IE7 and Chrome.

Then I just had the brilliant idea of testing this template with IE6, I installed Windows XP on a Virtual PC and then I opened my website on IE6.

It looks extremely bad!

The format of my page looked like garbage, nothing displaying correctly like in IE7 and Chrome. I knew that some things were not supported by IE6, but I didn't think that my page would render like it did.

So I would like to know if there is a place where I can see what is not supported by IE6 so I can fix my CSS or even create a new one only for IE6.

Any info will be very helpful!

Thanks!

Answer 1

IE6 has LOTS of CSS bugs so that will be contributing to your page rendering. The official list of what is and isn't supported is here.

What might also help you is positioniseverything.net, they have a comprehensive list of IE bugs and their fixes.

If you're still struggling to get it right post a link to your page.

Answer 2

I strongly strongly recommend you to view this site http://quirksmode.org/dom/compatibility.html: it has a great compilation and test cases for most stuff, css and javascript.

Answer 3

I would imagine you have Firefox installed on your machine. If so install the Firebug add-on (which is fantastic in itself) but if you also install the new add-on from Sitepoint, FireScope, it will allow you to right click your elements within Firebug and pull-up a browser compatibility chart for your CSS and HTML (plus extra code samples)

With Firebug you can also edit your CSS and watch the resulting effect in real-time, which can save alot of time!

Once you have identified the areas of the site that are breaking use the following approach to use an IE6 specific stylesheet to correct them so that your design stays working as you intended for more modern browsers

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

As an extra tip opacity and PNG's or GIF's with transparent backgrounds don't tend to play nicely in IE6 and I would strongly recommend you use a JavaScript library such as Prototype or JQuery if you are working with JavaScript