Hiya,

Please see this page for the site- you're looking at the bright yellow menu underneath "main menu".

If you're in Firefox, the menu background image switches from a yellow square to a red square perfectly.

But... If you're in internet explorer, mouse over one of the (yellow) options and you'll notice a short delay before the background switches, and the text goes fuzzy briefly! Same on mouseout.

The CSS being used is:

a.mainlevel:link, a.mainlevel:visited {
	display: block;
	background-image: url('../images/menubg.gif');
	/*vertical-align: middle;*/
	font-size: 11px;
	font-weight: bold;
	color:#FF00FF;
	text-align: left;
	padding-left: 17px;
	padding-top: 5px;
	height: 20px;
	text-decoration: none;
}

a.mainlevel:hover {
	display: block;
	background-image: url('../images/menubg2.gif');
	/*vertical-align: middle;*/
	font-size: 11px;
	font-weight: bold;
	color:#FF9933;
	text-align: left;
	padding-top: 5px;
	padding-left: 17px;
	height: 20px;
	text-decoration: none;
}

Thanks a lot to anyone who can help! Nice to be back btw

PS: The site's quite obviously under construction, so excuse the unoptimized images, dodgy design and menu colours - they'll be replaced by something a bit more stylish once I've worked this out!

I believe it is an issue with the background images. There is a slight delay, and you get a "flicker" affect. Something to do with images not loading fast enough. I'm not sure.

I can put you to this though:
http://wellstyled.com/css-nopreload-rollovers.html

Also i'm not sure why you chose to use images. You can do the same affect with background color?

Harvey it worked fine for me in both FF and IE. If anything I saw the delay in FF. I believe it's just an issue in mousing over the menu before all the images have completely loaded.

You can try adding a javascript image preloader, but in all honestly you don't need images at all in that menu.

Here's an article I wrote about creating a menu with css and lists. It's basically the menu you have now without any images. You would just need to change some of the colors I used.

Hi,

Something to do with images not loading fast enough. I'm not sure.

Also i'm not sure why you chose to use images. You can do the same affect with background color?

Yup, same here. Since the images preload (see the javascript at the top of the source), this really shouldn't happen.

As I said in my original post, the site's under construction and the images will be replaced once I can get this to work - no point in doing decent images until they actually load!

Vangogh - maybe you've got a later version of IE. Either way, this shouldn't be happening. As you suggested, I've already got a JS preloader.

As I said in my first post, I do need images in the menu - you can't do a rainbow coloured star effect in pure CSS

Harvey, what OS is your hosting under ??

Ladyinred: The operating system of the server has nothing to do with it.

Try a preloader work around.

put this in your html directly after the body tag.

 
<div id="preloader"></div>

and put this in your CSS

 
#preloader {
    background: url('../images/menubg.gif');
    background: url('../images/menubg2.gif');
    background: url('');
    padding: 0;
    margin: 0;
    border: 0;
    height: 1px;
    width: 1px;
}

that should fix the problem.

Sorry about that Harvey, I didn't realize you were going to swap in the real images later. I've seen this before and only in IE, but it's always been one of those hit or miss things. The only think I've ever known to try to fix it is an image preloader, but I always found that it never worked 100% of the time in IE.

I was using IE6 by the way. I can't seem to get IE7 to work with freezing up.

Ladyinred: The operating system of the server has nothing to do with it.

Excuse me, but it most certainly CAN make a difference !!!

While I realize that most hosting companies are running some version of Linux, it IS possible that a person is hosting on an IIS server. IIS has a problem with image caching that has to be corrected in the host headers.

I don't ask stupid questions.. I asked for a reason. I've had many years of web server management experience so I DO know what I'm talking about.

Be that as it may, I still dont see how image caching on the server side would affect image caching on the browser side. The browser would only load the picture when it needs to actively show it.

I guarantee you that I could get the same effect with any server running linux or IIS.

But I'm not here to fight you, I'll learn in my own time I guess.

The Pixy-style rollover link I posted solves this issue for me. Sometimes a post gets lost inside a lot of nonsense.

I still dont see how image caching on the server side would affect image caching on the browser side.

Then maybe you need to do some research, because it DOES make a difference on IIS. I have over 50 web sites hosted on an IIS server (because we have to use it for .NET and it's a corporate requirement). On every single site I have to set the Cache-Control on the images folder to stop the problem that Harvey is describing.

Doing the rollover without images will most definitely solve the problem.

What... do you feel you have to prove something to me?