Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: Issue with IE only when navigating page

  1. #1
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default Issue with IE only when navigating page

    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

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,313
    Thanks
    28
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default

    There's no white flash here. What IE-version are you using? There's a workaround for IE7 and IE8.
    Arie Molendijk.

  3. #3
    Join Date
    Nov 2009
    Posts
    107
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Default

    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.

  4. The Following User Says Thank You to itivae For This Useful Post:

    Defender90 (07-20-2012)

  5. #4
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    If that is what is happening, you could preload the background image.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  6. The Following User Says Thank You to bernie1227 For This Useful Post:

    Defender90 (07-20-2012)

  7. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,920
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,313
    Thanks
    28
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default

    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.

  9. The Following User Says Thank You to molendijk For This Useful Post:

    Defender90 (07-20-2012)

  10. #7
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    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.

  11. #8
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

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

  12. #9
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,313
    Thanks
    28
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default

    Quote Originally Posted by Defender90 View Post
    <!--[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.

  13. #10
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by molendijk View Post
    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •