Page styling error in IE 8
Hello all,
I am stuck in a strange situation. Please take a look at http://www.alljigsawpuzzle
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.alljigsawpuzzle
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.alljigsawpuzzle
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,
Shishir S.
I am stuck in a strange situation. Please take a look at http://www.alljigsawpuzzle
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.alljigsawpuzzle
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.alljigsawpuzzle
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,
Shishir S.
I'm not going to get into the style disappearing issue or why index2 and index_orig are acting strangely.
For what it's worth. I suspect your issue has to do with the overflow property and the position:relative. Quirky things happen when combining certain CSS properties and their inheritance. If memory serves me this qualifies.
I might suggest that rather than using overflow:hidden change your approach to setting a max-height property instead. This should work in all browsers except IE6 and below. Or at least its worth a try.
For what it's worth. I suspect your issue has to do with the overflow property and the position:relative. Quirky things happen when combining certain CSS properties and their inheritance. If memory serves me this qualifies.
I might suggest that rather than using overflow:hidden change your approach to setting a max-height property instead. This should work in all browsers except IE6 and below. Or at least its worth a try.
ASKER
Hello,
Thank you for your responses.
@Deathrace and @ddayx10:
As I've already mentioned, my problem is that the same files with 2 different names appear differently in the browser. They are using the same "style.css", and the HTML for both files is the same. They are hosted on the same server, in the same directory.
Regardless, I still compared them using winmerge, and the results are the same. Both files are the same.
I also tried the "max-height" recommendation by ddayx10, and it still breaks the styles of the page.
best,
Shishir
Thank you for your responses.
@Deathrace and @ddayx10:
As I've already mentioned, my problem is that the same files with 2 different names appear differently in the browser. They are using the same "style.css", and the HTML for both files is the same. They are hosted on the same server, in the same directory.
Regardless, I still compared them using winmerge, and the results are the same. Both files are the same.
I also tried the "max-height" recommendation by ddayx10, and it still breaks the styles of the page.
best,
Shishir
SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
ASKER CERTIFIED SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
ASKER
I found the solution myself, but thanks for helping me out.
Glad you got the solution.
I will see if i can find anything..