PDA

View Full Version : Issue with IE only when navigating page



Defender90
07-19-2012, 08:07 PM
Hi everyone.

I'm having a problem with a website where when you navigate through the pages you get a very quick white flash. It doesn't happen on pages home to about but all the others. It also doesn't happen in any browser other than IE.

I'm sure it is a novice code issue but I can't figure it out. Can anyone help?

Thanks.

here is the site

www.parovertech.com

molendijk
07-19-2012, 08:14 PM
There's no white flash here. What IE-version are you using? There's a workaround for IE7 and IE8.
Arie Molendijk.

itivae
07-20-2012, 12:47 AM
I only saw it in the IE 9 Compatibility mode. My guess would be that the background image you are using is taking a minute to load.
i.e.

url("../images/back1.jpg")
And the default color for the background is white. Therefore, you are seeing the background color for a split second until the images fully loads. Try changing the
background-color of the body.


body {
background-color:#003300;
}

(the color there is a dark green). Good luck.

bernie1227
07-20-2012, 02:09 AM
If that is what is happening, you could preload the background image.

jscheuer1
07-20-2012, 04:41 AM
The background image is loaded after the first page load. The problem is IE in compatibility mode (which emulates IE 7) and presumably in IE 7 itself. It tends to forget and/or have other problems with background images. Preloading it would not help, it's already loaded.

And the color actually is:

#193b2a

And the image is 100% solid that color. So you don't need a background image at all. Which means itivae's idea is basically correct. Change all instances of:


body {
background-image: url(images/back1.jpg);
}

and:


body {
background-image: url(../images/back1.jpg);
}

to:


body {
background-color: #193b2a;
}

But even that might not be enough. Another problem is that the styles on at least some of the pages are too far down in the code. The browser (IE 7) is busy loading scripts before it even knows there are styles.

Ideally all the common styles would be in an external stylesheet that's linked to just after the title and meta tags on all pages. Failing that, you can simply place the styles, starting with:


body {
background-color: #193b2a;
}

as the first thing on each page after the title and meta tags.

The browser cache may need to be cleared and/or each of the pages refreshed to see changes.

molendijk
07-20-2012, 11:00 AM
First try to do what John suggests.
I had this problem in the past too. If it's the background image that causes the issue (which is the case, probably), you could try to include all of the main page EXCEPT THE IMAGE via Ajax, and then add to the page containing the Ajax-include:

<div style="position:absolute; left:0px; top:0px; right:0px; bottom:0px; z-index:-1"><img src="your-background-image.jpg" style="position:absolute;left:0px;top:0px;width:100%;height:100%;" alt="bla"></div>

If nothing helps, put this at the top of the head (but it's not the best of possible solutions):

<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.001)">
<meta http-equiv="Page-Enter" content="Alpha(opacity=100)">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.001)">
<meta http-equiv="Page-Exit" content="Alpha(opacity=100)">
<![endif]-->
Arie.

Defender90
07-20-2012, 11:35 AM
Thanks,

I tried moving the style at the top and it didn't work. The odd thing is if you jump back and forth from Home/About it doesn't do it. All the other pages do. I need the background image since It has the lines at the top and bottom.

Defender90
07-20-2012, 11:39 AM
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.001)">
<meta http-equiv="Page-Enter" content="Alpha(opacity=100)">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.001)">
<meta http-equiv="Page-Exit" content="Alpha(opacity=100)">
<![endif]-->

I added this to the contact page and it solved the problem. Why is this not the best way to acheive this?
Thanks everyone

molendijk
07-20-2012, 11:55 AM
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.001)">
<meta http-equiv="Page-Enter" content="Alpha(opacity=100)">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.001)">
<meta http-equiv="Page-Exit" content="Alpha(opacity=100)">
<![endif]-->
I added this to the contact page and it solved the problem. Why is this not the best way to acheive this?
Thanks everyone
Because it shows the page in 'IE7 mode', which is not the latest version of IE. But as long as it works, it's OK.
===
Arie.

Defender90
07-20-2012, 02:42 PM
Because it shows the page in 'IE7 mode', which is not the latest version of IE. But as long as it works, it's OK.
===
Arie.

Worked like a charm.

Thanks a lot for the help.

jscheuer1
07-20-2012, 04:16 PM
Actually what it does is show the page in IE 8 or IE 9 standards, depending upon the version of the browser. A real IE 7 and an IE 8 or 9 that the user forces into compatibility mode will still have the problem.

The reason it shows the page in the highest mode available for the IE browser being used is that once you do this:



<!--[if IE]>

It's too late to do this:



<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">


It has no effect, as the IE browser mode is already set once you open an IE specific content block. The other code, the blending transitions may or may not be needed. Probably not.

But, if it works and you're happy with it, go with it. It will not fix IE 7. It will not even fix later IE if the user forces compatibility mode in their later IE browser. This can sometimes be set by default upon IE installation.

About the image, you could probably get away with just the color, I don't think anyone but you notices that line. If it is crucial you can use border and/or HR to substitute for it. Or you could add the color as a fall back for while the image loads:


body {
background: #193b2a url(images/back1.jpg);
}

Which would still be best as the first thing after the title and meta tags.

Defender90
07-20-2012, 04:36 PM
Looks like it is back....so it didn't work.

Why do you think it doesn't happen when going from Home page to about page?

Defender90
07-20-2012, 04:44 PM
I really like the background image which contains the lines so I want to try to keep it. I saw that the background image was 30wx3000h. Thought this might be causing it so shortened it and it did nothing. The thing I can't figure out is why the home/about page are fine. Both those pages are running javascript and the others arent.

jscheuer1
07-20-2012, 04:45 PM
I think we may have cross posted and/or I edited my most recent post:

http://www.dynamicdrive.com/forums/showpost.php?p=278095&postcount=11

while you were reading it. Refresh it and reread it.

To answer your question, your IE browser is probably in compatibility mode, or is an IE 7 browser. Which version of IE are you using?

If it's IE 7, the problem comes and goes as that browser has problems remembering/loading background images correctly, but sometimes gets it right.

If it's later, you may be inadvertently switching between compatibility mode and standards mode or are in compatibility mode always where the problem will, like in the real IE 7, come and go. A real IE 8 in standards mode may also have this problem. I don't have one to easily test on.

About the javascript, it might actually hold up the rendering of the page long enough for the style to get read.

Defender90
07-20-2012, 04:48 PM
Thanks.....I will see about updating my IE and see what happens.