Layout totally messed up in IE 7

Question

My page works fine in all the browsers except IE 7. In IE7, the divs get go out of their place completely. I suspect its due to the usage of position:fixed . I tried using the proper doctype as many suggested and it still doesn't help. Also IE7 says its rendering in standard mode so I don't know what the issue is. Here's the jsfiddle link: http://jsfiddle.net/FgXS4/

Answer 1

IE7 has known serious issues with position:fixed .

If you need to support IE7, your best option would be to just forget about the fixed positioning thing for that browser, and let the element scroll with the rest of the page. Write a custom stylesheet that only kicks in for IE7 which overrides the standard CSS, and let IE7 users have a slightly degraded browsing experience. That's my advice for your best option.

There are hacks around that try to fix the problem, notably IE9.js , which implements a whole load of patches into old IE versions to try to get them to comply with modern standards. It's a great little script. It can't do everything, and it certainly doesn't magically turn IE7 into IE9, but it might help with this issue (I know it has got patches in it that specifically deal with IE7's position:fixed bugs), so it might be worth giving it a go.

Your other option, of course, is to stop supporting IE7. In all honesty, this might be a good answer. The number of people using IE7 is dropping very quickly (faster even than IE6); the usage figures for it a extremely low and getting lower every month. You might find yourself doing a lot of work to fix this, and then having virtually nobody that actually benefits from it. You could save yourself a lot of time if you just drop support for IE7 altogether. If you're lucky, maybe no-one will even notice. (and even if they do notice, maybe it'll give them a nudge that they need to upgrade their browser!)