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
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.
<meta http-equiv="Page-Enter" content="revealtrans(duration=0.0)" />
<meta http-equiv="Page-Exit" content="revealtrans(duration=0.0)" />
in your css, get rid of the background color you have for each background image or make it transparent.
for example, in your body:
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.
^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!!!
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.
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-your-websites-underwear-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.
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
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:
[b][/b]/* 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?
Great feedback - I think I included all your suggestions - still reloading though - not completely clear on what is triggering that
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?
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
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?
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).