CSS not working online.

[amazing_andr3]

http://andrei.hotusa.org

The page works fine with motzilla and with IE from my computer. But from the server, with IE, this crucial bit stops working, so the picture is not displayed (the strange thing is, if I right click the links, then properties, it miraculously starts working again!!!):

.menu li a:hover
{
background: url('blahblah');
}

At first I thought it was the ads, but I saved the page with the ads and ran it from my computer and it worked. I have had this exact problem with a different provider (therefore different ads) and with a different page.

Could it be the ads after all, some javascript?

I dont't have high hopes this can be fixed, but I'm very curious to know why it happens.

[MstrBob]

I do not seem to have this issue. Perhaps its your own computer? I've checked it on Firefox, Mozilla, Opera, and IE, and all the images showed up just fine.

[russell]

Works ok for me too. But did I detect that you are not preloading your rollover images? I am extremely interested to hear mstrBob's take on this (as he is an html strict expert), but I don't think that css is the best way to do image rollovers. I think this should be done with JavaScript. At the very least, the rollover image defined in your CSS --

.navigation A:hover
{
BACKGROUND: url(xfiles/buttonhover.jpg);
COLOR: navy
}

-- should be preloaded with JS. I did have a noticeable delay (and i have broadband) where the display was awkward when I moused over the 1st link on the right ("About Me").

[MstrBob]

I'm by no means an HTML expert, merely a reader of the HTML specs.

Rollovers are probably best done in CSS. This is for a number of reasons. First off, a well made rollover navigation should look something like this:


<ul>
<li><a href="home.html" title="Homepage">Home</a></li>
<li><a href="about.html" title="About Us">About Us</a></li>
<li><a href="links.html" title="Interesting Links">Links</a></li>
</ul>


You have your semantic code there, a list of links, which is what your nav really is. You have text there incase the images fail, or if a user agent comes along that can't "read" the images (like an audio browser, or a search engine). Now, one can use CSS to hide the text, and give it a background image. This would be the most backward compatible and user friendly way of doing it. So you have two choices:

CSS
Javascript

Now, you would be using Javascript to change the background via the DOM, right? CSS 2, however, has support for different states of elements. So Javascript merely becomes a more roundabout way of doing the rollover. Using the :hover psuedo class in CSS, you can assign a different background image, so whenever the mouse cursor is over the element, it has that background image. It's actually less code for the task. Now, the image is referenced to in the CSS, and if it's in an external css file, I believe the image will be downloaded, and the styling interpreted before the browser gets to content. So by the time the rest of the page is loaded, so are the images. Thus, preloading should not be necessary with the CSS approach.

[russell]

Well, there it is. amazing_andr3 is using an external css file (which i ingraciously downloaded when i suspected the rollover image wasn't pre-loaded). I am not so sure that the image referenced is in fact, preloaded via the css reference, but until i bother to test exhaustively, or see documentation to the contrary i will take your word for it Bob. thanks. and notice how i pirated OPs post...? :)

[amazing_andr3]

So it's my IE then? Well, this surely is good news (except that now i'll have to download it again).
Just to make sure, I have changed from JS to CSS rollover another site, -the home link- (i haven't added the alternative text yet)

http://andr3.s5.com/evolutia - it's got the same problem

So what's the conclusion with the preloading? I mean, it's a very easy thing to do and now that i think about it, it might be a good idea. The page loads the menu images last, and it would be a good idea if it would load them at the beginning.

Thanks guys.

[MstrBob]

It depends. If you want to preload your images, it won't harm anything. The image will be in the cache, so there one would think that it should work for CSS, though I'm not sure. And the images will still load for other users. If your images are that large (and there seems to be some issues) you could go ahead and do just that.

[russell]

Try both ways, and test exhaustively. Then do what appears to perform better.