onload in IE7 does not fire until after I move my mouse

**web_eng** · 07-02-2008, 12:18 PM

I'm using "Nifty Corners" to round corners and set faux columns by manipulating css and triggering it onload.

http://www.html.it/articoli/niftycube/index.html

If i just type the address of my site directly into the browser and hit enter, it will go to the page and display it as though the nifty corners function hasn't run.

Then if I move my mouse into the content area (away from the address bar) the page suddenly renders correctly.

The behaviour is intermittent as it sometimes renders correctly.

The niftycorners script comes with a NiftyLoad option to work in with other scripts designed to use onload. I'm not running any other onload scripts and have tried many variations of windows.onload <body onload> etc etc and all come up with the same symptoms. The problem only seems to occur in IE7. FF works fine every time and I haven't checked other browsers.

To see the effect, try typing http://webvalue.com.au/ directly into your address bar (making sure you leave your mouse cursor in the address bar area)

The current code configuration is:

<link rel="stylesheet" href="css/niftyCorners.css" type="text/css" />
<script type="text/javascript" src="/shared/scripts/jscript_niftyalayout.js"></script>
<script type="text/javascript" src="/shared/scripts/niftycube.js"></script>

<body onload="NiftyLoad();">

Where the jscript_niftyalayout.js code looks like this:

NiftyLoad=function(){
Nifty("div#left,div#col_container","none same-height");
Nifty('div#centre,div#right','none same-height');
Nifty('div#col_container,','big tr br');
Nifty('div#left,','big tl bl');
Nifty('div#menu a','transparent');
}

niftyCorners.css and niftycube.js are unchanged since supplied from the nifty corners website. I know that this script has been used extensively so I don't think the problem is with either of them.

Can anyone assist with getting this thing to fire every time a page loads?

Thanks in advance.

David.

**jscheuer1** · 07-03-2008, 04:09 AM

You have at least one resource that the page cannot find:

Code:

http://webvalue.com.au/webvalue/niftyCorners.css

I cannot find where this file is linked in your source code, but FF and Safari are both looking for it and cannot find it. IE is probably as well. (note: this is not the file in the css folder, that one is there, this one is missing)

That will slow/confuse the loading process. If you also have any missing images and/or missing background images, that can mess with IE.

Your source code has an inordinate amount of empty space in it, and does not validate. You should use HTML not XHTML. Any one of these things may, or may not be a part of the problem.

**web_eng** · 07-03-2008, 08:32 PM

John, thank you heaps......

moving the css file to that directory seems to have fixed the prob (fingers crossed as the prob is intermittent but doesn't seem to be occurring).

I take it that there's a way to get FF to display resources so I've used it to do some validating via the tools menu but I couldn't actually get it to display that I was missing that css file.

It seems strange to me that FF is actually advising that when it loads the page correctly, so it would seem that it's finding all the correct files, wouldn't it?

I've managed to get a couple of green ticks in FF for html and CSS so now I'm wondering about that whitespace/XHTML issue. I didn't bother mentioning that the site is running coldfusion pages in a fusebox framework as my testing showed the same probs occurring in or out of the framework, but, I have noticed that there is a lot of whitespace in pages run in the framework. Does that cause a problem?

You've got me wondering about file locations for other files now so I'll probably never get any sleep. Thanks heaps again for your response, I noticed that a lot of people had viewed my query but your were the only one prepared to provide the answer before I ran out of hair, so from me and my hairdresser, another big thanks

.

**jscheuer1** · 07-03-2008, 11:02 PM

I used FF's developer extension (an add on) to see all of the stylesheets (both on page and external - it does that, and many other handy things) associated with the page. Even though FF didn't find a file where it was expecting it, that generally will not cause an error for FF for loading the page (all browser have various error correcting algorithms, even IE - sometimes IE's error correction overlooks errors that other browsers choke on).

This is all to say that unless your page is totally error free, there could be a problem in one browser or another that relates to that/those errors. It is also true that even with an error free page, there can be problems where a given browser falls short of the standards.

As a side node, Safari 3 Win has an 'Activity Window' that comes with. This shows the status of page resources. It too showed that the file mentioned was expected and not found.

I'm thinking that it (the 'missing' stylesheet), was referenced from within another existing stylesheet, but I couldn't find the reference. There are other possibilities, but obviously, if putting the file there fixed things, it could have been the cause.

I think the trouble you were having only occurred when the cache for the page was empty, so to be sure you've fixed it, exit IE completely, restart it, clear the IE browser's cache, and then load the page.

The other things I mentioned were simply 'potential issues', if it's fixed, I wouldn't worry about them too much.

Space in the source code shouldn't matter, as long as it is otherwise valid.

XHTML is only really a serious problem if the server actually serves the document as xml/XHTML - in a case like that, IE will not even render the page. However, the standards with XHTML may sometimes conflict with browsers that are parsing it as HTML, which almost all must if the page can be viewed in IE.

I know XHTML is in vogue right now, and therefore sometimes hard to avoid in certain environments, but it shouldn't be.

**web_eng** · 07-04-2008, 12:02 AM

John,
I've got the developer extension and now understand and can see which file was required. I'm still not sure why its being called from that directory but am presuming that the niftycube.js called it. (is it that obvious that I'm not a java guru

)

I reloaded ie and deleted history etc and the problem is fixed for sure. It was interesting to learn that all browsers have various error correcting algorithms!

To be honest, I'm not really sure what XHTML is although, the fusebox framework uses xml files so there's probably a connection there that I should be reading up on.

I might just make a note to the nifty corners website to mention about the css directory requirement as I'm sure there must be many others with the same prob.

Again thanks for your detailed and informative responses.

**jscheuer1** · 07-04-2008, 05:42 AM

I'm not even sure what XHTML is, although it is 1.0 and likely to change, perhaps drastically, before it is fully formalized. Documents written in HTML 4.01 (what I generally recommend) can still use xml though, so XHTML isn't required for that. It's just that many view XHTML as somehow superior to, or 'ahead of' HTML, which it isn't. This causes many folks, including the developers of various CMS systems to use it when it isn't required, and it can cause problems.

You are right about the nifty script adding the nifty stylesheet. It does so here:

Code:

var oldonload=window.onload;
if(typeof(NiftyLoad)!='function') NiftyLoad=function(){};
if(typeof(oldonload)=='function')
    window.onload=function(){oldonload();AddCss();NiftyLoad()};
else window.onload=function(){AddCss();NiftyLoad()};

function AddCss(){
niftyCss=true;
var l=CreateEl("link");
l.setAttribute("type","text/css");
l.setAttribute("rel","stylesheet");
l.setAttribute("href","niftyCorners.css");
l.setAttribute("media","screen");
document.getElementsByTagName("head")[0].appendChild(l);
}

particularly in the highlighted area. Most likely if you were to remove or comment out that area, it would still work fine, as long as the stylesheet were still associated with the page via either a hard coded stylesheet link or via being hard coded in the head.