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.

Code:

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.

Code:

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:

Code:

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

and:

Code:

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

to:

Code:

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:

Code:

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:

Code:

<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):

Code:

<!--[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

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

Originally Posted by Defender90

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.