CSS background-image problem in TD for IE

Works in Firefox. Keeps fetching from the server in IE

[cjthibeault]

Hello Everyone,

I'm in the process of redesigning my site, and I've run into a bit of a problem. I have my left col navigation set up in a table (yeah, I know...), and I'm using CSS to assign a background image on mouse over. It seemed to work fine in IE6 and Firefox locally, but when I put it on my server, IE would fetch the roll over image each time the mouse passed over it.

I found some info on the web that suggested I created a hidden span that linked the images in as img src, but it didn't help. I also found a suggestion to try putting this in my .htaccess:

#this stops screen flicker in IE
BrowserMatch "MSIE" brokenvary=1
BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
BrowserMatch "Opera"!brokenvary
SetEnvIf brokenvary 1 force-no-vary

ExpiresActive On
ExpiresDefault A18000
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000

Neither fixes the problem. Here is my code. Can anyone suggest a fix or an alternative?

- In HTML:
<td height="25" class="menuLink" style="padding:0 10 0 23;" onMouseOver="this.className='navbar'" onMouseOut="this.className='menuLink'">

- My CSS:
.navbar{background-image:url(images/navro.gif);}

Any help would be greatly appreciated.

Thanks,
Christopher

[Robin_reala]

Instead of having two images, a better way is to put both the normal and hover states into the same image and adjust the position. See [tanfa.co.uk ] for a detailed explanation.