Hi,
Looked everywhere but all I can find are posts on issues regarding hover states.

site is: www.bluefishwebdesign.com/portfolio.html

What happens: IE caches page wrongly. It looks as hovering over each link reloads the background image.
Also: If you click on the image the background image changes correctly but remains there untill you click elsewhere.
Weird.
Any help would be very appreciated.
This is driving me nuts!!

Thanks

CSS:

Code:
body {
	background: url("images/backgrmain.gif")
	}
	
#title {
	width:1027px;
	height: 507px;
	background: url("images/backgtitle.gif") 0 0 no-repeat;
	}

#container {
	position:relative;
	left: 280px;
	top: 280px;
	width: 730px;
	height: 300px;
	}
	
.firstcolumn {
	float:left;
	}
	
.thirdcolumn {
	float:right;
	margin-top: 0px;
	}

a.prince  {
	width: 241px;
	height: 51px;
	display: block;
	background: url("images/prince.gif") 0 0 no-repeat;
	overflow: hidden;
	}

a:visited.prince  {background-position: 0px 0px;}
a:hover.prince {background-position: 0px -51px;}
a:active.prince {background-position: 0px -102px;}

a.krishna {
	width: 241px;
	height: 51px;
	display: block;
	background: url("images/krishna.gif") 0 0 no-repeat;
	overflow: hidden;
	}
a:visited.krishna {background-position: 0px 0px;}
a:hover.krishna {background-position: 0px -51px;}
a:active.krishna {background-position: 0px -102px;}

etc...
html:

Code:
<body>
<div id="title">
<div id="container">

<div class="firstcolumn">
<a href="#" target="_blank" class="prince"></a>
<a href="#" class="krishna" target="_blank"></a>
<a href="#" class="ry" target="_blank"></a>
<a href="#" class="dux" target="_blank"></a>
</div>

<div class="thirdcolumn">
<a href="#" class="marc" target="_blank"></a>
<a href="#" class="nirvana" target="_blank"></a>
</div>

<div class="secondcolumn">
<a href="#" class="weasel" target="_blank"></a>
<a href="#" class="oral" target="_blank"></a>
<a href="#" class="tr" target="_blank"></a>
</div>

</div>
</div>
</body>