0

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?

David
  • 1
  • 1

3 Answers3

1

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.

Sebass van Boxel
  • 2,514
  • 1
  • 22
  • 37
Johnny5k
  • 458
  • 5
  • 9
0

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?

Community
  • 1
  • 1
Clyde Lobo
  • 9,126
  • 7
  • 34
  • 61
0
#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/

easwee
  • 15,757
  • 24
  • 60
  • 83