List of CSS features not supported by IE6

Question

Hello, 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

Some examples are:

• Child selectors: a>b {}
• Adjacent selectors: a + b {}
• Attribute selectors: [id="my_id"] {}

For an impressive example of use of incompatibilities, take a look at Gemination at CSS zen garden design with IE6 and Firefox.

Moreover, you can navigate through A list apart site for resources on the subject (and many others about Web design).

Answer 2

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 3

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 4

the ones that I stumbled across the most :

- li:hover (or on any element except a)
- min/max-width
- min/max-height

Answer 5

Firstly I'd advise you use Eric Meyer's Reset Styles which will ensure as much correctness as possible for cross-browser support. Secondly, I'd revise Yadyn's post about "Knowing Thy Enemy". Whilst it can be a nightmare it has to be done as statistics will show that even though IE6 is no longer actively developed and has been taken over by IE7, it's still widely used.

Answer 6

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

Answer 7

If you look on the W3Schoolswebsite it tells you what Properties are support in which browsers. Hope you find this useful.

Cool Hand Luke UK

Answer 8

Something that never works for me is the visibility attribute. And it's darned annoying as well (no it is not the same as display!)

Answer 9

In addition to the things mentioned, make sure you use a doctype that makes IE6+ use Standards Mode. The bugs and hacks are just about manageable in Standards Mode without having to have a completely different stylesheet.

Otherwise IE6 will revert to Quirks Mode and you are essentially having to support IE5, with all the box-model-hack horribleness that entails.