12

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!

Bruno
  • 4,337
  • 12
  • 42
  • 55
  • 1
    That going to be a very long list... Even after many years, IE6 still surprises me every now and then with some rendering bug I haven't seen or noticed before. – Tamas Czinege Jan 30 '09 at 10:55
  • This isn't related directly to your question, but rather than installing XP under a VM, you can use IETester, it can show you what your website will look like in IE 5.5, 6, 7 and 8. http://www.my-debugbar.com/wiki/IETester/HomePage – Aistina Feb 02 '09 at 15:12
  • 1
    No - XP and VM is the way to go. IETester doesn't have a license to redistribute the IE dlls, and so is technically illegal. – Keith Aug 28 '09 at 10:47

9 Answers9

23

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.

roborourke
  • 12,147
  • 4
  • 26
  • 37
7

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.

Miguel Ping
  • 18,082
  • 23
  • 88
  • 136
  • I would disagree. Quirks will only cause you pain in the long run. Keep in mind that quirks/standards mode also affects JavaScript in IE too. – scunliffe Jan 30 '09 at 13:18
  • Sorry, maybe I wasn't clear. Quirksmode is a link in this site. I'll edit the post, tks – Miguel Ping Jan 30 '09 at 16:59
5

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

Nick Allen
  • 11,970
  • 11
  • 45
  • 58
  • This approach doesn't scale that well, because next thing you know you'll be adding another css for ie8 because it has neat blur effects, etc... – Miguel Ping Jan 30 '09 at 17:01
  • I guess so if you start using proprietary browser filters but there is plenty you can do with designs without using those. I would only suggest using conditional style sheets for critical fixes i.e. stuff that makes a site unusable in older browsers, not for stuff that would make a site extra pretty – Nick Allen Feb 05 '09 at 17:54
4

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).

mouviciel
  • 66,855
  • 13
  • 106
  • 140
3

the ones that I stumbled across the most :

- li:hover (or on any element except a)
- min/max-width
- min/max-height
andyk
  • 10,019
  • 10
  • 36
  • 41
2

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.

Community
  • 1
  • 1
Kieran Senior
  • 17,960
  • 26
  • 94
  • 138
1

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.

bobince
  • 528,062
  • 107
  • 651
  • 834
0

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!)

Ross
  • 46,186
  • 39
  • 120
  • 173
  • perhaps because you should be spelling it as a 'visibility' property? This is one of the oldest and best-supported CSS properties there is - even going back to Netscape 4 and IE3... – bobince Feb 02 '09 at 12:44
  • Correted. When I've tried it it's worked in Firefox, IE7 etc. but not for IE6. Might just be me then... – Ross Feb 02 '09 at 15:07
-3

If you look on the W3Schoolswebsite it tells you what Properties are support in which browser.

RafaSashi
  • 16,483
  • 8
  • 84
  • 94
Cool Hand Luke
  • 2,120
  • 9
  • 32
  • 51