Hi,
As a rule of thumb you should never load an image on hover unless the image has already been seen and has been cached. usually you would have the rollover state and the current state as the same image and then it always gets cached and pre-loaded.
The method I use is to put the rollover state in the background of the parent (e.g. the list item) and the place the foreground image in the anchor which sits on top of the rollover state and hides it. This means that both images always get loaded and cached. On hover you simply make the anchors background transparent and the image in the list shows through straight away because it was already there.
The other method of pre loading rollovers is to use on image that has both states on it and then you just manipulate the background position on hover. You should never try and load an image on hover because it won't be fetched until it is called for and you get the delay.
You have also gone overboard on classes and id's and you only in fact need 2 and not the 16 or so that you had!!
The code can be shortened considerably and tidied up as follows.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
ul.rollover{
margin: 0;
padding: 0;
list-style-type:none;
text-align: center;
height:60px;
}
ul.rollover li {
background: url(http://www.incenseheaven.com/image12.gif) no-repeat left top;
float: left;
text-align: center;
margin-left:30px;
display:inline;/* ie double margin fix*/
}
ul.rollover li.current a {
background: url(http://www.incenseheaven.com/image3.gif) no-repeat left top!important;
line-height:56px!important;
color:#000!important;
}
ul.rollover li a{
background: url(http://www.incenseheaven.com/image1.gif) no-repeat left top;
width: 33px;
height: 58px;
color:black;
text-decoration: none;
display:block;
text-align: center;
font-style:normal;
font-size:0.8em;
line-height:56px;
font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}
ul.rollover li a:hover {
color: #930;
background:transparent;
line-height:44px;
}
</style>
</head>
<body>
<ul class="rollover">
<li class="current"><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
<li><a href="#">five</a></li>
</ul>
</body>
</html>
That code is about half the size of yours and easier to understand 
Regarding image flicker in IE then there are a number of issues irrespective of what I have already said above and depends on whether the user has adjusted the browser settings and set the options to "every visit" instead of automatic. (Tools, Inernet Options, settings, "Automatically")
If the user has selected every visit then the image will be fetched anew each time and won't be cached. This will result in a flicker and there is little that you can do about it. The default setting is "automatic" and is the one that everyone should use unless they are testing and developing sites etc.
There is also another issue with IE in that it also flicks the hourglass on and off every time a link is hovered even when no image loaded and will do this even if only the background position is changed.
It doesn't delay the image and is only noticable on slow machines and there is nothing you can do about it as it will happen regardless (unless you use foreground images for the rollover and then the hourglass doesn't get applied but this dirties the html for a cosmetic effect).
I think the issue you were talking about with server side fix is related to the "every visit" scenario and you can adjust the server to instruct the browser to cache the image. However I think that's taking things a bit too far but you can read up on it here:
http://www.fivesevensix.com/studies/ie6flicker/
Bookmarks