IE takes forever to load the same bg image in CSS menu

[4bidden]

Hey guys! First post here...glad to be a part of the DD forum finally!

I am having a problem with a CSS navigation menu in IE. Firefox loves this script and has no problem with it at all - works flawlessly like it should. However, IE kills most of the menu as soon as you roll over it and then takes FOREVER to get the background image back.

See for yourself here - http://www.bondurant.com/test/menutest2.html

All of the CSS and a little bit of JS is in the head tag so you can take a look there.

Any idea what I can do to keep IE from slaughtering the menu when you mouseover it?

[4bidden]

OK...I have changed the page a bit and now I've got a different way of doing it, but IE is still giving me problems....

Go to the above link and mouseover the submenus and you will notice the bg image on the menu heading will flash every time you hover over a new submenu item.

The stylesheet is internal if you want to take a look.

body {
	background-image: url('index_layout.jpg');
	background-repeat: no-repeat;
	background-position: top left;
}

ul#nav {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 184px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	position: absolute;
	top: 94px;
	left: 11px;
}

.main {
	background-image: url('bg2.gif');
	background-repeat: no-repeat;
}

li {
	margin-bottom: 0px;
	/*background-image: url(bg2.gif);
	background-repeat: no-repeat;*/
}

ul li {
	position: relative;
}

li ul {
	position: absolute;
	left: 182px!important;
	left: 141px;
	top: 0;
	display: none;
	list-style: none;
	width: 150px;
	padding: 0px 0px 0px 5px;
}

ul#nav li ul li a {
	background-color: #1c1c1c;
	background-image: none;
	opacity:.70;
	filter: alpha(opacity=70);
	-moz-opacity: .70;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: white;
	padding-left: 8px;
	margin: 0px 0px 0px 0px;
}

ul#nav li ul li a:hover {
	background-color: #1c1c1c;
	background-image: none;
	opacity: 1.0;
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: white;
}

ul li a {
	display: block;
	text-decoration: none;
	color: #FFF;
	background: #fff;
	padding: 2px 0px 4px 40px;
	background-color: #1c1c1c;
	/*background-image: url("http://www.bondurant.com/test/bg2.jpg");
	background-repeat: no-repeat;*/
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li:hover ul, ul li.over ul { 
	display: block;
}

[mwinter]

http://www.bondurant.com/test/menutest2.html

Go to the above link and mouseover the submenus and you will notice the bg image on the menu heading will flash every time you hover over a new submenu item.

I believe the problem you're experiencing is caused be an issue with the caching of background images. As I recall, one way to fix it is to send freshness information (Expires or Cache-Control: max-age headers), thereby convincing IE not to check with the server. Reportedly, another is to use the proprietary pre-check and post-check Cache-Control directives, which have a similar effect.

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;

Don't use pixels to set font size, otherwise a bug in IE will prevent users from resizing text (a bad thing). Use percentages instead, preferably leaving body text at 100% of default, and going no lower than 85% anywhere else.

If Verdana looks too big, don't use it. Reducing the font size just means that if Verdana isn't used, the replacement font may be too small for the user to comfortably read.

background-image: url('bg2.gif');

I realise that this is a demonstration, but background images should always be paired with a background colour (and examined by viewing with images disabled), and background-color declarations should be paired with color declarations.

On a separate note,

startList = function startFix() {
  if (document.all && document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) {
      node = navRoot.childNodes[i&#93;;
      if (node.nodeName=="LI") {
        node.onmouseover=function() {
          this.className+=" over";
        }
        node.onmouseout=function() {
          this.className=this.className.replace(" over", "");
        }
      }
    }
  }
}
window.onload=startList;

<body bgcolor="black" onLoad="javascript:startFix()">

is invalid. The identfier in a function expression (startFix, above) should only be present in the scope chain of that function expression, and not from external code. The behaviour you're taking advantage of is a bug, and not consistently implemented in all browsers.

In any event, the code shown contains redundancy. Choose one of:

function startFix() {
  /* ... */
}

<body onload="startFix();">

or:

this.onload = function() {
  /* ... */
};

Mike