I’ve spent a fairly decent amount of time researching around about the supportability of IE6. From what I’ve read it seems that this chart is fairly accurate:
hitslink DOT com
(wont let me put the full link in because I’m new to this site)
Unfortunately (or I guess maybe fortunately) in our contracts to clients we say we only support IE7+, FF, Safari, and Chrome. Which, judging from the above research means we only support about 70% of our market (obviously dependent on a lot of factors). The site isn’t a complete loss in IE6 but there are some pages where our 3 column layout breaks and pushes columns down.
I would like to somewhat support IE6 as it could distract theoretically about 20% of potential users. That being said what would be the best way for testing and fixing?
I have a full Win7 box with IE8 installed and also IETester installed. Is there easy way to “debug” CSS in IE6 or is it all trial and error? Normally I do all testing and reconfiguring in FF with Firebug. Are there any other reliable tools for finding CSS issues in IE6.
I just use IEtester and test in ie6 - 8 on every step of the way during development.
Fixing things after the event is many times harder.
IE6 is easy to fix once you know the main bugs and problems and you address these while you develop. I rarely run into a bug at all these days as everything is well documented so you should know what to avoid (see faq).
If columns are pushed down then something is actually too big or IE thinks it’s too big. Check your dimensions and if using percentages leave some leeway as IE will round up. If inner elements are bigger than their parents IE will stretch the parent and it won’t fit any more so make sure everything really fits.
Make sure all main containers that hold more than simple content are in haslayout mode (e.g. give them a dimension if possible) and that will cure 99% of all household IE bugs.
Add display:inline to floats to clear the double margin bug on floats (see faq on floats for the full reason for this).
Control all padding and margin on all the block elements you use so that they are consistent between browsers.
