CSS Rollover :hover image not rolling over in IE8

Question

I have quite a lot of problems with IE7, but this time IE8 is doing something strange.

The next piece of code does not work:

<style>
.inschrijven{ display: block;  width: 460px;  height: 150px; background: url("image.png") no-repeat 0 0;}
.inschrijven:hover{background-position: bottom;}
.inschrijven span{display: none;}
</style>

<div style="text-align:center;">
<a href="#" onclick="pageTracker._trackEvent('samenstellen', 'click', 'track');" class="inschrijven"><span>Schrijf u hier in</span></a>
</div>

I can't click the item, it does not rollover. It doesn't even center in the screen. I thought this was the correct way of doing something so basic.

Answer 1

I think it is invisible because of this css:

.inschrijven span{display: none;}

You have <span> set inside your link but then you have made it invisible with above CSS, so you can't see it and therefore can't click it.

Try removing below CSS and then see:

.inschrijven span{display: none;}

Answer 2

I couldn't find a similar case, and every other button seemed to work in IE8, but here's my solution:

Leave the span empty. No space needed, do not hide it.

Set a padding for this span, adjusted to the image dimension:

.inschrijven span {padding:5px 230px 145px;}

Answer 3

Im not sure what your issue is, it works fine for me

although as the others have noted your span is invisible. http://jsfiddle.net/F2XJs/2/

http://jsfiddle.net/F2XJs/3/ has everything working, and commented, also, it achieves your requirements with the text without using a span :)