So I built some complex ajaxy jquery module on my homepage, with the help of “scrollable” from flowplayer.org.
It works fine for me on Chrome, Opera, Firefox … but of course IE is not playing friendly (regardless of the version, from my testing).
Objects are not displaying exactly where they should, some are overlaying each other, and when a click a button some divs just disappear.
However, if I resize the IE browser window up and down, the display mostly fixes itself.
Then if I click on one of the buttons I made, it messes it up again. Until I resize the window again and it looks fine.
To see the problem:
- Go to makemeheal.com
- Visit a couple of product pages (you need a product browsing history to see the module)
- Go to: http://www.makemeheal.com/mmh/home.do?forceshowIE=1
- Look at the “Your Recent History” module.
(note the forceshowIE=1, because by default I hide it for IE people)
I was thinking maybe there is a way to force IE to redraw the entire module sometimes?
Or maybe someone has a better idea on how to fix the underlying problem?
Source code is available here:
http://www.makemeheal.com/mmh/scripts/recentHistory.js
http://www.makemeheal.com/mmh/styles/recentHistory.css
Thanks
You are missing a doctype declaration at the top of the file, this is causing IE to revert to quirks mode. Providing a doctype will cause IE to render in standards mode. (cant say IE6 will still behave, but IE7/IE8 should be more consistent with the other browsers)
Try putting this at the top of the main file:
Hopefully that fixes it.