How to handle with older IE versions and webdesign?

Question

Hi guys,

maybe it's completly my foult to handle so blind, but yes, now I am in a bad situation.

Since month I build an auctioneering platform, the deadline is getting shorter and now - at the end of the project - we do a browser test with older browsers (e.g. and the worst: ie6).

What should I say? The complete design fails in IE6. The logo is not transparent, the login button away in god knows where and the complete menu-bar 100px out of the monitor. In IE7, IE8, Opera 10 and FF3 all is very okay, no problem at all, almost perfect.

So, how I could handle with the fact that in IE6 my complete design is a simple fail? Any ideas to rescue my head? =)

Answer 1

Unless you have a requirement to support IE6, drop it. No need to waste your time and energy to prolong the life of a dinosaur.

EDIT: Seems you have to support IE6. Then you have no other option as to start fixing it, step by step. Make sure you abstract and formulate precisely each problem you have with IE6. If you do, google will give you a workaround quickly.

Answer 2

The first thing to do is to learn an important lesson: when starting a project, find out if IE6 is a target platform and test during development, not at the end of the project.

Second, start fixing it. Add a new stylesheet for IE6 in a conditional comment and start overriding the broken parts.

Answer 3

Have a look at this and maybe you can draw your own conclusions... Much Ado About IE6

Answer 4

For me, the best solution is Conditional Comments and Chrome Frame.

Answer 5

First, don't panic. It's not that hard to get the layout working properly in IE6. A lot of stuff is possible with IE6 you just have to do things a bit differently. It doesn't take an awful lot of time to get a page IE6 compatible (most of the time).

Here are the main key issues off the top of my head:

• First, conditional comments are your friends. Use them to pull in the IE6 versions of your CSS files.
• No transparent PNGs. Use either transparent GIFs, non-transparent images or google for IE6 transparent PNG hack.
• No clear:left or clear:right. Just use clear:both.
• Drop down lists below divs appear on the top of the divs: several solutions available, either hide the dropdowns before displaying the foreground div or use the iframe trick (create an iframe of the size of the foreground div and put it below the div, that will hide the dropdown)
• No position: fixed. You will have to live with that. You can try position: absolute instead or some javascript but that will be really slow. (Let's just say, JavaScript execution speed is not one of IE6's great strengths).
• IE6 has CSS gradients and CSS shadows (just like FF and Safari) but you access them differently, Google IE CSS filters to learn more.
• Try to use jQuery or some other JavaScript library, they hide a lot of complexity and browser incompatability.
• The rest is just fiddling with dimensions. It takes a bit of a time but it's not that hard.

Good luck!