I am stuck in a strange situation. Please take a look at http://www.alljigsawpuzzles.co.uk/
You'll see a jQuery slider near the top of the page which fades between 4 images.
If you have a moderately slow connection, you'll see that the 4 images are loaded one below the other before the slider activates, and the images disappear. This causes the page to stretch out first before it snaps back into place once the loading is complete.
While trying to fix this issue, I set the "overflow" value of the container to hidden. This immediately solved the problem on every browser apart from IE 8.
The problem in IE 8:
Now, the problem in IE is that the page completely loses its styling when I made the change and uploaded it as index_2.html. See here: http://www.alljigsawpuzzles.co.uk/index_2.html
Now, I took this as a quirk of IE and tried to find a way around it. I went through several solutions, and they all seemed to work on every browser apart from IE. (Even the ones recommended for IE).
So what I did was, I uploaded the unmodified index.html as index_orig.html.
(See here: http://www.alljigsawpuzzles.co.uk/index_orig.html
This is the same file as the original, without any of my fixes. And it still loses all its formatting in IE.
I just cannot understand how 2 files with exactly the same code can appear differently in the same browser.
Can someone please go through this and let me know what I'm doing wrong?
Thanks a lot,