IE8 background-position on :hover not moving file

I'm using the background-position 开发者_开发百科method of changing an image when I hover over it. This is working fine for me in FF, Chrome, and Safari, but not in IE8. The background image is a .png that contains alpha transparency. I've run my code through the W3C validator and it is valid, so I shouldn't be hitting compatibility mode.

Here's the relevant snippet of html code:

<div id="main-nav">
<div id="texas">
  <a href="texas.html"><span>texas</span></a>
  <h2>texas</h2>
</div>
<div id="washington">
  <a href="washington.html"><span>washington</span></a> 
  <h2>washington</h2>
</div>
</div>

And the relevant css:

#main-nav {
  width: 844px;
  height: 400px;
  margin: 40px auto; 
  position: relative;
}

#texas, #washington { 
  position: absolute; 
  height: 500px; 
  width: 196px;
}

#texas a {
  background-image: url("pics/texas.png"); 
}

#washington a {
  background-image: url("pics/washington.png");
}

#texas a, #washington a { 
  height: 400px; 
  width: 196px;
  display: block;
}

#texas a:hover, #washington a:hover { 
  background-position: 196 0; 
}

Help?

I was having a similar problem where css rollovers with background-position change on hover weren't working, only in IE8. They were very sporadic - sometimes one would switch out, but then stay stuck in the hover state for a while, until another one would eventually trigger.

I found that by removing any IE-specific transparency filters filter: alpha(opacity=100); from the css of any of the element's parent elements, the issue was resolved.

Here are some pages discussing issues with png in ie8

http://www.mooforum.net/discussion/issue-with-png-transparency-ie8-t2063.html

http://www.vistaheads.com/forums/microsoft-public-internetexplorer-general/433700-problem-alpha-transparent-png-ie8.html

How to solve/hack fading semi-transparent PNG bug in IE8?

#texas a:hover, #washington a:hover { 
  background-position: 196px 0; 
}

Add px value to your 196. Otherwise .png transparency doesn't work only in IE6 and can be solved with this: http://www.twinhelix.com/css/iepngfix/