I am having problems with the following link:
the play image is a <span> element with a background image used with a css sprite.
When i hover over the isotope hydrology image like in the image above everything works fine (link and css sprite). The problem is in IE9, when the cursor hovers over the css sprite(play button) the sprite goes back to the non-hover look and you cannot click to the link from inside (see image below).
If anyone knows why this is happening that would be awesome. Here’s a jsfiddle I made for it, but it doesn’t recreate the problem.
I have the following html and css:
html:
<div id="video-box-left">
<div class="video-img">
<a href="#" onclick="window.open('http://wwwindex.html','photoessay','scrollbars=no,resizable=yes,width=850,height=722')">
<span class="video-play-q-left">play</span>
<img src="resources-na/images/forum.PNG" width="200" height="155" border="1"></a>
</div>
<div class="video-text">
<p><strong>Food for the Future</strong><a href="#" onclick="window.open('http://www-','photoessay','scrollbars=no,resizable=yes,width=850,height=722')"></a></p>
</div>
</div>
css:
#video-box-left{
margin-left: 10px;
margin-right: 20px;
float: left;
width: 210px;
}
.video-img {
background-color: #EEEEEE;
border: 1px solid #DDDDDD;
margin-bottom: 5px;
padding: 4px;
width: 200px;
height: 155px;
}
.video-text {
}
.video-play-q-left {
background: url("../images/video-play-q-big.png") no-repeat scroll 0 0 transparent;
background-position: center top;
height: 50px;
position: absolute;
text-indent: -9999em;
width: 50px;
left: 100px;
top: 127px;
}
a:hover .video-play-q-left{
background-position: center bottom;
}
I’d guess this is due to an issue with the DOCTYPE of your document which causes IE9 to render the document in quirks mode. That would explain why the JSFiddle doesn’t reproduce the problem. Try opening the Developer Console in IE9 and make sure Document Mode and Browser mode are both set to IE9. If that solves your problem, make sure your DOCTYPE tag is set to HTML 5, e.g.