SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast mozakdesign's Avatar
    Join Date
    Nov 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Flicker on page change in IE (not in firefox)

    I am working on the following site for my preschool. www.creativechildrenscenter.mozakdesign.com. When you view it in firefox you can change pages smoothly. However in IE it blinks/flickers like a reload effect. Any ideas on what is going on

  2. #2
    Now available in Orange Tijmen's Avatar
    Join Date
    Jul 2004
    Location
    The Netherlands
    Posts
    1,469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In which version of IE do you have that problem? I don't see it happen myself in IE6 and 7.

    And why do you have this part in your code? Setting both of them at 0 makes it a bit pointless to add them if you ask me.

    Code:
    <meta http-equiv="Page-Enter" content="revealtrans(duration=0.0)" />
    <meta http-equiv="Page-Exit" content="revealtrans(duration=0.0)" />
    Travel Photos on Flickr - Twitter

    “Never give up. Never surrender”

  3. #3
    SitePoint Enthusiast hartofalyon's Avatar
    Join Date
    Aug 2008
    Location
    NYC
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in your css, get rid of the background color you have for each background image or make it transparent.

    for example, in your body:

    Code:
    background:white url('../grapics/painting.jpg') no-repeat center top;
    get rid of the "white," or replace it with "transparent." same applies to your other images that are utilized as background images in css.

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    ^If you do that, people's native background colour will show through, which, if that's something nasty like Magenta or bright orange, will make your site not only ugly but possibly unreadable (and the CSS specs do actually say that if you bother to mention a foreground (text) colour, you MUST provide a background colour.

    I would get rid of that page enter stuff, it can't be doing anything for you, and possibly you are getting what's called a Flash of Unstyled Content (an IE thing usually, though I thought that was caused by the @import which there are none here).

    Having the css in a separate, external file which all browsers can cache wouldn't hurt.

    Offtopic: My gawds, it's SNOWING!!!!

  5. #5
    SitePoint Enthusiast hartofalyon's Avatar
    Join Date
    Aug 2008
    Location
    NYC
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what's a native background color? i've never heard of browsers having a native background color of bright orange or anything other than white. i know you can custom set the default background color in your browser, but who really changes that from white? and i'm not sure why you need to declare a background color when you set a background image. i've only seen people use transparent in addition to their background image.

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    i know you can custom set the default background color in your browser, but who really changes that from white?
    Many people do it to ease their eyes-- some people cannot take bright white backgrounds with black text.

    Also, many people set the colours of their X window system. This is often (not always) inherited by the browser.

    and i'm not sure why you need to declare a background color when you set a background image.
    Because you can never, EVER guarantee that the image will load. Some people do not load images because they don't want to spend 3 days on dial-up getting the page. Or you chose an image that's 22 MB in size and takes 3 days to load anyway, or you screwed up the url and it's a broken image, or it has enough contrast for you but not for Ed Seedhouse. Or whatever (and I'm guilty of this, at least on my older sites, when I didn't know any better).

    Here's an interesting article: http://www.zeldman.com/2008/11/07/is...rwear-showing/
    The comments may be more interesting that the article itself. I don't screw with my browser skins or my colour setup or anything, but apparently other people do.

  7. #7
    SitePoint Enthusiast mozakdesign's Avatar
    Join Date
    Nov 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the input - no luck solving the issues yet. I had a question about the css in an external style sheet - I thought mine was. I am I missing something? Thanks again

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Well, I just took a look again at the source of the first page.

    *edit I think Tijmen's comment was from when he saw the <style> tag with the styles for the menu, and when he saw all the "style="float: left;" in the HTML-- you do have an external stylesheet, however your positioning like floats are in the HTML meaning they are not getting cached per page-- every time the browser goes to a new page on your site, it has to load the HTML because it's a new (to it) HTML document. Everything in your external CSS only gets loaded once however, which can result in subsequent pages loading faster after the first, initial page is loaded. You can set all those internal styles into your external stylesheet and on those with slower hookup to Teh interTubes will notice a difference in speed (all other factors like server load etc. being the same). And yeah, having your styles for positioning in the HTML might still be IE's problem.

    Your images are referenced locally, so that's not the problem.

    You have a Byte Order Mark before your comment in the CSS. I didn't see it when viewing your CSS directly in the browser (by typing in the full url to your css) but when viewing it with the Web Developer Toolbar in FF, I see this:
    Code:
    /* Reset */
    
    html, body, div, span, object, iframe, h1, h2, ...
    That funny little character is how the Byte Order Mark gets represented. It should not be there. Some text editors like Notepad add those in, and you can't see them, because it's not really a character but something used with UTF (though it's completely not necessary for UTF-8, only UTF-16 or higher). The Byte Order Mark tells computers which way to read a number (where the ones, tens, and hundreds places are, left-to-right or right-to-left?).
    You could try to open your CSS in another text editor of some kind and see if you can remove that mark. Who knows, it could be what's tripping IE up. You certainly shouldn't have it in your HTML or CSS sheets (I looked, I copied the HTML and pasted it, I don't see the mark anywhere in the HTML so that should be ok).

    IE6 sometimes flickers images used in image replacement, and this has something to do with either Haslayout or caching problems... I remember someone talking about the flicker and there was a solution for it. However that's only for some images and I don't think it's the same problem you have.

    I do notice that in FF, with scripts blocked and everything, the page was still loading after a long time (even after finally the bg image appeared). There may be something else going on that makes loading take too long and other browsers are covering up for it with caching?

  9. #9
    SitePoint Enthusiast mozakdesign's Avatar
    Join Date
    Nov 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great feedback - I think I included all your suggestions - still reloading though - not completely clear on what is triggering that

  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Since Tijmen didn't see the flicker on his IE's, is it possible YOU have something set funny on your IE copies? Some high security setting or caching off or something?

  11. #11
    SitePoint Member
    Join Date
    Jul 2008
    Location
    Vancouver
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm- any resolution to this issue? i'm experiencing it with a site i'm working on.

    oliespizzeria dot com /test

    bg images that are the same from page to page are flickering in IE 6 and 7
    Designs & Ideas: www.megansmith.info

  12. #12
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    This happened to me in an earlier design and it was due to a hasLayout issue. Those who know more than I, any chance of that here?

  13. #13
    SitePoint Member
    Join Date
    Jul 2008
    Location
    Vancouver
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, the site's live now (no longer in the test folder)- it still has the flicker. I noticed that several other pages I went to in IE also have it, just less noticeable.

    I did some research, and there was a quite a lot about it happening in IE 6, but not really anything about it happening in IE7 (this site, I'm experiencing it in both versions).
    Designs & Ideas: www.megansmith.info


Tags for this Thread

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
  •